[gnome-shell/wip/snwh/style-updates] theme: notification fixes

[Sam Hewitt <snwh src gnome org>]

commit bead700be296ba5fe2bef83e4d9a0153ffb07046
Author: Sam Hewitt <sam snwh org>
Date:   Mon Jan 3 11:31:17 2022 -0330

    theme: notification fixes

 data/theme/gnome-shell-sass/_common.scss           | 33 ++--------------------
 .../gnome-shell-sass/widgets/_notifications.scss   | 30 +++++++++++++++++++-
 2 files changed, 31 insertions(+), 32 deletions(-)
---
diff --git a/data/theme/gnome-shell-sass/_common.scss b/data/theme/gnome-shell-sass/_common.scss
index 37fb585ad0..fe3876b1be 100644
--- a/data/theme/gnome-shell-sass/_common.scss
+++ b/data/theme/gnome-shell-sass/_common.scss
@@ -34,7 +34,7 @@ $base_spacing: 6px;
 $base_border_radius: 8px;
 
 // radii of things that display over other things, e.g. popovers
-$modal_radius: $base_border_radius*3; // 24px
+$modal_radius: $base_border_radius*2; // 24px
 
 // non-standard colors
 $bubble_borders_color: lighten($borders_color, if($variant=='light', 0%, 5%));
@@ -149,36 +149,7 @@ stage {
   }
 }
 
-// buttons in notifications
-%notification_button {
-  @include button(normal, $shadow: none);
-  padding: $base_padding * 2;
-  border-style: solid;
-  border-width: 1px;
-  border-left-width: 0;
-  border-bottom-width: 0;
-
-  &:insensitive { @include button(insensitive, $shadow: none); }
-  &:focus { @include button(focus, $shadow: none); }
-  &:hover { @include button(hover, $shadow: none); }
-  &:active { @include button(active, $shadow: none); }
-
-  // make radius fit in bubble corner
-  &:first-child {
-    border-radius: 0 0 0 $base_border_radius - 5px;
-  }
-
-  &:last-child {
-    border-right-width: 0;
-    border-radius: 0 0 $base_border_radius - 5px 0;
-  }
-
-  &:first-child:last-child {
-    border-radius: 0 0 $base_border_radius - 5px $base_border_radius - 5px;
-  }
-}
-
-// notification styling
+// styling for elements within popovers that look like notifications
 @mixin notification_bubble($flat: false) {
   border-width: 0px;
   border-style: solid;
diff --git a/data/theme/gnome-shell-sass/widgets/_notifications.scss 
b/data/theme/gnome-shell-sass/widgets/_notifications.scss
index 78db9c281c..0ca0db3d18 100644
--- a/data/theme/gnome-shell-sass/widgets/_notifications.scss
+++ b/data/theme/gnome-shell-sass/widgets/_notifications.scss
@@ -3,17 +3,45 @@
 $notification_banner_height: 64px;
 $notification_banner_width: 34em;
 
+
+$notification_button_radius: ($base_border_radius - 2px);
+
 // Banner notifications
 .notification-banner {
   min-height: $notification_banner_height;
   width: $notification_banner_width;
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
 
   .notification-actions {
     spacing: 0;
   }
 
   .notification-button {
-    @extend %notification_button;
+    @include button(normal, lighten($bg_color, 5%), $shadow: none);
+    padding: $base_padding * 2;
+    border-style: solid;
+    border-width: 1px;
+    border-left-width: 0;
+    border-bottom-width: 0;
+
+    &:insensitive { @include button(insensitive, $shadow: none); }
+    &:focus { @include button(focus, $shadow: none); }
+    &:hover { @include button(hover, lighten($hover_bg_color, 5%), $shadow: none); }
+    &:active { @include button(active, lighten($active_bg_color, 5%), $shadow: none); }
+
+    // make radius fit in bubble corner (width of focus ring)
+    &:first-child {
+      border-radius: 0 0 0 $notification_button_radius;
+    }
+
+    &:last-child {
+      border-right-width: 0;
+      border-radius: 0 0 $notification_button_radius 0;
+    }
+
+    &:first-child:last-child {
+      border-radius: 0 0 $notification_button_radius $notification_button_radius;
+    }
   }
 }