From 8530e249aa6d63efe594a08f800be4bfb43ed77e Mon Sep 17 00:00:00 2001 From: simeng-li Date: Tue, 31 May 2022 11:02:03 +0800 Subject: [PATCH] feat(ui): add Notification component (#994) add Notification component --- packages/phrases/src/locales/en.ts | 2 + packages/phrases/src/locales/zh-cn.ts | 2 + packages/ui/src/assets/icons/info-icon.svg | 14 ++++ .../components/AppContent/index.module.scss | 14 ++-- .../ui/src/components/AppContent/index.tsx | 6 +- .../components/Notification/index.module.scss | 67 +++++++++++++++++++ .../ui/src/components/Notification/index.tsx | 38 +++++++++++ .../src/containers/AppNotification/index.tsx | 21 ++++++ packages/ui/src/scss/_desktop.scss | 4 ++ packages/ui/src/scss/_mobile.scss | 2 + 10 files changed, 160 insertions(+), 10 deletions(-) create mode 100644 packages/ui/src/assets/icons/info-icon.svg create mode 100644 packages/ui/src/components/Notification/index.module.scss create mode 100644 packages/ui/src/components/Notification/index.tsx create mode 100644 packages/ui/src/containers/AppNotification/index.tsx diff --git a/packages/phrases/src/locales/en.ts b/packages/phrases/src/locales/en.ts index 4f3f14099..a8ddec414 100644 --- a/packages/phrases/src/locales/en.ts +++ b/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.', diff --git a/packages/phrases/src/locales/zh-cn.ts b/packages/phrases/src/locales/zh-cn.ts index 008d27697..cba6b765b 100644 --- a/packages/phrases/src/locales/zh-cn.ts +++ b/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: '用户名和密码不匹配。', diff --git a/packages/ui/src/assets/icons/info-icon.svg b/packages/ui/src/assets/icons/info-icon.svg new file mode 100644 index 000000000..aae38b6e7 --- /dev/null +++ b/packages/ui/src/assets/icons/info-icon.svg @@ -0,0 +1,14 @@ + + + + + diff --git a/packages/ui/src/components/AppContent/index.module.scss b/packages/ui/src/components/AppContent/index.module.scss index aaaf088c7..55c46dce6 100644 --- a/packages/ui/src/components/AppContent/index.module.scss +++ b/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; } diff --git a/packages/ui/src/components/AppContent/index.tsx b/packages/ui/src/components/AppContent/index.tsx index 3f123c8ed..adb53e33a 100644 --- a/packages/ui/src/components/AppContent/index.tsx +++ b/packages/ui/src/components/AppContent/index.tsx @@ -43,11 +43,11 @@ const AppContent = ({ children }: Props) => { }, [platform]); return ( -
-
{children}
+
+
{children}
{debouncedLoading && } -
+ ); }; diff --git a/packages/ui/src/components/Notification/index.module.scss b/packages/ui/src/components/Notification/index.module.scss new file mode 100644 index 000000000..236b39044 --- /dev/null +++ b/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); + } + } +} diff --git a/packages/ui/src/components/Notification/index.tsx b/packages/ui/src/components/Notification/index.tsx new file mode 100644 index 000000000..2806b3c10 --- /dev/null +++ b/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 ( + document.querySelector('main') ?? document.body} + onRequestClose={onClose} + {...rest} + > +
+ +
{message}
+ + {t('action.got_it')} + +
+ + ); +}; + +export default Notification; diff --git a/packages/ui/src/containers/AppNotification/index.tsx b/packages/ui/src/containers/AppNotification/index.tsx new file mode 100644 index 000000000..6226cc333 --- /dev/null +++ b/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 ; +}; + +export default AppNotification; diff --git a/packages/ui/src/scss/_desktop.scss b/packages/ui/src/scss/_desktop.scss index 464433c3d..9589dd502 100644 --- a/packages/ui/src/scss/_desktop.scss +++ b/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 diff --git a/packages/ui/src/scss/_mobile.scss b/packages/ui/src/scss/_mobile.scss index bbb6c8056..102756cdb 100644 --- a/packages/ui/src/scss/_mobile.scss +++ b/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;