feat: Improve notification styles (#3913)

Co-authored-by: gadenbuie <[email protected]>
Co-authored-by: Carson <[email protected]>
Co-authored-by: cpsievert <[email protected]>

Author: gadenbuie

NEWS.md

@@ -4,9 +4,9 @@
 
 * Updated `selectizeInput()`'s selectize.js dependency from v0.12.4 to v0.15.2. In addition to many bug fixes and improvements, this update also adds several new [plugin options](https://selectize.dev/docs/demos/plugins). (#3875)
 
-* Shiny's CSS styling for things like `showNotification()`, `withProgress()`, `inputPanel()`, etc., now looks better with `{bslib}`'s upcoming CSS-only dark mode. (#3882)
+* Shiny's CSS styling (for things like `showNotification()`, `withProgress()`, `inputPanel()`, etc.), has been updated with `{bslib}`'s upcoming CSS-only dark mode feature in mind. (#3882, #3914)
 
-* Shiny's Sass variables are now set specifically for major versions of Bootstrap. Bootstrap versions 3 and 4 are unaffected by this change, and the Bootstrap 5 variables now target Bootstrap 5.3 to take advantage of Bootstrap's dark mode and client-side theming via CSS variables. (#3914)
+* Default styles for `showNotification()` were tweaked slightly to improve accessibility, sizing, and padding. (#3913) 
 
 ## Bug fixes
 

inst/www/shared/shiny.min.css

@@ -13,7 +13,7 @@ $notification-bg-color:             #e8e8e8 !default;
 $notification-color:                #333 !default;
 $notification-border:               1px solid #ccc !default;
 $notification-border-radius:        3px !default;
-$notification-padding:              10px 8px 10px 10px !default;
+$notification-padding:              10px 2rem 10px 10px !default;
 $notification-message-bg:           #d9edf7 !default;
 $notification-message-color:        #31708f !default;
 $notification-message-border:       1px solid #bce8f1 !default;
@@ -390,18 +390,19 @@ html.autoreload-enabled #shiny-disconnected-overlay.reloading {
   right: 0;
   background-color: rgba(0,0,0,0);
   padding: 2px;
-  width: 250px;
+  width: 300px;
   z-index: 99999;
 }
 
 .shiny-notification {
+  position: relative;
   background-color: $notification-bg-color;
   color: $notification-color;
   border: $notification-border;
   @include border-radius-shim($notification-border-radius);
   opacity: 0.85;
   padding: $notification-padding;
-  margin: 2px;
+  margin: 5px;
   &-message {
     color: $notification-message-color;
     background-color: $notification-message-bg;
@@ -418,17 +419,23 @@ html.autoreload-enabled #shiny-disconnected-overlay.reloading {
     border: $notification-error-border;
   }
   &-close {
-    float: right;
-    font-weight: bold;
-    font-size: 18px;
-    bottom: 9px;
-    position: relative;
-    padding-left: 4px;
+    position: absolute;
+    width: 2rem;
+    height: 2rem;
+    top: 0;
+    right: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: normal;
+    font-size: 1.125em;
+    padding: 0.25rem;
     color: $notification-close-color;
-    cursor: default;
+    cursor: pointer;
   }
   &-close:hover {
     color: $notification-close-hover-color;
+    font-weight: bold;
   }
   &-content-action a {
     color: $notification-content-action-color;