diff --git a/packages/console/src/components/InlineNotification/index.tsx b/packages/console/src/components/InlineNotification/index.tsx index 6629bfc75..9fe0ef848 100644 --- a/packages/console/src/components/InlineNotification/index.tsx +++ b/packages/console/src/components/InlineNotification/index.tsx @@ -19,6 +19,7 @@ type Props = { href?: string; onClick?: () => void; variant?: 'plain' | 'shadow'; + hasIcon?: boolean; className?: string; }; @@ -29,6 +30,7 @@ function InlineNotification({ onClick, severity = 'info', variant = 'plain', + hasIcon = true, className, }: Props) { return ( @@ -40,11 +42,13 @@ function InlineNotification({ className )} > -
- {(severity === 'info' || severity === 'alert') && } - {severity === 'success' && } - {severity === 'error' && } -
+ {hasIcon && ( +
+ {(severity === 'info' || severity === 'alert') && } + {severity === 'success' && } + {severity === 'error' && } +
+ )}
{children}
{action && href && ( diff --git a/packages/console/src/pages/TenantSettings/TenantDomainSettings/CustomDomain/index.module.scss b/packages/console/src/pages/TenantSettings/TenantDomainSettings/CustomDomain/index.module.scss index 596693ee3..b80e7b1aa 100644 --- a/packages/console/src/pages/TenantSettings/TenantDomainSettings/CustomDomain/index.module.scss +++ b/packages/console/src/pages/TenantSettings/TenantDomainSettings/CustomDomain/index.module.scss @@ -4,3 +4,7 @@ border: 1px solid var(--color-divider); border-radius: 12px; } + +.notice { + margin-top: _.unit(3); +} diff --git a/packages/console/src/pages/TenantSettings/TenantDomainSettings/CustomDomain/index.tsx b/packages/console/src/pages/TenantSettings/TenantDomainSettings/CustomDomain/index.tsx index edd737370..ffa2e8978 100644 --- a/packages/console/src/pages/TenantSettings/TenantDomainSettings/CustomDomain/index.tsx +++ b/packages/console/src/pages/TenantSettings/TenantDomainSettings/CustomDomain/index.tsx @@ -1,4 +1,8 @@ import { type Domain, DomainStatus } from '@logto/schemas'; +import { Trans, useTranslation } from 'react-i18next'; + +import InlineNotification from '@/components/InlineNotification'; +import TextLink from '@/components/TextLink'; import ActivationProcess from './ActivationProcess'; import CustomDomainHeader from './CustomDomainHeader'; @@ -10,13 +14,32 @@ type Props = { }; function CustomDomain({ customDomain, onDeleteCustomDomain }: Props) { + const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' }); + return ( -
- - {customDomain.status !== DomainStatus.Active && ( - + <> +
+ + {customDomain.status !== DomainStatus.Active && ( + + )} +
+ {customDomain.status === DomainStatus.Active && ( + + , + }} + > + {t('domain.update_endpoint_notice', { link: t('general.learn_more') })} + + )} -
+ ); }