From fc91beb0dc8429787dd445b1200a6978990fc039 Mon Sep 17 00:00:00 2001
From: simeng-li <simeng@silverhand.io>
Date: Thu, 10 Nov 2022 10:27:39 +0800
Subject: [PATCH] style(ui): update notification style

update notifiction style
---
 .../ui/src/components/Notification/index.module.scss  | 11 ++++++++++-
 packages/ui/src/components/Toast/index.module.scss    |  2 +-
 .../ui/src/containers/AppContent/index.module.scss    |  2 +-
 packages/ui/src/scss/_colors.scss                     |  6 ++++--
 4 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/packages/ui/src/components/Notification/index.module.scss b/packages/ui/src/components/Notification/index.module.scss
index d3a430ddd..706464121 100644
--- a/packages/ui/src/components/Notification/index.module.scss
+++ b/packages/ui/src/components/Notification/index.module.scss
@@ -22,7 +22,7 @@
   }
 
   &.info {
-    background: var(--color-neutral-variant-80);
+    background: var(--color-neutral-variant-90);
 
     .icon {
       color: var(--color-neutral-variant-60);
@@ -42,5 +42,14 @@
 :global(body.desktop) {
   .notification {
     border-radius: var(--radius);
+    box-shadow: var(--color-shadow-1);
+
+    &.alert {
+      border: _.border(var(--color-alert-70));
+    }
+
+    &.info {
+      border: _.border(var(--color-neutral-variant-80));
+    }
   }
 }
diff --git a/packages/ui/src/components/Toast/index.module.scss b/packages/ui/src/components/Toast/index.module.scss
index 39e7c4bec..f7b54f51e 100644
--- a/packages/ui/src/components/Toast/index.module.scss
+++ b/packages/ui/src/components/Toast/index.module.scss
@@ -44,6 +44,6 @@
 :global(body.desktop) {
   .toast {
     padding: _.unit(3) _.unit(4);
-    box-shadow: var(--color-shadow);
+    box-shadow: var(--color-shadow-2);
   }
 }
diff --git a/packages/ui/src/containers/AppContent/index.module.scss b/packages/ui/src/containers/AppContent/index.module.scss
index 1c71cdc8e..ab34a0195 100644
--- a/packages/ui/src/containers/AppContent/index.module.scss
+++ b/packages/ui/src/containers/AppContent/index.module.scss
@@ -83,6 +83,6 @@ body {
     padding: _.unit(6);
     border-radius: 16px;
     background: var(--color-bg-float);
-    box-shadow: var(--color-shadow);
+    box-shadow: var(--color-shadow-2);
   }
 }
diff --git a/packages/ui/src/scss/_colors.scss b/packages/ui/src/scss/_colors.scss
index a0064313e..779e7e342 100644
--- a/packages/ui/src/scss/_colors.scss
+++ b/packages/ui/src/scss/_colors.scss
@@ -6,7 +6,8 @@
   --color-static-white: #fff;
   --color-static-black: #000;
   --color-static-dark-type-primary: #f7f8f8; // For loading icon use
-  --color-shadow: 0 4px 8px rgba(0, 0, 0, 2%);
+  --color-shadow-1: 0 4px 8px rgba(0, 0, 0, 8%);
+  --color-shadow-2: 0 4px 8px rgba(0, 0, 0, 2%);
 }
 
 @mixin light {
@@ -21,7 +22,8 @@
   --color-neutral-100: #fff;
 
   --color-neutral-variant-60: #928f9a;
-  --color-neutral-variant-80: #e5e1ec;
+  --color-neutral-variant-80: #c9c5d0;
+  --color-neutral-variant-90: #e5e1ec;
 
   --color-danger-30: #930006;
   --color-danger-40: #ba1b1b;