commit 5e930c0aeb5b66df2c357be4d5c33d4828c2783f
author Yoshie Muranaka <yoshiemuranaka@gmail.com> Wed Oct 16 08:13:53 2019 -0700
committer Yoshie Muranaka <yoshiemuranaka@gmail.com> Tue Oct 22 09:45:35 2019 -0700
tree 56fe47b702eab9ab6cbd9c6b6acc8d9c56fc2e86
parent d11b9277aea0baeafa4488084d27cfef0e607480

Update toast notification

Added new toast notification types, warn and info,
and updated visual styling. All toasts will need
to be manually closed by clicking the 'X' close icon,
except a success toast which will be dismissed
automatically after 10 secs.

- Small updates to critical and success/on icon
- Added new colors for toast status background colors

Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: I9077109042621b2d3346b4121d6344da502b6b26

app/common/styles/base/colors.scss

diff --git a/app/common/styles/base/colors.scss b/app/common/styles/base/colors.scss
index a31c603..c034a7c 100644
--- a/app/common/styles/base/colors.scss
+++ b/app/common/styles/base/colors.scss
@@ -4,6 +4,7 @@
 $color--blue-40: #2D60E5;
 $color--blue-30: #7295F1;
 $color--blue-20: #CCD7F4;
+$color--blue-10: #EFF2FB;
 
 $color--grey-100: #333333;
 $color--grey-80: #666666;
@@ -21,13 +22,16 @@
 
 $color--green-50: #0A7D06;
 $color--green-20: #C6E8C5;
+$color--green-10: #ECFDF1;
 
 $color--yellow-70: #DB7C00;
 $color--yellow-50: #FEDF39;
 $color--yellow-20: #FFF8E4;
+$color--yellow-10: #FFF8E4;
 
 $color--red-50: #DA1416;
 $color--red-20: #FAD3D3;
+$color--red-10: #FCE9E9;
 
 // Color mapping
 $base-01--01: $color--blue-100;
@@ -85,3 +89,13 @@
 $status-error: $accent-04--01;
 $status-ok: $accent-02--01;
 $status-warn: $accent-03--01;
+
+$notification-info--dark: $color--blue-40;
+$notification-info--light: $color--blue-10;
+$notification-success--dark: $color--green-50;
+$notification-success--light: $color--green-10;
+$notification-warn--dark: $color--yellow-50;
+$notification-warn--light: $color--yellow-10;
+$notification-error--dark: $color--red-50;
+$notification-error--light: $color--red-10;
+

app/common/styles/elements/toast.scss

diff --git a/app/common/styles/elements/toast.scss b/app/common/styles/elements/toast.scss
index e9b1980..a46ce66 100644
--- a/app/common/styles/elements/toast.scss
+++ b/app/common/styles/elements/toast.scss
@@ -1,18 +1,55 @@
 // Overrides style for ngToast notifications
 .ng-toast {
-  margin-top: 9em;
+  margin-top: 9rem;
   .close {
-    margin: .3em;
-  }
-  .title {
-    font-weight: bold;
-  }
-  .ng-toast__message {
-    max-width: 400px;
+    color: $text-01;
+    opacity: 1;
+    font-size: 1.2rem;
+    font-weight: 400;
   }
   .alert {
-    color: $text-01;
+    border: none; //override inherited border styles
     border-radius: 0;
+    border-left-width: 3px;
+    border-left-style: solid;
     text-align: left;
+    color: $text-01;
+    padding-left: 1rem;
+    width: 350px;
+  }
+  .alert-content-container {
+    display: flex;
+    flex-direction: row;
+  }
+  .alert-content__header {
+    font-size: 1rem;
+    font-weight: bold;
+    margin-bottom: 0;
+    line-height:1.5;
+  }
+  .alert-content__body {
+    margin:0;
+    line-height: 1.2;
+  }
+  .alert-danger {
+    background-color: $notification-error--light;
+    border-left-color: $notification-error--dark;
+  }
+  .alert-success {
+    background-color: $notification-success--light;
+    border-left-color: $notification-success--dark;
+  }
+  .alert-warning {
+    background-color: $notification-warn--light;
+    border-left-color: $notification-warn--dark;
+  }
+  .alert-info {
+    background-color: $notification-info--light;
+    border-left-color: $notification-info--dark;
+  }
+  .status-icon {
+    display: inline-block;
+    vertical-align: top;
+    margin-right: 0.8rem;
   }
 }