From 190b281b49863564fd53e35c595c86836d42b796 Mon Sep 17 00:00:00 2001 From: Xiao Yijun Date: Wed, 8 Mar 2023 11:42:54 +0800 Subject: [PATCH] feat(console): cloud preview broadcast (#3314) --- .../components/Broadcast/index.module.scss | 19 +++++++++++++++++ .../src/cloud/components/Broadcast/index.tsx | 21 +++++++++++++++++++ packages/console/src/cloud/constants/index.ts | 2 ++ .../src/containers/AppContent/index.tsx | 12 +++++++---- .../de/translation/admin-console/cloud.ts | 1 + .../en/translation/admin-console/cloud.ts | 1 + .../fr/translation/admin-console/cloud.ts | 1 + .../ko/translation/admin-console/cloud.ts | 1 + .../pt-br/translation/admin-console/cloud.ts | 1 + .../pt-pt/translation/admin-console/cloud.ts | 1 + .../tr-tr/translation/admin-console/cloud.ts | 1 + .../zh-cn/translation/admin-console/cloud.ts | 1 + 12 files changed, 58 insertions(+), 4 deletions(-) create mode 100644 packages/console/src/cloud/components/Broadcast/index.module.scss create mode 100644 packages/console/src/cloud/components/Broadcast/index.tsx diff --git a/packages/console/src/cloud/components/Broadcast/index.module.scss b/packages/console/src/cloud/components/Broadcast/index.module.scss new file mode 100644 index 000000000..384f9c7ce --- /dev/null +++ b/packages/console/src/cloud/components/Broadcast/index.module.scss @@ -0,0 +1,19 @@ +@use '@/scss/underscore' as _; + +.broadcast { + background-color: var(--color-layer-1); + position: absolute; + top: _.unit(4); + left: 50%; + font: var(--font-label-2); + border-radius: 18px; + padding: _.unit(2) _.unit(5); + box-shadow: var(--shadow-2); + user-select: none; + text-align: center; + transform: translateX(-50%); + + .link { + margin-left: _.unit(3); + } +} diff --git a/packages/console/src/cloud/components/Broadcast/index.tsx b/packages/console/src/cloud/components/Broadcast/index.tsx new file mode 100644 index 000000000..aad3c2288 --- /dev/null +++ b/packages/console/src/cloud/components/Broadcast/index.tsx @@ -0,0 +1,21 @@ +import { useTranslation } from 'react-i18next'; + +import { logtoBlogLink } from '@/cloud/constants'; +import TextLink from '@/components/TextLink'; + +import * as styles from './index.module.scss'; + +const Broadcast = () => { + const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' }); + + return ( +
+ {t('cloud.broadcast')} + + {t('general.learn_more')} + +
+ ); +}; + +export default Broadcast; diff --git a/packages/console/src/cloud/constants/index.ts b/packages/console/src/cloud/constants/index.ts index 2ef6e4438..ba9c2c5d6 100644 --- a/packages/console/src/cloud/constants/index.ts +++ b/packages/console/src/cloud/constants/index.ts @@ -4,6 +4,8 @@ import type { OnboardingSieConfig } from '../types'; import { Authentication } from '../types'; export const reservationLink = 'https://calendly.com/logto/30min'; +export const logtoBlogLink = + 'https://www.notion.so/silverhand/About-Logto-Cloud-Preview-ca316bc05f2a4b9188047da014124434?pvs=4'; export const defaultOnboardingSieConfig: OnboardingSieConfig = { color: '#5D34F2', diff --git a/packages/console/src/containers/AppContent/index.tsx b/packages/console/src/containers/AppContent/index.tsx index cb67a5b72..b6fe6a2cc 100644 --- a/packages/console/src/containers/AppContent/index.tsx +++ b/packages/console/src/containers/AppContent/index.tsx @@ -4,6 +4,7 @@ import { useEffect, useRef } from 'react'; import { useTranslation } from 'react-i18next'; import { Outlet, useHref, useLocation, useNavigate } from 'react-router-dom'; +import Broadcast from '@/cloud/components/Broadcast'; import useUserOnboardingData from '@/cloud/hooks/use-user-onboarding-data'; import { OnboardingPage } from '@/cloud/types'; import { getOnboardPagePathname } from '@/cloud/utils'; @@ -78,10 +79,13 @@ const AppContent = () => { } return ( -
- - -
+ <> +
+ + +
+ {isCloud && } + ); }; diff --git a/packages/phrases/src/locales/de/translation/admin-console/cloud.ts b/packages/phrases/src/locales/de/translation/admin-console/cloud.ts index d3e1ffc44..72c66dfa5 100644 --- a/packages/phrases/src/locales/de/translation/admin-console/cloud.ts +++ b/packages/phrases/src/locales/de/translation/admin-console/cloud.ts @@ -95,6 +95,7 @@ const cloud = { web_tab: 'Web', // UNTRANSLATED }, }, + broadcast: '📣 You are participating in Logto Cloud Preview', // UNTRANSLATED }; export default cloud; diff --git a/packages/phrases/src/locales/en/translation/admin-console/cloud.ts b/packages/phrases/src/locales/en/translation/admin-console/cloud.ts index 9fda7b50b..12e50139b 100644 --- a/packages/phrases/src/locales/en/translation/admin-console/cloud.ts +++ b/packages/phrases/src/locales/en/translation/admin-console/cloud.ts @@ -95,6 +95,7 @@ const cloud = { web_tab: 'Web', }, }, + broadcast: '📣 You are participating in Logto Cloud Preview', }; export default cloud; diff --git a/packages/phrases/src/locales/fr/translation/admin-console/cloud.ts b/packages/phrases/src/locales/fr/translation/admin-console/cloud.ts index d3e1ffc44..72c66dfa5 100644 --- a/packages/phrases/src/locales/fr/translation/admin-console/cloud.ts +++ b/packages/phrases/src/locales/fr/translation/admin-console/cloud.ts @@ -95,6 +95,7 @@ const cloud = { web_tab: 'Web', // UNTRANSLATED }, }, + broadcast: '📣 You are participating in Logto Cloud Preview', // UNTRANSLATED }; export default cloud; diff --git a/packages/phrases/src/locales/ko/translation/admin-console/cloud.ts b/packages/phrases/src/locales/ko/translation/admin-console/cloud.ts index d3e1ffc44..72c66dfa5 100644 --- a/packages/phrases/src/locales/ko/translation/admin-console/cloud.ts +++ b/packages/phrases/src/locales/ko/translation/admin-console/cloud.ts @@ -95,6 +95,7 @@ const cloud = { web_tab: 'Web', // UNTRANSLATED }, }, + broadcast: '📣 You are participating in Logto Cloud Preview', // UNTRANSLATED }; export default cloud; diff --git a/packages/phrases/src/locales/pt-br/translation/admin-console/cloud.ts b/packages/phrases/src/locales/pt-br/translation/admin-console/cloud.ts index d3e1ffc44..72c66dfa5 100644 --- a/packages/phrases/src/locales/pt-br/translation/admin-console/cloud.ts +++ b/packages/phrases/src/locales/pt-br/translation/admin-console/cloud.ts @@ -95,6 +95,7 @@ const cloud = { web_tab: 'Web', // UNTRANSLATED }, }, + broadcast: '📣 You are participating in Logto Cloud Preview', // UNTRANSLATED }; export default cloud; diff --git a/packages/phrases/src/locales/pt-pt/translation/admin-console/cloud.ts b/packages/phrases/src/locales/pt-pt/translation/admin-console/cloud.ts index d3e1ffc44..72c66dfa5 100644 --- a/packages/phrases/src/locales/pt-pt/translation/admin-console/cloud.ts +++ b/packages/phrases/src/locales/pt-pt/translation/admin-console/cloud.ts @@ -95,6 +95,7 @@ const cloud = { web_tab: 'Web', // UNTRANSLATED }, }, + broadcast: '📣 You are participating in Logto Cloud Preview', // UNTRANSLATED }; export default cloud; diff --git a/packages/phrases/src/locales/tr-tr/translation/admin-console/cloud.ts b/packages/phrases/src/locales/tr-tr/translation/admin-console/cloud.ts index d3e1ffc44..72c66dfa5 100644 --- a/packages/phrases/src/locales/tr-tr/translation/admin-console/cloud.ts +++ b/packages/phrases/src/locales/tr-tr/translation/admin-console/cloud.ts @@ -95,6 +95,7 @@ const cloud = { web_tab: 'Web', // UNTRANSLATED }, }, + broadcast: '📣 You are participating in Logto Cloud Preview', // UNTRANSLATED }; export default cloud; diff --git a/packages/phrases/src/locales/zh-cn/translation/admin-console/cloud.ts b/packages/phrases/src/locales/zh-cn/translation/admin-console/cloud.ts index d3e1ffc44..72c66dfa5 100644 --- a/packages/phrases/src/locales/zh-cn/translation/admin-console/cloud.ts +++ b/packages/phrases/src/locales/zh-cn/translation/admin-console/cloud.ts @@ -95,6 +95,7 @@ const cloud = { web_tab: 'Web', // UNTRANSLATED }, }, + broadcast: '📣 You are participating in Logto Cloud Preview', // UNTRANSLATED }; export default cloud;