Merge pull request #573 from Stremio/feat-toast-design

feature: toasts new design
Stremio · Jan 30, 2024 · 3fb210f · 3fb210f
2 parents 244fb8b + a4fb719
commit 3fb210f
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 26 deletions.
diff --git a/src/common/Toast/ToastItem/ToastItem.js b/src/common/Toast/ToastItem/ToastItem.js
@@ -17,7 +17,7 @@ const ToastItem = ({ title, message, dataset, onSelect, onClose, ...props }) =>
     const icon = React.useMemo(() => {
         return typeof props.icon === 'string' ? props.icon :
             type === 'success' ? 'checkmark' :
-                type === 'error' ? 'warning' :
+                type === 'error' ? 'close' :
                     null;
     }, [type, props.icon]);
     const toastOnClick = React.useCallback((event) => {

diff --git a/src/common/Toast/ToastItem/styles.less b/src/common/Toast/ToastItem/styles.less
@@ -5,55 +5,53 @@
 .toast-item-container {
     display: flex;
     flex-direction: row;
+    align-items: flex-start;
     width: 25rem;
     margin-bottom: 1rem;
-    background-color: @color-surface-light4;
     overflow: visible;
-    box-shadow: 0 0.3rem 0.5rem @color-background-dark5-40,
-        0 0.6rem 1rem @color-background-dark5-20;
+    box-shadow: var(--outer-glow);
+    background-color: var(--modal-background-color);
     pointer-events: auto;
-
+    border-radius: var(--border-radius);
+    border: 0.4px solid var(--primary-accent-color);
+    backdrop-filter: blur(10px);
+    padding: 1rem;
     &.success {
         .icon-container {
-            background-color: @color-accent3;
-
             .icon {
-                color: @color-surface-light5-90;
+                color: @color-accent3;
             }
         }
     }
 
     &.error {
         .icon-container {
-            background-color: @color-accent2;
-
             .icon {
-                color: @color-surface-light5-90;
+                color: var(--color-trakt);
             }
         }
     }
 
     .icon-container {
-        flex: none;
-        align-self: stretch;
-        width: 2.5rem;
-        padding: 0.5rem;
+        border-radius: 3px;
+        background-color: var(--overlay-color);
 
         .icon {
             display: block;
             width: 100%;
             height: 100%;
-            color: @color-background-dark5-90;
+            max-width: 2rem;
         }
     }
 
     .info-container {
         flex: 1;
         align-self: stretch;
-        padding: 1rem;
+        padding: 0.2rem 1rem;
 
         .title-container {
             font-size: 1.2rem;
+            color: var(--primary-foreground-color);
 
             &:not(:last-child) {
                 margin-bottom: 0.2rem;
@@ -62,25 +60,28 @@
 
         .message-container {
             font-size: 1.1rem;
+            color: var(--primary-foreground-color);
+            opacity: 0.8;
         }
     }
 
     .close-button-container {
-        flex: none;
-        align-self: flex-start;
         width: 2rem;
         height: 2rem;
-        margin: 0.2rem;
-        padding: 0.5rem;
-
-        &:hover {
-            background-color: @color-surface-light2;
-        }
-
+        border-radius: 3px;
+
         .icon {
             display: block;
             width: 100%;
             height: 100%;
+            color: var(--primary-foreground-color);
+            opacity: 0.4;
+        }
+
+        &:hover {
+            .icon {
+                opacity: 1;
+            }
         }
     }
 }