refactor(console): fix region-related styles (#6606)

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

@@ -14,13 +14,13 @@ export enum RegionName {
   AU = 'AU',
 }
 
-const regionDisplayNameMap = Object.freeze({
+export const regionDisplayNameMap = Object.freeze({
   [RegionName.EU]: 'Europe',
   [RegionName.US]: 'West US',
   [RegionName.AU]: 'Australia',
 } satisfies Record<RegionName, string>);
 
-const regionFlagMap = Object.freeze({
+export const regionFlagMap = Object.freeze({
   [RegionName.EU]: euFlag,
   [RegionName.US]: usFlag,
   [RegionName.AU]: auFlag,

packages/console/src/components/Topbar/TenantSelector/TenantDropdownItem/index.module.scss

@@ -40,12 +40,37 @@
       }
     }
 
-    .planName {
+    .metadata {
       margin-top: _.unit(0.5);
       font: var(--font-body-3);
       color: var(--color-text-secondary);
       // Keep the height of the item consistent when the plan name is loading
       min-height: 16px;
+      display: flex;
+      align-items: center;
+      justify-content: start;
+      flex-wrap: nowrap;
+      gap: _.unit(3);
+
+      .region {
+        display: flex;
+        gap: _.unit(1);
+        align-items: center;
+      }
+
+      > * {
+        position: relative;
+      }
+
+      > *:not(:last-child)::after {
+        content: '';
+        height: 10px;
+        border-right: 1px solid var(--color-divider);
+        position: absolute;
+        inset-inline-end: _.unit(-1.5);
+        top: 50%;
+        transform: translateY(-50%);
+      }
     }
   }
 

packages/console/src/components/Topbar/TenantSelector/TenantDropdownItem/index.tsx

@@ -1,14 +1,14 @@
 import { TenantTag } from '@logto/schemas';
 import classNames from 'classnames';
 import { useContext, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
 
 import Tick from '@/assets/icons/tick.svg?react';
 import { type TenantResponse } from '@/cloud/types/router';
+import { regionFlagMap } from '@/components/Region';
 import SkuName from '@/components/SkuName';
-import TenantEnvTag from '@/components/TenantEnvTag';
 import { SubscriptionDataContext } from '@/contexts/SubscriptionDataProvider';
 import { DropdownItem } from '@/ds-components/Dropdown';
-import DynamicT from '@/ds-components/DynamicT';
 
 import TenantStatusTag from './TenantStatusTag';
 import styles from './index.module.scss';
@@ -23,8 +23,10 @@ function TenantDropdownItem({ tenantData, isSelected, onClick }: Props) {
   const {
     name,
     tag,
+    regionName,
     subscription: { planId, isEnterprisePlan },
   } = tenantData;
+  const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
 
   const { logtoSkus } = useContext(SubscriptionDataContext);
   const tenantSubscriptionSku = useMemo(
@@ -36,18 +38,22 @@ function TenantDropdownItem({ tenantData, isSelected, onClick }: Props) {
     return null;
   }
 
+  const RegionFlag = regionFlagMap[regionName];
+
   return (
     <DropdownItem className={styles.item} onClick={onClick}>
       <div className={styles.info}>
         <div className={styles.meta}>
           <div className={styles.name}>{name}</div>
-          <TenantEnvTag tag={tag} />
           <TenantStatusTag tenantData={tenantData} className={styles.statusTag} />
         </div>
-        <div className={styles.planName}>
-          {tag === TenantTag.Development ? (
-            <DynamicT forKey="subscription.no_subscription" />
-          ) : (
+        <div className={styles.metadata}>
+          <div className={styles.region}>
+            <RegionFlag />
+            <span>{regionName}</span>
+          </div>
+          <span>{t(`tenants.full_env_tag.${tag}`)}</span>
+          {tag !== TenantTag.Development && (
             <SkuName skuId={planId} isEnterprisePlan={isEnterprisePlan} />
           )}
         </div>

packages/console/src/pages/TenantSettings/TenantBasicSettings/ProfileForm/TenantRegion/index.module.scss

@@ -7,6 +7,7 @@
 }
 
 .region {
+  justify-content: start;
   font: var(--font-label-1);
 }
 

packages/console/src/pages/TenantSettings/TenantBasicSettings/ProfileForm/TenantRegion/index.tsx

@@ -1,7 +1,7 @@
 import { useContext } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 
-import Region from '@/components/Region';
+import Region, { regionDisplayNameMap } from '@/components/Region';
 import { trustAndSecurityLink } from '@/consts';
 import { TenantsContext } from '@/contexts/TenantsProvider';
 import TextLink from '@/ds-components/TextLink';
@@ -26,7 +26,7 @@ function TenantRegion() {
             a: <TextLink targetBlank="noopener" href={trustAndSecurityLink} />,
           }}
         >
-          {t('tenants.settings.tenant_region_tip', { region: regionName })}
+          {t('tenants.settings.tenant_region_tip', { region: regionDisplayNameMap[regionName] })}
         </Trans>
       </div>
     </div>