style(ui): update notification style (#2265)

packages/ui/src/components/Notification/index.module.scss

@@ -4,20 +4,30 @@
   padding: _.unit(3) _.unit(4);
   font: var(--font-body-2);
   color: var(--color-type-primary);
-  background: var(--color-alert-99);
   margin: 0 auto _.unit(2);
   @include _.flex_row;
 
-  &:focus-visible {
+  .icon {
-    outline: none;
-  }
-}
-
-.icon {
-  color: var(--color-alert-70);
     width: 20px;
     height: 20px;
     margin-right: _.unit(3);
+  }
+
+  &.alert {
+    background: var(--color-alert-99);
+
+    .icon {
+      color: var(--color-alert-70);
+    }
+  }
+
+  &.info {
+    background: var(--color-neutral-variant-80);
+
+    .icon {
+      color: var(--color-neutral-variant-60);
+    }
+  }
 }
 
 .message {
@@ -26,8 +36,6 @@
 }
 
 .link {
-  text-decoration: underline;
-  cursor: pointer;
   max-width: 20%;
 }
 
@@ -35,10 +43,4 @@
   .notification {
     border-radius: var(--radius);
   }
-
-  .link {
-    &:hover {
-      color: var(--color-brand-default);
-    }
-  }
 }

packages/ui/src/components/Notification/index.tsx

@@ -1,38 +1,23 @@
 import classNames from 'classnames';
-import { useTranslation } from 'react-i18next';
 
 import InfoIcon from '@/assets/icons/info-icon.svg';
-import { onKeyDownHandler } from '@/utils/a11y';
 
+import TextLink from '../TextLink';
 import * as styles from './index.module.scss';
 
 type Props = {
   className?: string;
   message: string;
   onClose: () => void;
+  type?: 'info' | 'alert';
 };
 
-const Notification = ({ className, message, onClose }: Props) => {
+const Notification = ({ className, message, onClose, type = 'info' }: Props) => {
-  const { t } = useTranslation();
-
   return (
-    <div className={classNames(styles.notification, className)}>
+    <div className={classNames(styles.notification, styles[type], className)}>
       <InfoIcon className={styles.icon} />
       <div className={styles.message}>{message}</div>
-      {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
+      <TextLink text="action.got_it" className={styles.link} onClick={onClose} />
-      <a
-        role="button"
-        tabIndex={0}
-        className={styles.link}
-        onClick={onClose}
-        onKeyDown={onKeyDownHandler({
-          Esc: onClose,
-          Enter: onClose,
-          ' ': onClose,
-        })}
-      >
-        {t('action.got_it')}
-      </a>
     </div>
   );
 };

packages/ui/src/scss/_colors.scss

@@ -20,6 +20,7 @@
   --color-neutral-95: #eff1f1;
   --color-neutral-100: #fff;
 
+  --color-neutral-variant-60: #928f9a;
   --color-neutral-variant-80: #e5e1ec;
 
   --color-danger-30: #930006;
@@ -104,6 +105,7 @@
   --color-neutral-99: #191c1d;
   --color-neutral-100: #000;
 
+  --color-neutral-variant-60: #928f9a;
   --color-neutral-variant-80: #5f5d67;
   --color-neutral-variant-90: #47464e;