From 071bbfae24507d61cc44ae602bb2b40f5d2344dc Mon Sep 17 00:00:00 2001 From: Xiao Yijun Date: Thu, 8 Jun 2023 15:13:16 +0800 Subject: [PATCH] refactor(console): improve the original `Alert` component (#4003) --- .../docs/tutorial/integrate-sdk/android.mdx | 4 +- .../tutorial/integrate-sdk/android_zh-cn.mdx | 6 +-- .../docs/tutorial/integrate-sdk/express.mdx | 6 +-- .../tutorial/integrate-sdk/express_zh-cn.mdx | 6 +-- .../assets/docs/tutorial/integrate-sdk/go.mdx | 10 ++-- .../docs/tutorial/integrate-sdk/go_zh-cn.mdx | 10 ++-- .../docs/tutorial/integrate-sdk/ios.mdx | 6 +-- .../docs/tutorial/integrate-sdk/ios_zh-cn.mdx | 6 +-- .../docs/tutorial/integrate-sdk/next.mdx | 6 +-- .../tutorial/integrate-sdk/next_zh-cn.mdx | 6 +-- .../docs/tutorial/integrate-sdk/react.mdx | 6 +-- .../tutorial/integrate-sdk/react_zh-cn.mdx | 6 +-- .../docs/tutorial/integrate-sdk/vanilla.mdx | 6 +-- .../tutorial/integrate-sdk/vanilla_zh-cn.mdx | 6 +-- .../docs/tutorial/integrate-sdk/vue.mdx | 10 ++-- .../docs/tutorial/integrate-sdk/vue_zh-cn.mdx | 10 ++-- .../src/components/Alert/index.module.scss | 34 ------------- .../InlineNotification/index.module.scss | 49 +++++++++++++++++++ .../{Alert => InlineNotification}/index.tsx | 21 ++++++-- .../DemoConnectorNotice/index.module.scss | 2 +- .../components/DemoConnectorNotice/index.tsx | 8 ++- .../index.module.scss | 6 +-- .../SignInExperienceSetupNotice/index.tsx | 30 ++++++------ .../components/Welcome/GuideModal.module.scss | 2 +- .../components/Welcome/GuideModal.tsx | 15 +++--- .../ConnectorSetupWarning/index.module.scss | 5 ++ .../index.tsx} | 8 +-- 27 files changed, 163 insertions(+), 127 deletions(-) delete mode 100644 packages/console/src/components/Alert/index.module.scss create mode 100644 packages/console/src/components/InlineNotification/index.module.scss rename packages/console/src/components/{Alert => InlineNotification}/index.tsx (65%) create mode 100644 packages/console/src/pages/SignInExperience/tabs/SignUpAndSignIn/components/ConnectorSetupWarning/index.module.scss rename packages/console/src/pages/SignInExperience/tabs/SignUpAndSignIn/components/{ConnectorSetupWarning.tsx => ConnectorSetupWarning/index.tsx} (85%) diff --git a/packages/console/src/assets/docs/tutorial/integrate-sdk/android.mdx b/packages/console/src/assets/docs/tutorial/integrate-sdk/android.mdx index e6384d91e..0eec82bf7 100644 --- a/packages/console/src/assets/docs/tutorial/integrate-sdk/android.mdx +++ b/packages/console/src/assets/docs/tutorial/integrate-sdk/android.mdx @@ -2,7 +2,7 @@ import UriInputField from '@mdx/components/UriInputField'; import Step from '@mdx/components/Step'; import Tabs from '@mdx/components/Tabs'; import TabItem from '@mdx/components/TabItem'; -import Alert from '@/components/Alert'; +import InlineNotification from '@/components/InlineNotification'; props.onNext(1)} > -The minimum supported Android API is level 24 +The minimum supported Android API is level 24 Add the `mavenCentral()` repository to your Gradle project build file: diff --git a/packages/console/src/assets/docs/tutorial/integrate-sdk/android_zh-cn.mdx b/packages/console/src/assets/docs/tutorial/integrate-sdk/android_zh-cn.mdx index 19e1195f2..9f6bb984d 100644 --- a/packages/console/src/assets/docs/tutorial/integrate-sdk/android_zh-cn.mdx +++ b/packages/console/src/assets/docs/tutorial/integrate-sdk/android_zh-cn.mdx @@ -2,7 +2,7 @@ import UriInputField from '@mdx/components/UriInputField'; import Step from '@mdx/components/Step'; import Tabs from '@mdx/components/Tabs'; import TabItem from '@mdx/components/TabItem'; -import Alert from '@/components/Alert'; +import InlineNotification from '@/components/InlineNotification'; props.onNext(1)} > - + Logto Andorid SDK 支持的最小 Android API 级别为 24 - + 将 `mavenCentral()` 添加到构建脚本中： diff --git a/packages/console/src/assets/docs/tutorial/integrate-sdk/express.mdx b/packages/console/src/assets/docs/tutorial/integrate-sdk/express.mdx index 60cc11bce..09687a202 100644 --- a/packages/console/src/assets/docs/tutorial/integrate-sdk/express.mdx +++ b/packages/console/src/assets/docs/tutorial/integrate-sdk/express.mdx @@ -2,7 +2,7 @@ import UriInputField from '@mdx/components/UriInputField'; import Step from '@mdx/components/Step'; import Tabs from '@mdx/components/Tabs'; import TabItem from '@mdx/components/TabItem'; -import Alert from '@/components/Alert'; +import InlineNotification from '@/components/InlineNotification'; import { buildIdGenerator } from '@logto/shared/universal'; props.onNext(2)} > - + In the following steps, we assume your app is running on http://localhost:3000. - + Import and initialize LogtoClient: diff --git a/packages/console/src/assets/docs/tutorial/integrate-sdk/express_zh-cn.mdx b/packages/console/src/assets/docs/tutorial/integrate-sdk/express_zh-cn.mdx index ad858ef6e..8ab04e6a6 100644 --- a/packages/console/src/assets/docs/tutorial/integrate-sdk/express_zh-cn.mdx +++ b/packages/console/src/assets/docs/tutorial/integrate-sdk/express_zh-cn.mdx @@ -2,7 +2,7 @@ import UriInputField from '@mdx/components/UriInputField'; import Step from '@mdx/components/Step'; import Tabs from '@mdx/components/Tabs'; import TabItem from '@mdx/components/TabItem'; -import Alert from '@/components/Alert'; +import InlineNotification from '@/components/InlineNotification'; import { buildIdGenerator } from '@logto/shared/universal'; props.onNext(2)} > - + 在如下代码示例中, 我们均先假设你的 React 应用运行在 http://localhost:3000 上。 - + 引入并实例化 LogtoClient： diff --git a/packages/console/src/assets/docs/tutorial/integrate-sdk/go.mdx b/packages/console/src/assets/docs/tutorial/integrate-sdk/go.mdx index f25960871..117d66c02 100644 --- a/packages/console/src/assets/docs/tutorial/integrate-sdk/go.mdx +++ b/packages/console/src/assets/docs/tutorial/integrate-sdk/go.mdx @@ -1,6 +1,6 @@ import UriInputField from '@mdx/components/UriInputField'; import Step from '@mdx/components/Step'; -import Alert from '@/components/Alert'; +import InlineNotification from '@/components/InlineNotification'; props.onNext(1)} > - + The following demonstration is built upon the Gin Web Framework. You may also integrate Logto into other frameworks by taking the same steps. In the following code snippets, we assume your app is running on http://localhost:8080. - + Run in the project root directory: @@ -55,11 +55,11 @@ In traditional web applications, the user authentication information will be sto Logto SDK provides a `Storage` interface, you can implement a `Storage` adapter based on your web framework so that the Logto SDK can store user authentication information in the session. - + We do NOT recommend using cookie-based sessions, as user authentication information stored by Logto may exceed the cookie size limit. In this example, we use memory-based sessions. You can use Redis, MongoDB, and other technologies in production to store sessions as needed. - + The `Storage` type in the Logto SDK is as follows: diff --git a/packages/console/src/assets/docs/tutorial/integrate-sdk/go_zh-cn.mdx b/packages/console/src/assets/docs/tutorial/integrate-sdk/go_zh-cn.mdx index f3131797f..8194db303 100644 --- a/packages/console/src/assets/docs/tutorial/integrate-sdk/go_zh-cn.mdx +++ b/packages/console/src/assets/docs/tutorial/integrate-sdk/go_zh-cn.mdx @@ -1,6 +1,6 @@ import UriInputField from '@mdx/components/UriInputField'; import Step from '@mdx/components/Step'; -import Alert from '@/components/Alert'; +import InlineNotification from '@/components/InlineNotification'; props.onNext(1)} > - + 在本指南中，我们基于 Gin Web 框架 示范 SDK 的集成过程。你也可以采取同样的步骤轻松地将 Logto 集成到其他的 Web 框架中。 在示例代码中，我们假定你的应用运行在 http://localhost:8080 上。 - + 在项目目录下执行： @@ -53,9 +53,9 @@ func main() { Logto SDK 提供了一个 `Storage` 接口，你可以结合自己所使用的网络框架实现一个 `Storage` 的适配器，使 Logto SDK 能将用户认证信息存储到 session 中。 - + 我们推荐使用非 cookie 的 session，因为 Logto 所存储的信息可能会超过 cookie 的大小限制。在示例中我们使用基于内存 session，在实际项目中，你可以根据需要使用 Redis、 MongoDB 等技术来存储 session。 - + Logto SDK 中的 `Storage` 类型如下： diff --git a/packages/console/src/assets/docs/tutorial/integrate-sdk/ios.mdx b/packages/console/src/assets/docs/tutorial/integrate-sdk/ios.mdx index 89691ca62..3fe890784 100644 --- a/packages/console/src/assets/docs/tutorial/integrate-sdk/ios.mdx +++ b/packages/console/src/assets/docs/tutorial/integrate-sdk/ios.mdx @@ -2,7 +2,7 @@ import UriInputField from '@mdx/components/UriInputField'; import Step from '@mdx/components/Step'; import Tabs from '@mdx/components/Tabs'; import TabItem from '@mdx/components/TabItem'; -import Alert from '@/components/Alert'; +import InlineNotification from '@/components/InlineNotification'; - + The Redirect URI in iOS SDK is only for internal use. There's NO NEED to add a{' '} Custom URL Scheme {' '} until a connector asks. - + Go back to Xcode, use the following code to implement sign-in: diff --git a/packages/console/src/assets/docs/tutorial/integrate-sdk/ios_zh-cn.mdx b/packages/console/src/assets/docs/tutorial/integrate-sdk/ios_zh-cn.mdx index 97738ae26..78fd10e9b 100644 --- a/packages/console/src/assets/docs/tutorial/integrate-sdk/ios_zh-cn.mdx +++ b/packages/console/src/assets/docs/tutorial/integrate-sdk/ios_zh-cn.mdx @@ -2,7 +2,7 @@ import UriInputField from '@mdx/components/UriInputField'; import Step from '@mdx/components/Step'; import Tabs from '@mdx/components/Tabs'; import TabItem from '@mdx/components/TabItem'; -import Alert from '@/components/Alert'; +import InlineNotification from '@/components/InlineNotification'; - + iOS SDK 中的 Redirect URI 仅用于内部。除非连接器有要求，否则 无需 在项目中添加 Custom URL Scheme。 - + 回到 Xcode，使用如下代码实现登录： diff --git a/packages/console/src/assets/docs/tutorial/integrate-sdk/next.mdx b/packages/console/src/assets/docs/tutorial/integrate-sdk/next.mdx index b7c3ecc5d..24dc61e59 100644 --- a/packages/console/src/assets/docs/tutorial/integrate-sdk/next.mdx +++ b/packages/console/src/assets/docs/tutorial/integrate-sdk/next.mdx @@ -2,7 +2,7 @@ import UriInputField from '@mdx/components/UriInputField'; import Step from '@mdx/components/Step'; import Tabs from '@mdx/components/Tabs'; import TabItem from '@mdx/components/TabItem'; -import Alert from '@/components/Alert'; +import InlineNotification from '@/components/InlineNotification'; import { buildIdGenerator } from '@logto/shared/universal'; props.onNext(2)} > - + In the following steps, we assume your app is running on http://localhost:3000. - + Import and initialize LogtoClient: diff --git a/packages/console/src/assets/docs/tutorial/integrate-sdk/next_zh-cn.mdx b/packages/console/src/assets/docs/tutorial/integrate-sdk/next_zh-cn.mdx index d9b10f292..cda24f8f0 100644 --- a/packages/console/src/assets/docs/tutorial/integrate-sdk/next_zh-cn.mdx +++ b/packages/console/src/assets/docs/tutorial/integrate-sdk/next_zh-cn.mdx @@ -2,7 +2,7 @@ import UriInputField from '@mdx/components/UriInputField'; import Step from '@mdx/components/Step'; import Tabs from '@mdx/components/Tabs'; import TabItem from '@mdx/components/TabItem'; -import Alert from '@/components/Alert'; +import InlineNotification from '@/components/InlineNotification'; import { buildIdGenerator } from '@logto/shared/universal'; props.onNext(2)} > - + 在如下代码示例中, 我们均先假设你的 React 应用运行在 http://localhost:3000 上。 - + 引入并实例化 LogtoClient： diff --git a/packages/console/src/assets/docs/tutorial/integrate-sdk/react.mdx b/packages/console/src/assets/docs/tutorial/integrate-sdk/react.mdx index bd3de0b05..362f6f247 100644 --- a/packages/console/src/assets/docs/tutorial/integrate-sdk/react.mdx +++ b/packages/console/src/assets/docs/tutorial/integrate-sdk/react.mdx @@ -2,7 +2,7 @@ import UriInputField from '@mdx/components/UriInputField'; import Step from '@mdx/components/Step'; import Tabs from '@mdx/components/Tabs'; import TabItem from '@mdx/components/TabItem'; -import Alert from '@/components/Alert'; +import InlineNotification from '@/components/InlineNotification'; ( onButtonClick={() => props.onNext(3)} > - + In the following steps, we assume your app is running on http://localhost:3000. - + ### Configure Redirect URI diff --git a/packages/console/src/assets/docs/tutorial/integrate-sdk/react_zh-cn.mdx b/packages/console/src/assets/docs/tutorial/integrate-sdk/react_zh-cn.mdx index 0b5078304..c783cccc0 100644 --- a/packages/console/src/assets/docs/tutorial/integrate-sdk/react_zh-cn.mdx +++ b/packages/console/src/assets/docs/tutorial/integrate-sdk/react_zh-cn.mdx @@ -2,7 +2,7 @@ import UriInputField from '@mdx/components/UriInputField'; import Step from '@mdx/components/Step'; import Tabs from '@mdx/components/Tabs'; import TabItem from '@mdx/components/TabItem'; -import Alert from '@/components/Alert'; +import InlineNotification from '@/components/InlineNotification'; ( onButtonClick={() => props.onNext(3)} > - + 在如下代码示例中, 我们均先假设你的 React 应用运行在 http://localhost:3000 上。 - + ### 配置 Redirect URI diff --git a/packages/console/src/assets/docs/tutorial/integrate-sdk/vanilla.mdx b/packages/console/src/assets/docs/tutorial/integrate-sdk/vanilla.mdx index 8edf6e34c..cb7da02eb 100644 --- a/packages/console/src/assets/docs/tutorial/integrate-sdk/vanilla.mdx +++ b/packages/console/src/assets/docs/tutorial/integrate-sdk/vanilla.mdx @@ -2,7 +2,7 @@ import UriInputField from '@mdx/components/UriInputField'; import Step from '@mdx/components/Step'; import Tabs from '@mdx/components/Tabs'; import TabItem from '@mdx/components/TabItem'; -import Alert from '@/components/Alert'; +import InlineNotification from '@/components/InlineNotification'; props.onNext(3)} > - + In the following steps, we assume your app is running on http://localhost:3000. - + ### Configure Redirect URI diff --git a/packages/console/src/assets/docs/tutorial/integrate-sdk/vanilla_zh-cn.mdx b/packages/console/src/assets/docs/tutorial/integrate-sdk/vanilla_zh-cn.mdx index 642324152..1da5d62a7 100644 --- a/packages/console/src/assets/docs/tutorial/integrate-sdk/vanilla_zh-cn.mdx +++ b/packages/console/src/assets/docs/tutorial/integrate-sdk/vanilla_zh-cn.mdx @@ -2,7 +2,7 @@ import UriInputField from '@mdx/components/UriInputField'; import Step from '@mdx/components/Step'; import Tabs from '@mdx/components/Tabs'; import TabItem from '@mdx/components/TabItem'; -import Alert from '@/components/Alert'; +import InlineNotification from '@/components/InlineNotification'; props.onNext(3)} > - + 在如下代码示例中, 我们均先假设你的应用运行在 http://localhost:3000 上。 - + ### 配置 Redirect URI diff --git a/packages/console/src/assets/docs/tutorial/integrate-sdk/vue.mdx b/packages/console/src/assets/docs/tutorial/integrate-sdk/vue.mdx index 8e931ef90..4f2d6277a 100644 --- a/packages/console/src/assets/docs/tutorial/integrate-sdk/vue.mdx +++ b/packages/console/src/assets/docs/tutorial/integrate-sdk/vue.mdx @@ -2,7 +2,7 @@ import UriInputField from '@mdx/components/UriInputField'; import Step from '@mdx/components/Step'; import Tabs from '@mdx/components/Tabs'; import TabItem from '@mdx/components/TabItem'; -import Alert from '@/components/Alert'; +import InlineNotification from '@/components/InlineNotification'; props.onNext(2)} > - + We only support Vue 3 Composition API at this point. Will add support to Vue Options API and possibly Vue 2 in future releases. - + Import and use `createLogto` to install Logto plugin: @@ -77,9 +77,9 @@ app.mount("#app");`} onButtonClick={() => props.onNext(3)} > - + In the following steps, we assume your app is running on http://localhost:3000. - + ### Configure Redirect URI diff --git a/packages/console/src/assets/docs/tutorial/integrate-sdk/vue_zh-cn.mdx b/packages/console/src/assets/docs/tutorial/integrate-sdk/vue_zh-cn.mdx index 1af3dc687..6d892b30d 100644 --- a/packages/console/src/assets/docs/tutorial/integrate-sdk/vue_zh-cn.mdx +++ b/packages/console/src/assets/docs/tutorial/integrate-sdk/vue_zh-cn.mdx @@ -2,7 +2,7 @@ import UriInputField from '@mdx/components/UriInputField'; import Step from '@mdx/components/Step'; import Tabs from '@mdx/components/Tabs'; import TabItem from '@mdx/components/TabItem'; -import Alert from '@/components/Alert'; +import InlineNotification from '@/components/InlineNotification'; props.onNext(2)} > - + 目前仅支持 Vue 3 的 组合式（Composition）API，我们会在后续版本中陆续添加对选项式（Options）API 和 Vue 2 的支持。 - + Import 并使用 `createLogto` 以插件的形式安装 Logto: @@ -76,9 +76,9 @@ app.mount("#app");`} onButtonClick={() => props.onNext(3)} > - + 在如下代码示例中, 我们均先假设你的 Vue 应用运行在 http://localhost:3000 上。 - + ### 配置 Redirect URI diff --git a/packages/console/src/components/Alert/index.module.scss b/packages/console/src/components/Alert/index.module.scss deleted file mode 100644 index c6d1cf754..000000000 --- a/packages/console/src/components/Alert/index.module.scss +++ /dev/null @@ -1,34 +0,0 @@ -@use '@/scss/underscore' as _; - -.alert { - padding: _.unit(3) _.unit(4); - margin: _.unit(2) 0; - font: var(--font-body-2); - display: flex; - border-radius: 8px; - align-items: center; - - &.shadow { - border: 1px solid var(--color-border); - box-shadow: var(--shadow-1); - } - - .icon { - width: 20px; - height: 20px; - color: var(--color-text-secondary); - } - - .content { - flex: 1; - margin: 0 _.unit(3); - } - - &.info { - background: var(--color-surface-variant); - - .icon { - color: var(--color-neutral-variant-60); - } - } -} diff --git a/packages/console/src/components/InlineNotification/index.module.scss b/packages/console/src/components/InlineNotification/index.module.scss new file mode 100644 index 000000000..e14548b0a --- /dev/null +++ b/packages/console/src/components/InlineNotification/index.module.scss @@ -0,0 +1,49 @@ +@use '@/scss/underscore' as _; + +.inlineNotification { + padding: _.unit(3) _.unit(4); + font: var(--font-body-2); + display: flex; + border-radius: 8px; + align-items: center; + gap: _.unit(3); + + &.shadow { + border: 1px solid var(--color-border); + box-shadow: var(--shadow-1); + } + + .icon { + flex-shrink: 0; + width: 20px; + height: 20px; + } + + .content { + flex: 1; + } + + &.info { + background: var(--color-info-container); + + .icon { + color: var(--color-on-info-container); + } + } + + &.alert { + background: var(--color-alert-container); + + .icon { + color: var(--color-on-alert-container); + } + } + + &.success { + background: var(--color-success-container); + } + + &.error { + background: var(--color-error-container); + } +} diff --git a/packages/console/src/components/Alert/index.tsx b/packages/console/src/components/InlineNotification/index.tsx similarity index 65% rename from packages/console/src/components/Alert/index.tsx rename to packages/console/src/components/InlineNotification/index.tsx index 2b2368861..6629bfc75 100644 --- a/packages/console/src/components/Alert/index.tsx +++ b/packages/console/src/components/InlineNotification/index.tsx @@ -3,6 +3,8 @@ import classNames from 'classnames'; import type { ReactNode } from 'react'; import Info from '@/assets/images/info.svg'; +import Error from '@/assets/images/toast-error.svg'; +import Success from '@/assets/images/toast-success.svg'; import Button from '../Button'; import DynamicT from '../DynamicT'; @@ -11,7 +13,7 @@ import TextLink from '../TextLink'; import * as styles from './index.module.scss'; type Props = { - severity?: 'info'; + severity?: 'info' | 'alert' | 'success' | 'error'; children?: ReactNode; action?: AdminConsoleKey; href?: string; @@ -20,7 +22,7 @@ type Props = { className?: string; }; -function Alert({ +function InlineNotification({ children, action, href, @@ -30,9 +32,18 @@ function Alert({ className, }: Props) { return ( -
+
- + {(severity === 'info' || severity === 'alert') && } + {severity === 'success' && } + {severity === 'error' && }
{children}
{action && href && ( @@ -49,4 +60,4 @@ function Alert({ ); } -export default Alert; +export default InlineNotification; diff --git a/packages/console/src/onboarding/components/DemoConnectorNotice/index.module.scss b/packages/console/src/onboarding/components/DemoConnectorNotice/index.module.scss index c678541be..8bf910fd9 100644 --- a/packages/console/src/onboarding/components/DemoConnectorNotice/index.module.scss +++ b/packages/console/src/onboarding/components/DemoConnectorNotice/index.module.scss @@ -1,5 +1,5 @@ @use '@/scss/underscore' as _; -div.notice { +.notice { margin: _.unit(4) 0 0; } diff --git a/packages/console/src/onboarding/components/DemoConnectorNotice/index.tsx b/packages/console/src/onboarding/components/DemoConnectorNotice/index.tsx index 64670a94e..7a3e3455a 100644 --- a/packages/console/src/onboarding/components/DemoConnectorNotice/index.tsx +++ b/packages/console/src/onboarding/components/DemoConnectorNotice/index.tsx @@ -1,13 +1,17 @@ import { useTranslation } from 'react-i18next'; -import Alert from '@/components/Alert'; +import InlineNotification from '@/components/InlineNotification'; import * as styles from './index.module.scss'; function DemoConnectorNotice() { const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' }); - return {t('cloud.sie.connectors.notice')}; + return ( + + {t('cloud.sie.connectors.notice')} + + ); } export default DemoConnectorNotice; diff --git a/packages/console/src/pages/Connectors/components/SignInExperienceSetupNotice/index.module.scss b/packages/console/src/pages/Connectors/components/SignInExperienceSetupNotice/index.module.scss index ecfe14aa6..8bf910fd9 100644 --- a/packages/console/src/pages/Connectors/components/SignInExperienceSetupNotice/index.module.scss +++ b/packages/console/src/pages/Connectors/components/SignInExperienceSetupNotice/index.module.scss @@ -1,7 +1,5 @@ @use '@/scss/underscore' as _; -.container { - .notice { - margin: _.unit(4) 0 0; - } +.notice { + margin: _.unit(4) 0 0; } diff --git a/packages/console/src/pages/Connectors/components/SignInExperienceSetupNotice/index.tsx b/packages/console/src/pages/Connectors/components/SignInExperienceSetupNotice/index.tsx index ca743249f..4092f68f5 100644 --- a/packages/console/src/pages/Connectors/components/SignInExperienceSetupNotice/index.tsx +++ b/packages/console/src/pages/Connectors/components/SignInExperienceSetupNotice/index.tsx @@ -2,7 +2,7 @@ import type { ConnectorResponse } from '@logto/schemas'; import { Trans, useTranslation } from 'react-i18next'; import useSWR from 'swr'; -import Alert from '@/components/Alert'; +import InlineNotification from '@/components/InlineNotification'; import TextLink from '@/components/TextLink'; import useUserPreferences from '@/hooks/use-user-preferences'; @@ -21,23 +21,21 @@ function SignInExperienceSetupNotice() { } return ( -
- { - void update({ connectorSieNoticeConfirmed: true }); + { + void update({ connectorSieNoticeConfirmed: true }); + }} + > + , }} > - , - }} - > - {t('connectors.config_sie_notice', { link: t('connectors.config_sie_link_text') })} - - -
+ {t('connectors.config_sie_notice', { link: t('connectors.config_sie_link_text') })} + + ); } diff --git a/packages/console/src/pages/SignInExperience/components/Welcome/GuideModal.module.scss b/packages/console/src/pages/SignInExperience/components/Welcome/GuideModal.module.scss index 7b987ac45..2edffc3e9 100644 --- a/packages/console/src/pages/SignInExperience/components/Welcome/GuideModal.module.scss +++ b/packages/console/src/pages/SignInExperience/components/Welcome/GuideModal.module.scss @@ -37,7 +37,7 @@ .reminder { width: 550px; - margin: 0 auto _.unit(8); + margin: _.unit(2) auto _.unit(8); } > .form { diff --git a/packages/console/src/pages/SignInExperience/components/Welcome/GuideModal.tsx b/packages/console/src/pages/SignInExperience/components/Welcome/GuideModal.tsx index 7153cff88..c113ef2e9 100644 --- a/packages/console/src/pages/SignInExperience/components/Welcome/GuideModal.tsx +++ b/packages/console/src/pages/SignInExperience/components/Welcome/GuideModal.tsx @@ -6,10 +6,10 @@ import Modal from 'react-modal'; import useSWR from 'swr'; import Close from '@/assets/images/close.svg'; -import Alert from '@/components/Alert'; import Button from '@/components/Button'; import CardTitle from '@/components/CardTitle'; import IconButton from '@/components/IconButton'; +import InlineNotification from '@/components/InlineNotification'; import Spacer from '@/components/Spacer'; import useApi from '@/hooks/use-api'; import useConfigs from '@/hooks/use-configs'; @@ -108,11 +108,14 @@ function GuideModal({ isOpen, onClose }: Props) {
{!preferences.experienceNoticeConfirmed && ( -
- - {t('sign_in_exp.welcome.apply_remind')} - -
+ + {t('sign_in_exp.welcome.apply_remind')} + )}
diff --git a/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignIn/components/ConnectorSetupWarning/index.module.scss b/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignIn/components/ConnectorSetupWarning/index.module.scss new file mode 100644 index 000000000..2a687f47f --- /dev/null +++ b/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignIn/components/ConnectorSetupWarning/index.module.scss @@ -0,0 +1,5 @@ +@use '@/scss/underscore' as _; + +.notice { + margin: _.unit(2) 0; +} diff --git a/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignIn/components/ConnectorSetupWarning.tsx b/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignIn/components/ConnectorSetupWarning/index.tsx similarity index 85% rename from packages/console/src/pages/SignInExperience/tabs/SignUpAndSignIn/components/ConnectorSetupWarning.tsx rename to packages/console/src/pages/SignInExperience/tabs/SignUpAndSignIn/components/ConnectorSetupWarning/index.tsx index eb1853c65..16374c2c0 100644 --- a/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignIn/components/ConnectorSetupWarning.tsx +++ b/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignIn/components/ConnectorSetupWarning/index.tsx @@ -1,11 +1,13 @@ import { ConnectorType } from '@logto/schemas'; import { Trans, useTranslation } from 'react-i18next'; -import Alert from '@/components/Alert'; +import InlineNotification from '@/components/InlineNotification'; import TextLink from '@/components/TextLink'; import useEnabledConnectorTypes from '@/hooks/use-enabled-connector-types'; import { noConnectorWarningPhrase } from '@/pages/SignInExperience/constants'; +import * as styles from './index.module.scss'; + type Props = { requiredConnectors: ConnectorType[]; }; @@ -25,7 +27,7 @@ function ConnectorSetupWarning({ requiredConnectors }: Props) { return ( <> {missingConnectors.map((connectorType) => ( - + - + ))} );