feat(ui): add Notification component (#994)

add Notification component

packages/phrases/src/locales/en.ts

@@ -43,6 +43,7 @@ const translation = {
       back: 'Go Back',
       nav_back: 'Back',
       agree: 'Agree',
+      got_it: 'Got it',
     },
     description: {
       email: 'email',
@@ -71,6 +72,7 @@ const translation = {
       social_create_account: 'No account? You can create a new account and bind.',
       social_bind_account: 'Already have an account? Sign in to bind it with your social identity.',
       social_bind_with_existing: 'We find a related account, you can bind it directly.',
+      demo_message: 'Use the Admin username and password to sign in this demo.',
     },
     error: {
       username_password_mismatch: 'Username and password do not match.',

packages/phrases/src/locales/zh-cn.ts

@@ -45,6 +45,7 @@ const translation = {
       back: '返回',
       nav_back: '返回',
       agree: '同意',
+      got_it: '知道了',
     },
     description: {
       email: '邮箱',
@@ -71,6 +72,7 @@ const translation = {
       social_create_account: 'No account? You can create a new account and bind.',
       social_bind_account: 'Already have an account? Sign in to bind it with your social identity.',
       social_bind_with_existing: 'We find a related account, you can bind it directly.',
+      demo_message: '请使用 admin 用户名和密码登录',
     },
     error: {
       username_password_mismatch: '用户名和密码不匹配。',

packages/ui/src/assets/icons/info-icon.svg

@@ -0,0 +1,14 @@
+  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M9.99984 1.66675C8.35166 1.66675 6.7405 2.15549 5.37009 3.07117C3.99968 3.98685 2.93158 5.28834 2.30084 6.81105C1.67011 8.33377 1.50509 10.0093 1.82663 11.6258C2.14817 13.2423 2.94185 14.7272 4.10728 15.8926C5.27272 17.0581 6.75758 17.8517 8.37409 18.1733C9.9906 18.4948 11.6662 18.3298 13.1889 17.6991C14.7116 17.0683 16.0131 16.0002 16.9288 14.6298C17.8444 13.2594 18.3332 11.6483 18.3332 10.0001C18.3332 8.90573 18.1176 7.8221 17.6988 6.81105C17.28 5.80001 16.6662 4.88135 15.8924 4.10752C15.1186 3.3337 14.1999 2.71987 13.1889 2.30109C12.1778 1.8823 11.0942 1.66675 9.99984 1.66675Z"
+      fill="currentColor"
+    />
+    <path
+      d="M9.41081 9.41066C9.56709 9.25438 9.77906 9.16658 10.0001 9.16658C10.2211 9.16658 10.433 9.25438 10.5893 9.41066C10.7456 9.56694 10.8334 9.7789 10.8334 9.99991V13.3332C10.8334 13.5543 10.7456 13.7662 10.5893 13.9225C10.433 14.0788 10.2211 14.1666 10.0001 14.1666C9.77906 14.1666 9.56709 14.0788 9.41081 13.9225C9.25453 13.7662 9.16674 13.5543 9.16674 13.3332V9.99991C9.16674 9.7789 9.25453 9.56694 9.41081 9.41066Z"
+      fill="white"
+    />
+    <path
+      d="M9.6834 5.89991C9.88629 5.81657 10.1139 5.81657 10.3167 5.89991C10.419 5.93958 10.5125 5.99905 10.5917 6.07491C10.744 6.23461 10.8303 6.44594 10.8334 6.66658C10.8327 6.80307 10.7985 6.9373 10.7338 7.05747C10.6691 7.17765 10.5759 7.28009 10.4623 7.3558C10.3488 7.43151 10.2183 7.47817 10.0825 7.49167C9.94671 7.50518 9.80965 7.48511 9.6834 7.43325C9.58242 7.39105 9.4894 7.33186 9.4084 7.25825C9.33117 7.18038 9.27006 7.08803 9.22859 6.9865C9.18712 6.88497 9.1661 6.77625 9.16674 6.66658C9.16392 6.55727 9.18675 6.44881 9.2334 6.34991C9.2756 6.24893 9.33479 6.15591 9.4084 6.07491C9.48766 5.99905 9.58111 5.93958 9.6834 5.89991Z"
+      fill="white"
+    />
+  </svg>

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

@@ -17,12 +17,11 @@
   --dark-pressed: #5d36ff;
 }
 
-.content {
-  @include _.flex_column;
-  background-color: var(--color-surface);
+body {
+  background-color: var(--color-base);
 }
 
-main {
+.container {
   position: absolute;
   inset: 0;
   background: var(--color-base);
@@ -31,8 +30,9 @@ main {
   @include _.flex_column;
 }
 
-body {
-  background-color: var(--color-base);
+.content {
+  @include _.flex_column;
+  background-color: var(--color-surface);
 }
 
 /* Foundation */
@@ -49,7 +49,7 @@ body {
   @include mobile.fonts;
   @include mobile.layout;
 
-  main {
+  .container {
     justify-content: normal;
   }
 

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

@@ -43,11 +43,11 @@ const AppContent = ({ children }: Props) => {
   }, [platform]);
 
   return (
-    <main>
-      <div className={styles.content}>{children}</div>
+    <div className={styles.container}>
+      <main className={styles.content}>{children}</main>
       <Toast message={toast} isVisible={Boolean(toast)} callback={hideToast} />
       {debouncedLoading && <LoadingLayer />}
-    </main>
+    </div>
   );
 };
 

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

@@ -0,0 +1,67 @@
+@use '@/scss/underscore' as _;
+
+.overlay {
+  background: transparent;
+  position: absolute;
+}
+
+.notification {
+  padding: _.unit(3) _.unit(4);
+  font: var(--font-body);
+  color: var(--color-text);
+  background: var(--color-surface-variant);
+  border: _.border(var(--color-border-variant));
+  border-radius: var(--radius);
+  max-width: 520px;
+  margin: 0 auto _.unit(2);
+  box-shadow: var(--shadow-1);
+
+  &:focus-visible {
+    outline: none;
+  }
+}
+
+.container {
+  @include _.flex_row;
+}
+
+.icon {
+  color: var(--color-outline);
+  width: 20px;
+  height: 20px;
+  margin-right: _.unit(3);
+}
+
+.message {
+  flex: 1;
+  margin-right: _.unit(3);
+}
+
+.link {
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+:global(body.mobile) {
+  .overlay {
+    top: _.unit(6);
+    left: _.unit(5);
+    right: _.unit(5);
+  }
+}
+
+
+:global(body.desktop) {
+  .overlay {
+    top: _.unit(-6);
+    left: 0;
+    width: 100%;
+    transform: translateY(-100%);
+  }
+
+  .link {
+    &:hover {
+      color: var(--color-primary);
+    }
+  }
+}

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

@@ -0,0 +1,38 @@
+import classNames from 'classnames';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import ReactModal, { Props as ModalProps } from 'react-modal';
+
+import InfoIcon from '@/assets/icons/info-icon.svg';
+
+import * as styles from './index.module.scss';
+
+type Props = ModalProps & {
+  message: string;
+  onClose: () => void;
+};
+
+const Notification = ({ className, message, onClose, overlayClassName, ...rest }: Props) => {
+  const { t } = useTranslation(undefined, { keyPrefix: 'main_flow' });
+
+  return (
+    <ReactModal
+      className={classNames(styles.notification, className)}
+      overlayClassName={classNames(styles.overlay, overlayClassName)}
+      ariaHideApp={false}
+      parentSelector={() => document.querySelector('main') ?? document.body}
+      onRequestClose={onClose}
+      {...rest}
+    >
+      <div className={styles.container}>
+        <InfoIcon className={styles.icon} />
+        <div className={styles.message}>{message}</div>
+        <a className={styles.link} onClick={onClose}>
+          {t('action.got_it')}
+        </a>
+      </div>
+    </ReactModal>
+  );
+};
+
+export default Notification;

packages/ui/src/containers/AppNotification/index.tsx

@@ -0,0 +1,21 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import Notification from '@/components/Notification';
+
+const AppNotification = () => {
+  const { t } = useTranslation(undefined, { keyPrefix: 'main_flow' });
+  const [isOpen, setIsOpen] = useState(false);
+
+  const onClose = useCallback(() => {
+    setIsOpen(false);
+  }, []);
+
+  useEffect(() => {
+    setIsOpen(true);
+  }, []);
+
+  return <Notification isOpen={isOpen} message={t('description.demo_message')} onClose={onClose} />;
+};
+
+export default AppNotification;

packages/ui/src/scss/_desktop.scss

@@ -12,9 +12,11 @@ $font-family: -apple-system,
 @mixin colors-light-theme {
   --color-base: linear-gradient(0deg, rgba(93, 52, 242, 14%), rgba(93, 52, 242, 14%)), linear-gradient(0deg, rgba(120, 118, 127, 2%), rgba(120, 118, 127, 2%)), #f7f8f8;
   --color-surface: #fff;
+  --color-surface-variant: #e5e1ec;
   --color-text: #191c1d; // Neutral-10
   --color-text-disabled: #c4c7c7;
   --color-border: #c4c7c7;
+  --color-border-variant: #c9c5d0;
   --color-caption: #747778;
   --color-icon: #747778;
   --color-focused: rgba(25, 28, 29, 16%); // 16% Neutral-10
@@ -39,9 +41,11 @@ $font-family: -apple-system,
 @mixin colors-dark-theme {
   --color-base: linear-gradient(0deg, rgba(202, 190, 255, 14%), rgba(202, 190, 255, 14%)), linear-gradient(0deg, rgba(196, 199, 199, 2%), rgba(196, 199, 199, 2%)), #191c1d;
   --color-surface: #191c1d;
+  --color-surface-variant: #47464e;
   --color-text: #f7f8f8; // Neutral-10
   --color-text-disabled: #5c5f60;
   --color-border: #5c5f60;
+  --color-border-variant: #5f5d67;
   --color-caption: #a9acac;
   --color-icon: #a9acac;
   --color-focused: rgba(247, 248, 248, 16%);  // 16% Neutral-10

packages/ui/src/scss/_mobile.scss

@@ -12,6 +12,7 @@ $font-family: -apple-system,
 @mixin colors-light-theme {
   --color-base: #fff;
   --color-surface: #fff;
+  --color-surface-variant: #e5e1ec;
   --color-text: #191c1d;
   --color-icon: #747778;
   --color-caption: #747778;
@@ -28,6 +29,7 @@ $font-family: -apple-system,
 @mixin colors-dark-theme {
   --color-base: #191c1d;
   --color-surface: #191c1d;
+  --color-surface-variant: #47464e;
   --color-text: #f7f8f8;
   --color-icon: #a9acac;
   --color-caption: #a9acac;