refactor(console): improve the original Alert component (#4003)

2025-03-31 22:51:25 -05:00 · 2023-06-08 15:13:16 +08:00 · 2023-06-08 15:13:16 +08:00 · 071bbfae24
commit 071bbfae24
parent 69bd7ac88b
27 changed files with 163 additions and 127 deletions
--- 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';

 <Step
  title="Integrate Logto Android SDK"
@ -12,7 +12,7 @@ import Alert from '@/components/Alert';
  onButtonClick={() => props.onNext(1)}
 >

-<Alert>The minimum supported Android API is level 24</Alert>
+<InlineNotification>The minimum supported Android API is level 24</InlineNotification>

 Add the `mavenCentral()` repository to your Gradle project build file:

--- 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';

 <Step
  title="集成 Logto Android SDK"
@ -12,9 +12,9 @@ import Alert from '@/components/Alert';
  onButtonClick={() => props.onNext(1)}
 >

-<Alert>
+<InlineNotification>
  Logto Andorid SDK 支持的最小 Android API 级别为 24
-</Alert>
+</InlineNotification>

 将 `mavenCentral()` 添加到构建脚本中：

--- 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';

 <Step
@ -46,9 +46,9 @@ pnpm add @logto/express cookie-parser express-session
  onButtonClick={() => props.onNext(2)}
 >

-<Alert>
+<InlineNotification>
  In the following steps, we assume your app is running on <code>http://localhost:3000</code>.
-</Alert>
+</InlineNotification>

 Import and initialize LogtoClient:

--- 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';

 <Step
@ -46,9 +46,9 @@ pnpm add @logto/express cookie-parser express-session
  onButtonClick={() => props.onNext(2)}
 >

-<Alert>
+<InlineNotification>
  在如下代码示例中, 我们均先假设你的 React 应用运行在 <code>http://localhost:3000</code> 上。
-</Alert>
+</InlineNotification>

 引入并实例化 LogtoClient：

--- 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';

 <Step
  title="Add Logto SDK as a dependency"
@ -8,11 +8,11 @@ import Alert from '@/components/Alert';
  activeIndex={props.activeStepIndex}
  onButtonClick={() => props.onNext(1)}
 >
-<Alert>
+<InlineNotification>
  The following demonstration is built upon the <a href="https://gin-gonic.com">Gin Web Framework</a>.  
  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 <code>http://localhost:8080</code>.
-</Alert>
+</InlineNotification>

 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.

-<Alert>
+<InlineNotification>
  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.
-</Alert>
+</InlineNotification>

 The `Storage` type in the Logto SDK is as follows:

--- 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';

 <Step
  title="为项目安装 Logto SDK 依赖"
@ -8,10 +8,10 @@ import Alert from '@/components/Alert';
  activeIndex={props.activeStepIndex}
  onButtonClick={() => props.onNext(1)}
 >
-<Alert>
+<InlineNotification>
  在本指南中，我们基于 <a href="https://gin-gonic.com">Gin Web 框架</a> 示范 SDK 的集成过程。你也可以采取同样的步骤轻松地将 Logto 集成到其他的 Web 框架中。
  在示例代码中，我们假定你的应用运行在 <code>http://localhost:8080</code> 上。
-</Alert>
+</InlineNotification>

 在项目目录下执行：

@ -53,9 +53,9 @@ func main() {

 Logto SDK 提供了一个 `Storage` 接口，你可以结合自己所使用的网络框架实现一个 `Storage` 的适配器，使 Logto SDK 能将用户认证信息存储到 session 中。

-<Alert>
+<InlineNotification>
  我们推荐使用非 cookie 的 session，因为 Logto 所存储的信息可能会超过 cookie 的大小限制。在示例中我们使用基于内存 session，在实际项目中，你可以根据需要使用 Redis、 MongoDB 等技术来存储 session。
-</Alert>
+</InlineNotification>

 Logto SDK 中的 `Storage` 类型如下：

--- 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';

 <Step
  title="Integrate Logto Swift SDK"
@ -92,13 +92,13 @@ First, let’s configure your redirect URI scheme. E.g. `io.logto://callback`
  title="application_details.redirect_uri"
 />

-<Alert>
+<InlineNotification>
  The Redirect URI in iOS SDK is only for internal use. There's <em>NO NEED</em> to add a{' '}
  <a href="https://developer.apple.com/documentation/xcode/defining-a-custom-url-scheme-for-your-app">
    Custom URL Scheme
  </a>{' '}
  until a connector asks.
-</Alert>
+</InlineNotification>

 Go back to Xcode, use the following code to implement sign-in:

--- 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';

 <Step
  title="集成 Logto Swift SDK"
@ -86,9 +86,9 @@ let config = try? LogtoConfig(

 <UriInputField appId={props.appId} isSingle={!props.isCompact} name="redirectUris" title="application_details.redirect_uri" />

-<Alert>
+<InlineNotification>
  iOS SDK 中的 Redirect URI 仅用于内部。除非连接器有要求，否则 <em>无需</em> 在项目中添加 <a href="https://developer.apple.com/documentation/xcode/defining-a-custom-url-scheme-for-your-app">Custom URL Scheme</a>。
-</Alert>
+</InlineNotification>

 回到 Xcode，使用如下代码实现登录：

--- 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';

 <Step
@ -45,9 +45,9 @@ pnpm add @logto/next
  onButtonClick={() => props.onNext(2)}
 >

-<Alert>
+<InlineNotification>
  In the following steps, we assume your app is running on <code>http://localhost:3000</code>.
-</Alert>
+</InlineNotification>

 Import and initialize LogtoClient:

--- 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';

 <Step
@ -45,9 +45,9 @@ pnpm add @logto/next
  onButtonClick={() => props.onNext(2)}
 >

-<Alert>
+<InlineNotification>
  在如下代码示例中, 我们均先假设你的 React 应用运行在 <code>http://localhost:3000</code> 上。
-</Alert>
+</InlineNotification>

 引入并实例化 LogtoClient：

--- 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';

 <Step
  title="Add Logto SDK as a dependency"
@ -73,9 +73,9 @@ const App = () => (
  onButtonClick={() => props.onNext(3)}
 >

-<Alert>
+<InlineNotification>
  In the following steps, we assume your app is running on <code>http://localhost:3000</code>.
-</Alert>
+</InlineNotification>

 ### Configure Redirect URI

--- 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';

 <Step
  title="将 Logto SDK 添加至依赖"
@ -73,9 +73,9 @@ const App = () => (
  onButtonClick={() => props.onNext(3)}
 >

-<Alert>
+<InlineNotification>
  在如下代码示例中, 我们均先假设你的 React 应用运行在 <code>http://localhost:3000</code> 上。
-</Alert>
+</InlineNotification>

 ### 配置 Redirect URI

--- 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';

 <Step
  title="Add Logto SDK as a dependency"
@ -67,9 +67,9 @@ const logtoClient = new LogtoClient({
  onButtonClick={() => props.onNext(3)}
 >

-<Alert>
+<InlineNotification>
  In the following steps, we assume your app is running on <code>http://localhost:3000</code>.
-</Alert>
+</InlineNotification>

 ### Configure Redirect URI

--- 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';

 <Step
  title="将 Logto SDK 添加至依赖"
@ -67,9 +67,9 @@ const logtoClient = new LogtoClient({
  onButtonClick={() => props.onNext(3)}
 >

-<Alert>
+<InlineNotification>
  在如下代码示例中, 我们均先假设你的应用运行在 <code>http://localhost:3000</code> 上。
-</Alert>
+</InlineNotification>

 ### 配置 Redirect URI

--- 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';

 <Step
  title="Add Logto SDK as a dependency"
@ -44,10 +44,10 @@ pnpm add @logto/vue
  onButtonClick={() => props.onNext(2)}
 >

-<Alert>
+<InlineNotification>
  We only support Vue 3 Composition API at this point. Will add support to Vue Options API and
  possibly Vue 2 in future releases.
-</Alert>
+</InlineNotification>

 Import and use `createLogto` to install Logto plugin:

@ -77,9 +77,9 @@ app.mount("#app");`}
  onButtonClick={() => props.onNext(3)}
 >

-<Alert>
+<InlineNotification>
  In the following steps, we assume your app is running on <code>http://localhost:3000</code>.
-</Alert>
+</InlineNotification>

 ### Configure Redirect URI

--- 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';

 <Step
  title="将 Logto SDK 添加至依赖"
@ -44,9 +44,9 @@ pnpm add @logto/vue
  onButtonClick={() => props.onNext(2)}
 >

-<Alert>
+<InlineNotification>
  目前仅支持 Vue 3 的 组合式（Composition）API，我们会在后续版本中陆续添加对选项式（Options）API 和 Vue 2 的支持。
-</Alert>
+</InlineNotification>

 Import 并使用 `createLogto` 以插件的形式安装 Logto:

@ -76,9 +76,9 @@ app.mount("#app");`}
  onButtonClick={() => props.onNext(3)}
 >

-<Alert>
+<InlineNotification>
  在如下代码示例中, 我们均先假设你的 Vue 应用运行在 <code>http://localhost:3000</code> 上。
-</Alert>
+</InlineNotification>

 ### 配置 Redirect URI

--- a/packages/console/src/components/Alert/index.module.scss
+++ b/packages/console/src/components/Alert/index.module.scss
@ -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);
-    }
-  }
-}
--- a/packages/console/src/components/InlineNotification/index.module.scss
+++ 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);
+  }
+}
--- a/packages/console/src/components/InlineNotification/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 (
-    <div className={classNames(styles.alert, styles[severity], styles[variant], className)}>
+    <div
+      className={classNames(
+        styles.inlineNotification,
+        styles[severity],
+        styles[variant],
+        className
+      )}
+    >
      <div className={styles.icon}>
-        <Info />
+        {(severity === 'info' || severity === 'alert') && <Info />}
+        {severity === 'success' && <Success />}
+        {severity === 'error' && <Error />}
      </div>
      <div className={styles.content}>{children}</div>
      {action && href && (
@ -49,4 +60,4 @@ function Alert({
  );
 }

-export default Alert;
+export default InlineNotification;
--- 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;
 }
--- 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 <Alert className={styles.notice}>{t('cloud.sie.connectors.notice')}</Alert>;
+  return (
+    <InlineNotification className={styles.notice}>
+      {t('cloud.sie.connectors.notice')}
+    </InlineNotification>
+  );
 }

 export default DemoConnectorNotice;
--- 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;
 }
--- 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 (
-    <div className={styles.container}>
-      <Alert
-        action="general.got_it"
-        className={styles.notice}
-        onClick={() => {
-          void update({ connectorSieNoticeConfirmed: true });
+    <InlineNotification
+      action="general.got_it"
+      className={styles.notice}
+      onClick={() => {
+        void update({ connectorSieNoticeConfirmed: true });
+      }}
+    >
+      <Trans
+        components={{
+          a: <TextLink to="/sign-in-experience/sign-up-and-sign-in" />,
        }}
      >
-        <Trans
-          components={{
-            a: <TextLink to="/sign-in-experience/sign-up-and-sign-in" />,
-          }}
-        >
-          {t('connectors.config_sie_notice', { link: t('connectors.config_sie_link_text') })}
-        </Trans>
-      </Alert>
-    </div>
+        {t('connectors.config_sie_notice', { link: t('connectors.config_sie_link_text') })}
+      </Trans>
+    </InlineNotification>
  );
 }

--- 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 {
--- 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) {
          <FormProvider {...methods}>
            <form className={styles.form} onSubmit={onSubmit}>
              {!preferences.experienceNoticeConfirmed && (
-                <div className={styles.reminder}>
-                  <Alert action="general.got_it" variant="shadow" onClick={onGotIt}>
-                    {t('sign_in_exp.welcome.apply_remind')}
-                  </Alert>
-                </div>
+                <InlineNotification
+                  action="general.got_it"
+                  variant="shadow"
+                  className={styles.reminder}
+                  onClick={onGotIt}
+                >
+                  {t('sign_in_exp.welcome.apply_remind')}
+                </InlineNotification>
              )}
              <div className={styles.main}>
                <div className={styles.form}>
--- 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
@ -0,0 +1,5 @@
+@use '@/scss/underscore' as _;
+
+.notice {
+  margin: _.unit(2) 0;
+}
--- a/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignIn/components/ConnectorSetupWarning/index.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) => (
-        <Alert key={connectorType}>
+        <InlineNotification key={connectorType} className={styles.notice}>
          <Trans
            components={{
              a: (
@ -39,7 +41,7 @@ function ConnectorSetupWarning({ requiredConnectors }: Props) {
              link: t('sign_in_exp.setup_warning.setup_link'),
            })}
          </Trans>
-        </Alert>
+        </InlineNotification>
      ))}
    </>
  );