fix(notifications): update styling to add bordercolor and darker drop shadow

Author: Isha Kasliwal

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

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

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_X_SMALL}px {!OFFSET_X_SMALL}px {!BLACK_TRANSPARENT_16}'
+    value: '{!OFFSET_NONE} {!OFFSET_X_SMALL}px {!OFFSET_NONE} {!OFFSET_NONE} {!BLACK_TRANSPARENT_10}'
     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

@@ -26,6 +26,7 @@
 .slds-notification {
   position: relative;
   width: $size-medium; // this is 320, not 300px
+  border: 1px solid $color-border-reminder;
   border-radius: $border-radius-medium;
   box-shadow: $shadow-reminder;
 
@@ -92,4 +93,3 @@
   top: 0;
   right: 0;
 }
-