refactor(console): improve onboarding ux (#5932)

packages/console/src/components/CreateTenantModal/index.tsx

@@ -106,7 +106,10 @@ function CreateTenantModal({ isOpen, onClose }: Props) {
               error={Boolean(errors.name)}
             />
           </FormField>
-          <FormField title="tenants.settings.tenant_region">
+          <FormField
+            title="tenants.settings.tenant_region"
+            description="tenants.settings.tenant_region_description"
+          >
             <Controller
               control={control}
               name="regionName"

packages/console/src/onboarding/pages/CreateTenant/index.tsx

@@ -1,10 +1,15 @@
+import { Theme } from '@logto/schemas';
 import { joinPath } from '@silverhand/essentials';
 import { useContext } from 'react';
 import { Controller, FormProvider, useForm } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
 
+import CreateTenantHeaderIconDark from '@/assets/icons/create-tenant-header-dark.svg';
+import CreateTenantHeaderIcon from '@/assets/icons/create-tenant-header.svg';
 import { useCloudApi } from '@/cloud/hooks/use-cloud-api';
 import ActionBar from '@/components/ActionBar';
 import { type CreateTenantData } from '@/components/CreateTenantModal/types';
+import PageMeta from '@/components/PageMeta';
 import Region, { RegionName } from '@/components/Region';
 import { isDevFeaturesEnabled } from '@/consts/env';
 import { TenantsContext } from '@/contexts/TenantsProvider';
@@ -15,6 +20,7 @@ import OverlayScrollbar from '@/ds-components/OverlayScrollbar';
 import RadioGroup, { Radio } from '@/ds-components/RadioGroup';
 import TextInput from '@/ds-components/TextInput';
 import useTenantPathname from '@/hooks/use-tenant-pathname';
+import useTheme from '@/hooks/use-theme';
 import * as pageLayout from '@/onboarding/scss/layout.module.scss';
 import { OnboardingPage, OnboardingRoute } from '@/onboarding/types';
 import { trySubmitSafe } from '@/utils/form';
@@ -31,6 +37,8 @@ function CreateTenant() {
   } = methods;
   const { navigate } = useTenantPathname();
   const { prependTenant } = useContext(TenantsContext);
+  const theme = useTheme();
+  const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
 
   const cloudApi = useCloudApi();
 
@@ -44,13 +52,12 @@ function CreateTenant() {
 
   return (
     <div className={pageLayout.page}>
+      <PageMeta titleKey={['cloud.create_tenant.page_title', 'cloud.general.onboarding']} />
       <OverlayScrollbar className={pageLayout.contentContainer}>
         <div className={pageLayout.content}>
-          <div className={pageLayout.title}>Create your first tenant</div>
-          <div className={pageLayout.description}>
-            A tenant is an isolated environment where you can manage user identities, applications,
-            and all other Logto resources.
-          </div>
+          {theme === Theme.Light ? <CreateTenantHeaderIcon /> : <CreateTenantHeaderIconDark />}
+          <div className={pageLayout.title}>{t('cloud.create_tenant.title')}</div>
+          <div className={pageLayout.description}>{t('cloud.create_tenant.description')}</div>
           <FormProvider {...methods}>
             <FormField isRequired title="tenants.settings.tenant_name">
               <TextInput
@@ -61,7 +68,10 @@ function CreateTenant() {
                 error={Boolean(errors.name)}
               />
             </FormField>
-            <FormField title="tenants.settings.tenant_region">
+            <FormField
+              title="tenants.settings.tenant_region"
+              description="tenants.settings.tenant_region_description"
+            >
               <Controller
                 control={control}
                 name="regionName"

packages/console/src/onboarding/scss/layout.module.scss

@@ -26,7 +26,7 @@
 
 .title {
   font: var(--font-title-1);
-  margin-top: _.unit(6);
+  margin-top: _.unit(3);
 }
 
 .description {

packages/phrases/src/locales/en/translation/admin-console/cloud.ts

@@ -33,6 +33,12 @@ const cloud = {
       others: 'None of these above',
     },
   },
+  create_tenant: {
+    page_title: 'Create tenant',
+    title: 'Create your first tenant',
+    description:
+      'A tenant is an isolated environment where you can manage user identities, applications, and all other Logto resources.',
+  },
   sie: {
     page_title: 'Customize sign-in experience',
     title: "Let's first customize your sign-in experience with ease",

packages/phrases/src/locales/en/translation/admin-console/tenants.ts

@@ -13,7 +13,9 @@ const tenants = {
     description: 'Set the tenant name and view your data hosted region and tenant type.',
     tenant_id: 'Tenant ID',
     tenant_name: 'Tenant Name',
-    tenant_region: 'Data hosted region',
+    tenant_region: 'Data region',
+    tenant_region_description:
+      'The physical location where your tenant resources (users, apps, etc.) are hosted. This can’t be changed after creation.',
     tenant_region_tip: 'Your tenant resources are hosted in {{region}}. <a>Learn more</a>',
     environment_tag_development: 'Dev',
     environment_tag_production: 'Prod',
@@ -45,7 +47,7 @@ const tenants = {
   create_modal: {
     title: 'Create tenant',
     subtitle:
-      'Create a new tenant that has isolated resources and users. Data hosted region and tenant types can’t be modified after creation.',
+      'Create a new tenant that has isolated resources and users. Data region and tenant types can’t be modified after creation.',
     tenant_usage_purpose: 'What do you want to use this tenant for?',
     development_description:
       "For testing only and shouldn't be used in production. No subscription is required.",