Merge pull request #878 from logto-io/charles-log-2553-improve-dark-theme-styles-for-toast

refactor(console): improve dark theme styles for toast

packages/console/src/assets/images/toast-error.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.7325 3.16479L11.7325 3.16479L11.7339 3.16711L18.476 14.8203C18.6263 15.1231 18.7292 15.4167 18.6734 15.7512L18.6666 15.792V15.8334C18.6666 16.9015 17.7964 17.8334 16.6666 17.8334H3.24997C2.90568 17.8334 2.58189 17.7661 2.25722 17.5713L2.25728 17.5712L2.24804 17.5659C1.32611 17.0391 0.985381 15.764 1.51679 14.8326C1.517 14.8322 1.51721 14.8318 1.51742 14.8315L8.26609 3.16711L8.27371 3.15394L8.28052 3.14032C8.39304 2.91528 8.64556 2.6468 9.0026 2.43158C9.93374 1.90297 11.2063 2.24399 11.7325 3.16479ZM8.66664 14.1667C8.66664 14.5303 8.79003 14.8722 9.04225 15.1244C9.29447 15.3767 9.63635 15.5 9.99997 15.5C10.3636 15.5 10.7055 15.3767 10.9577 15.1244C11.2099 14.8722 11.3333 14.5303 11.3333 14.1667C11.3333 13.8031 11.2099 13.4612 10.9577 13.209C10.7055 12.9568 10.3636 12.8334 9.99997 12.8334C9.63635 12.8334 9.29447 12.9568 9.04225 13.209C8.79003 13.4612 8.66664 13.8031 8.66664 14.1667ZM9.99997 12.1667C10.3636 12.1667 10.7055 12.0433 10.9577 11.7911C11.2099 11.5389 11.3333 11.197 11.3333 10.8334V7.50005C11.3333 7.13643 11.2099 6.79455 10.9577 6.54233C10.7055 6.29011 10.3636 6.16672 9.99997 6.16672C9.63635 6.16672 9.29447 6.29011 9.04225 6.54233C8.79003 6.79455 8.66664 7.13643 8.66664 7.50005V10.8334C8.66664 11.197 8.79003 11.5389 9.04225 11.7911C9.29447 12.0433 9.63635 12.1667 9.99997 12.1667Z" fill="#DD3730" stroke="#DD3730"/>
+</svg>

packages/console/src/assets/images/toast-success.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.16675 10.0001C2.16675 5.69289 5.69289 2.16675 10.0001 2.16675C14.3073 2.16675 17.8334 5.69289 17.8334 10.0001C17.8334 14.3073 14.3073 17.8334 10.0001 17.8334C5.69289 17.8334 2.16675 14.3073 2.16675 10.0001ZM9.85363 12.937L13.8536 8.93697C14.3822 8.40837 14.3822 7.59179 13.8536 7.06319C13.325 6.5346 12.5085 6.5346 11.9799 7.06319L8.91675 10.1263L8.0203 9.22986C7.49171 8.70127 6.67512 8.70127 6.14653 9.22986C5.61793 9.75846 5.61793 10.575 6.14653 11.1036L7.97986 12.937C8.50846 13.4656 9.32504 13.4656 9.85363 12.937Z" fill="#32873D" stroke="#32873D"/>
+</svg>

packages/console/src/components/Toast/index.module.scss

@@ -1,19 +1,35 @@
 @use '@/scss/underscore' as _;
 
 div.toast {
+  display: flex;
+  align-items: center;
   padding: _.unit(3) _.unit(4);
   font: var(--font-body-medium);
   color: var(--color-text);
   box-shadow: var(--shadow-1);
   border-radius: _.unit(2);
-  max-width: none;
+  max-width: 412px;
 
-  > div[role='status'] {
-    margin: 0 0 0 _.unit(3);
+  .image {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 20px;
+    height: 20px;
+  }
+
+  .message {
+    flex: 1;
+    margin: 0 _.unit(3);
   }
 
   &.success {
-    border: 1px solid #66bb6a;
-    background: linear-gradient(0deg, rgba(102, 187, 106, 15%), rgba(102, 187, 106, 15%)), #fff;
+    border: 1px solid var(--color-success-70);
+    background-color: var(--color-success-99);
+  }
+
+  &.error {
+    border: 1px solid var(--color-error);
+    background-color: var(--color-danger-toast-background);
   }
 }

packages/console/src/components/Toast/index.tsx

@@ -1,7 +1,12 @@
 import classNames from 'classnames';
 import React from 'react';
-import { Toaster } from 'react-hot-toast';
+import { Toaster, resolveValue, toast } from 'react-hot-toast';
 
+import errorIcon from '@/assets/images/toast-error.svg';
+import successIcon from '@/assets/images/toast-success.svg';
+import Close from '@/icons/Close';
+
+import IconButton from '../IconButton';
 import * as styles from './index.module.scss';
 
 const Toast = () => {
@@ -9,9 +14,32 @@ const Toast = () => {
     <Toaster
       toastOptions={{
         className: styles.toast,
-        success: { className: classNames(styles.toast, styles.success) },
+        success: {
+          className: classNames(styles.toast, styles.success),
+          icon: <img src={successIcon} />,
+        },
+        error: {
+          className: classNames(styles.toast, styles.error),
+          icon: <img src={errorIcon} />,
+        },
       }}
-    />
+    >
+      {(toastInstance) => (
+        <div className={toastInstance.className}>
+          <div className={styles.image}>{toastInstance.icon}</div>
+          <span className={styles.message}>
+            {resolveValue(toastInstance.message, toastInstance)}
+          </span>
+          <IconButton
+            onClick={() => {
+              toast.remove();
+            }}
+          >
+            <Close />
+          </IconButton>
+        </div>
+      )}
+    </Toaster>
   );
 };
 

packages/console/src/scss/_colors.scss

@@ -153,6 +153,7 @@
   --shadow-3: 0 4px 16px rgba(0, 0, 0, 20%);
 
   // Client specific variables (not available in design system)
+  --color-danger-toast-background: var(--color-error-95);
   --color-danger-focused: rgba(186, 27, 27, 16%); // 16% Error-40
   --color-tooltip-background: #34353f; // dark theme Surface-4
   --color-tooltip-text: var(--color-neutral-99);
@@ -315,6 +316,7 @@
   --shadow-3: 0 4px 16px rgba(0, 0, 0, 20%);
 
   // Client specific variables (not available in design system)
+  --color-danger-toast-background: var(--color-error-99);
   --color-danger-focused: rgba(255, 180, 169, 16%); // 16% Error-40
   --color-tooltip-background: var(--color-surface-4);
   --color-tooltip-text: var(--color-neutral-10);