feat(notifications): Updated styling of the reminder notification (#2776)

Author: ishakasliwal

design-tokens/force-base-skin/background-color.yml

@@ -117,6 +117,12 @@ props:
   COLOR_BACKGROUND_NOTIFICATION_NEW:
     value: '{!PALETTE_GRAY_2}'
     comment: Background color for a new notification list item.
+  COLOR_BACKGROUND_REMINDER:
+    value: '{!LINK_WATER}'
+    comment: Background color for reminder notification
+  COLOR_BACKGROUND_REMINDER_HOVER:
+    value: '{!WHITE}'
+    comment: Background color for reminder notification on hover
   COLOR_BACKGROUND_ORG_SWITCHER_ARROW:
     value: '{!DEEP_COVE}'
     comment: Stage left org switcher dropdown arrow background color.

design-tokens/force-base-skin/border-color.yml

@@ -164,7 +164,7 @@ props:
     value: '{!WHITE}'
     comment: These borders create the faux checkmark when the checkbox toggle is in the checked state.
   COLOR_BORDER_REMINDER:
-    value: '{!CADET_BLUE}'
+    value: '{!PALETTE_GRAY_4}'
     comment: Border color on notification reminders.
   COLOR_STROKE_BRAND:
     value: '{!SCIENCE_BLUE}'

design-tokens/force-base-skin/box-shadow.yml

@@ -38,7 +38,7 @@ props:
     value: '{!OFFSET_NONE} {!OFFSET_X_SMALL}px {!OFFSET_SMALL}px {!OFFSET_NONE} {!BLACK_TRANSPARENT_16}'
     comment: Shadow for drop down.
   SHADOW_REMINDER:
-    value: '{!OFFSET_NONE} {!OFFSET_X_SMALL}px {!OFFSET_NONE} {!OFFSET_NONE} {!BLACK_TRANSPARENT_10}'
+    value: '{!OFFSET_NONE} {!OFFSET_X_SMALL}px {!OFFSET_SMALL}px {!OFFSET_NONE} {!BLACK_TRANSPARENT_20}'
     comment: Shadow for notifications that should be elevated above other components but under modals.
   SHADOW_HEADER:
     value: '{!OFFSET_NONE} {!OFFSET_X_SMALL}px {!OFFSET_MEDIUM}px {!BLACK_TRANSPARENT_07}'

design-tokens/force-base/background-color.yml

@@ -117,6 +117,12 @@ props:
   COLOR_BACKGROUND_NOTIFICATION_NEW:
     value: '{!PALETTE_COOL_GRAY_2}'
     comment: Background color for a new notification list item.
+  COLOR_BACKGROUND_REMINDER:
+    value: '{!LINK_WATER}'
+    comment: Background color for reminder notification
+  COLOR_BACKGROUND_REMINDER_HOVER:
+    value: '{!WHITE}'
+    comment: Background color for reminder notification on hover
   COLOR_BACKGROUND_ORG_SWITCHER_ARROW:
     value: '{!DEEP_COVE}'
     comment: Stage left org switcher dropdown arrow background color.

design-tokens/force-base/border-color.yml

@@ -164,7 +164,7 @@ props:
     value: '{!WHITE}'
     comment: These borders create the faux checkmark when the checkbox toggle is in the checked state.
   COLOR_BORDER_REMINDER:
-    value: '{!CADET_BLUE}'
+    value: '{!PALETTE_GRAY_4}'
     comment: Border color on notification reminders.
   COLOR_STROKE_BRAND:
     value: '{!SCIENCE_BLUE}'

design-tokens/force-base/box-shadow.yml

@@ -38,7 +38,7 @@ props:
     value: '{!OFFSET_NONE} {!OFFSET_X_SMALL}px {!OFFSET_SMALL}px {!OFFSET_NONE} {!BLACK_TRANSPARENT_16}'
     comment: Shadow for drop down.
   SHADOW_REMINDER:
-    value: '{!OFFSET_NONE} {!OFFSET_X_SMALL}px {!OFFSET_NONE} {!OFFSET_NONE} {!BLACK_TRANSPARENT_10}'
+    value: '{!OFFSET_NONE} {!OFFSET_X_SMALL}px {!OFFSET_SMALL}px {!OFFSET_NONE} {!BLACK_TRANSPARENT_20}'
     comment: Shadow for notifications that should be elevated above other components but under modals.
   SHADOW_HEADER:
     value: '{!OFFSET_NONE} {!OFFSET_X_SMALL}px {!OFFSET_MEDIUM}px {!BLACK_TRANSPARENT_07}'

ui/components/notifications/base/_index.scss

@@ -31,7 +31,7 @@
   box-shadow: $shadow-reminder;
 
   + .slds-notification {
-    margin-top: $spacing-small;
+    margin-top: $spacing-x-small;
   }
 
   &:nth-of-type(4) {
@@ -60,14 +60,14 @@
  * @restrict .slds-notification__body a
  */
 .slds-notification__target {
-  padding: $spacing-small $spacing-large $spacing-medium $spacing-small;
+  padding: $spacing-small;
   border-radius: $border-radius-medium;
-  background-color: $color-background-alt;
+  background-color: $color-background-reminder;
   color: $color-text-default;
 
   &:hover,
   &:focus {
-    background-color: $color-background;
+    background-color: $color-background-reminder-hover;
     text-decoration: none;
   }
 }