[gnome-shell/wip/snwh/style-updates: 63/100] theme: adjust notifications area

[Sam Hewitt <snwh src gnome org>]

commit 95351024fd255ee86fac2ae372b0a206c728e50d
Author: Sam Hewitt <sam snwh org>
Date:   Thu Jan 13 15:38:03 2022 -0330

    theme: adjust notifications area

 .../gnome-shell-sass/widgets/_message-list.scss    | 45 +++++++++++++++++-----
 data/theme/no-notifications.svg                    |  4 ++
 2 files changed, 39 insertions(+), 10 deletions(-)
---
diff --git a/data/theme/gnome-shell-sass/widgets/_message-list.scss 
b/data/theme/gnome-shell-sass/widgets/_message-list.scss
index f77d81d98f..fa8a7ac98f 100644
--- a/data/theme/gnome-shell-sass/widgets/_message-list.scss
+++ b/data/theme/gnome-shell-sass/widgets/_message-list.scss
@@ -6,12 +6,25 @@
   width: 32em;
   padding: 0;
 
-  .message-list-placeholder { spacing: 12px; }
+  .message-list-placeholder { 
+    font-weight:1000; 
+    font-size: 18pt;
+    color: transparentize($fg_color, 0.7);
+    spacing: 12px;
+
+    // icon size and color
+    > StIcon {
+      icon-size: $base_icon_size*4; // 32px
+      -st-icon-style: symbolic;
+    }
+  }
 }
 
+
 .message-list-sections {
   spacing: $base_spacing;
   margin: 0; 
+  padding-bottom: $base_padding;
 
   // to account for scrollbar
   &:ltr {margin-right: $base_margin * 4; }
@@ -25,10 +38,10 @@
 
 // do-not-disturb + clear button
 .message-list-controls {
-  margin: ($base_margin * 2) ($base_margin * 4) 0;
   // NOTE: remove the padding if notification_bubble could remove margin for drop shadow
-  padding: $base_margin;
-  spacing: $base_spacing * 2;
+  padding: $base_padding;
+  margin: 0;
+  spacing: $base_spacing;
 
   .dnd-button {
     // We need this because the focus outline isn't inset like for the buttons
@@ -48,13 +61,15 @@
 // message bubbles
 .message {
   @include notification_bubble;
+  padding: $base_padding * 1.5;
 
   // icon container
   .message-icon-bin {
-    padding: ($base_padding * 3) 0 ($base_padding * 3) ($base_padding * 2);
+    padding: ($base_padding * 2);
+    padding-left:$base_padding;
 
     &:rtl {
-      padding: ($base_padding * 3) ($base_padding * 2) ($base_padding * 3) 0;
+      padding-right:$base_padding;
     }
 
     // icon size and color
@@ -72,13 +87,15 @@
 
   // content
   .message-content {
-    padding: $base_padding + $base_margin * 2;
+    padding: 0;
     spacing: 4px;
   }
 
   // title
   .message-title {
     font-weight: bold;
+    /* HACK: the label should be baseline-aligned with a 1em label, fake this with some bottom padding */
+    padding-top: 0.57em;
   }
 
   // secondary container in title box
@@ -99,9 +116,17 @@
 
   // close button
   .message-close-button {
-    color: lighten($fg_color, 15%);
-    &:hover { color: if($variant=='light', lighten($fg_color, 30%), darken($fg_color, 10%)); }
-    &:active { color: if($variant=='light', lighten($fg_color, 40%), darken($fg_color, 20%)); }
+    color: $fg_color;
+    background-color: transparentize($fg_color, 0.9);
+    border-radius: 99px;
+    padding: $base_padding;
+    margin: 0;
+    &:hover { 
+      background-color: transparentize($fg_color, 0.8);
+    }
+    &:active {
+      background-color: transparentize($fg_color, 0.9);
+    }
   }
 
   // body
diff --git a/data/theme/no-notifications.svg b/data/theme/no-notifications.svg
index 9ac2f66b38..f79e42349f 100644
--- a/data/theme/no-notifications.svg
+++ b/data/theme/no-notifications.svg
@@ -1,3 +1,4 @@
+<<<<<<< HEAD
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <!-- Created with Inkscape (http://www.inkscape.org/) -->
 
@@ -173,3 +174,6 @@
     </g>
   </g>
 </svg>
+=======
+<svg width="64" height="64" xmlns="http://www.w3.org/2000/svg";><path d="M-44.068 15.543c.075.667.25 1.312.25 
2 0 9.94-8.06 18-18 18-.471 0-.914-.09-1.375-.125v8.875a7.234 7.234 0 0 0 7.25 7.25h6.18l8 8.187 
8.25-8.187h6.445a7.234 7.234 0 0 0 7.25-7.25v-21.5a7.234 7.234 0 0 0-7.25-7.25z" 
style="color:#000;display:inline;overflow:visible;visibility:visible;opacity:.5;fill:#c3c3c3;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:8;marker:none;enable-background:accumulate"/><path
 d="M-61.818 3.543c-7.732 0-14 6.268-14 14s6.268 14 14 14 14-6.268 14-14-6.268-14-14-14zm-2.125 4h4.125l-.25 
5.5a.798.798 0 0 0 0 .25.798.798 0 0 0 0 .124.798.798 0 0 0 .5.5.798.798 0 0 0 .125 0 .798.798 0 0 0 .25 0 
.798.798 0 0 0 .25 0 .798.798 0 0 0 .124-.124l4.625-3 2 3.625-4.875 2.5a.798.798 0 0 0-.124 0 .798.798 0 0 
0-.125.124.798.798 0 0 0-.125.375.798.798 0 0 0 0 .25.798.798 0 0 0 0 .125.798.798 0 0 0 .125.25.798.798 0 0 
0 .125.125.798.798 0 0 0 .124.125l5 2.5-2.125 3.625-4.625-3.124a.798.798 0 0 
 0-.124 0 .798.798 0 0 0-.25-.125.798.798 0 0 0-.25 0 .798.798 0 0 0-.5.375.798.798 0 0 0-.125.124.798.798 0 
0 0 0 .125.798.798 0 0 0 0 .25l.25 5.5h-4.125l.375-5.5a.798.798 0 0 0-.125-.374.798.798 0 0 
0-.125-.25.798.798 0 0 0-.25-.125.798.798 0 0 0-.25-.125.798.798 0 0 0-.125 0 .798.798 0 0 0-.375.125l-4.75 
3.125-2-3.625 5-2.5a.798.798 0 0 0 .125-.125.798.798 0 0 0 .125-.125.798.798 0 0 0 .125-.25.798.798 0 0 0 
0-.124.798.798 0 0 0 0-.25.798.798 0 0 0 0-.125.798.798 0 0 0-.125-.25.798.798 0 0 0-.125-.125.798.798 0 0 
0-.125 0l-5-2.5 2-3.625 4.75 3a.798.798 0 0 0 .125.125.798.798 0 0 0 .25 0 .798.798 0 0 0 .25 0 .798.798 0 0 
0 .125 0 .798.798 0 0 0 .125-.125.798.798 0 0 0 .125-.125.798.798 0 0 0 .124-.125.798.798 0 0 0 
0-.124.798.798 0 0 0 .125-.25.798.798 0 0 0 0-.125z" 
style="color:#000;display:inline;overflow:visible;visibility:visible;fill:#bebebe;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:4;marker:none;enable-background:accumulate"/><path
 style="vector-effect:none;f
 
ill:#bebebe;fill-opacity:.5;stroke:none;stroke-width:4;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;paint-order:normal"
 d="M32 8c-8.837 0-13.32 6-16 16l-4 20c-.433 2.166-1.79 4-4 4v4h48v-4c-2.21 0-3.567-1.834-4-4l-4-20C45.879 14 
40.837 8 32 8zm.703 48a6 6 0 0 0 5.649 4A6 6 0 0 0 44 56H32.703z"/></svg>
+>>>>>>> 1ea28acca (theme: adjust notifications area)