style: Use unlinked rounded buttons for notifications

Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/3383>

data/theme/gnome-shell-sass/_common.scss

@@ -189,18 +189,31 @@ stage {
   }
 }
 
-// buttons in dialogs/notifications
+// buttons in notifications
-// lighter in color and have a greater radius
+// use a rounded style and have a lighter background
-%bubble_button {
+%notification_button {
+  font-weight: bold;
+  padding: $base_padding $base_padding * 2;
+  border-radius: $base_border_radius;
+
+  @include button(normal, $style: notification);
+  &:focus { @include button(focus, $style: notification);}
+  &:hover { @include button(hover, $style: notification);}
+  &:active { @include button(active, $style: notification);}
+  &:checked { @include button(checked, $style: notification);}
+  &:insensitive { @include button(insensitive, $style: notification);}
+}
+
+
+// buttons in dialogs
+// use a linked style
+%dialog_button {
   padding: $base_padding * 2;
-  font-weight: bold !important;
+  font-weight: bold;
 
   &:ltr {margin-right: 1px;}
   &:rtl {margin-left: 1px;}
 
-  // needs a 1px adjustment to fit exactly into the outer radius
-  $bubble_button_radius: $modal_radius - 1px;
-
   @include button(normal, $style: bubble);
   &:focus { @include button(focus, $style: bubble);}
   &:hover { @include button(hover, $style: bubble);}
@@ -208,26 +221,29 @@ stage {
   &:checked { @include button(checked, $style: bubble);}
   &:insensitive { @include button(insensitive, $style: bubble);}
 
+  // needs a 1px adjustment to fit exactly into the outer radius
+  $dialog_button_radius: $modal_radius - 1px;
+
   &:first-child:ltr {
-    border-radius: 0 0 0 $bubble_button_radius;
+    border-radius: 0 0 0 $dialog_button_radius;
   }
 
   &:last-child:ltr {
-    border-radius: 0 0 $bubble_button_radius;
+    border-radius: 0 0 $dialog_button_radius;
     margin-right: 0 !important;
   }
 
   &:first-child:rtl {
-    border-radius: 0 0 $bubble_button_radius;
+    border-radius: 0 0 $dialog_button_radius;
   }
 
   &:last-child:rtl {
-    border-radius: 0 0 0 $bubble_button_radius;
+    border-radius: 0 0 0 $dialog_button_radius;
     margin-left: 0 !important;
   }
 
   &:first-child:last-child {
-    border-radius: 0 0 $bubble_button_radius $bubble_button_radius;
+    border-radius: 0 0 $dialog_button_radius $dialog_button_radius;
     margin-left: 0 !important;
     margin-right: 0 !important;
   }

data/theme/gnome-shell-sass/_drawing.scss

@@ -210,7 +210,7 @@
   }
 
   // background color override for buttons that use transparency
-  // styles: notification bubbles, lockscreen
+  // styles: dialogs bubbles, lockscreen
   @if $style == 'bubble' or $style == 'lockscreen' {
     $button_bg_color: transparentize($tc, .9);
     $hover_button_bg_color: transparentize($tc, .87);
@@ -218,6 +218,15 @@
     $active_hover_button_bg_color: transparentize($tc, .81);
   }
 
+  // background color overrides for notification style
+  @if $style == 'notification' {
+    $button_bg_color: transparentize($tc, .85);
+    $hover_button_bg_color: transparentize($tc, .7);
+    $insensitive_button_bg_color: transparentize($tc, .9);
+    $active_button_bg_color: transparentize($tc, .8);
+    $active_hover_button_bg_color: transparentize($tc, .8);
+  }
+
   // flat style overrides
   @if $style == 'flat' {
     $insensitive_button_bg_color: $button_bg_color;

data/theme/gnome-shell-sass/widgets/_dialogs.scss

@@ -16,7 +16,7 @@
   }
 
   .modal-dialog-linked-button {
-    @extend %bubble_button;
+    @extend %dialog_button;
   }
 }
 

data/theme/gnome-shell-sass/widgets/_message-list.scss

@@ -64,21 +64,19 @@
 // message bubbles
 .message {
   @extend %card;
-  padding: 0;
+  padding: $base_padding;
   margin: 0;
   border-radius: $modal_radius;
 
-  // subtract side padding to accommodate the close button's border
-  &:ltr { padding-right:-2px; };
-  &:rtl { padding-left:-2px; };
-
   // message header
   .message-header {
-    padding: 0 $scaled_padding;
-    margin: $base_padding;
-    margin-bottom: 0;
     spacing: $base_padding;
     color: $insensitive_fg_color;
+    padding:0 $base_padding;
+
+    // side padding to accommodate the close button
+    &:ltr { padding-right:$base_padding - 2px; };
+    &:rtl { padding-left:$base_padding - 2px; };
 
     // header source icon
     .message-source-icon {
@@ -113,17 +111,14 @@
     .message-expand-button,
     .message-close-button {
       @extend .icon-button;
+      @extend %notification_button;
+      border-radius: $forced_circular_radius; // make circular
       color: $fg_color;
-      background-color: transparentize($fg_color, .9);
       padding: 4px;
-      &:hover { background-color: transparentize($fg_color, .81);}
-      &:active,
-      &:active:hover { background-color: transparentize($fg_color, .76);}
-      &:insensitive { background-color: transparentize($fg_color, .93);}
     }
 
     .message-expand-button {
-      padding: 6px;
+      padding: $base_padding;
       &:ltr { margin-right: $base_padding; }
       &:rtl { margin-left: $base_padding; }
     }
@@ -132,7 +127,6 @@
   // container for message contents
   .message-box {
     padding: $base_padding;
-    margin: $base_padding;
     margin-top: 0;
     spacing: $base_padding;
 
@@ -169,6 +163,26 @@
       }
     }
   }
+
+  // container for message buttons
+  .message-action-bin {
+    padding: $base_margin;
+    spacing: $base_padding;
+
+    // set margin on children
+    * {
+      margin: 0 $base_margin;
+      // remove margins
+      &:first-child {
+        &:ltr { margin-left:0;}
+        &:rtl { margin-right:0;}
+      }
+      &:last-child {
+        &:ltr { margin-right:0;}
+        &:rtl { margin-left:0;}
+      }
+    }
+  }
 }
 
 // URLs in messages

data/theme/gnome-shell-sass/widgets/_notifications.scss

@@ -21,5 +21,5 @@ $notification_banner_width: 34em;
 }
 
 .notification-button {
-  @extend %bubble_button;
+  @extend %notification_button;
 }

js/ui/messageList.js

@@ -439,6 +439,7 @@ export const Message = GObject.registerClass({
         vbox.add_child(hbox);
 
         this._actionBin = new St.Bin({
+            style_class: 'message-action-bin',
             layout_manager: new ScaleLayout(),
             visible: false,
         });