mirror of
https://github.com/logto-io/logto.git
synced 2024-12-16 20:26:19 -05:00
refactor(console): fix region-related styles (#6606)
This commit is contained in:
parent
c61dd50e60
commit
72738b2b65
5 changed files with 44 additions and 12 deletions
|
@ -14,13 +14,13 @@ export enum RegionName {
|
||||||
AU = 'AU',
|
AU = 'AU',
|
||||||
}
|
}
|
||||||
|
|
||||||
const regionDisplayNameMap = Object.freeze({
|
export const regionDisplayNameMap = Object.freeze({
|
||||||
[RegionName.EU]: 'Europe',
|
[RegionName.EU]: 'Europe',
|
||||||
[RegionName.US]: 'West US',
|
[RegionName.US]: 'West US',
|
||||||
[RegionName.AU]: 'Australia',
|
[RegionName.AU]: 'Australia',
|
||||||
} satisfies Record<RegionName, string>);
|
} satisfies Record<RegionName, string>);
|
||||||
|
|
||||||
const regionFlagMap = Object.freeze({
|
export const regionFlagMap = Object.freeze({
|
||||||
[RegionName.EU]: euFlag,
|
[RegionName.EU]: euFlag,
|
||||||
[RegionName.US]: usFlag,
|
[RegionName.US]: usFlag,
|
||||||
[RegionName.AU]: auFlag,
|
[RegionName.AU]: auFlag,
|
||||||
|
|
|
@ -40,12 +40,37 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.planName {
|
.metadata {
|
||||||
margin-top: _.unit(0.5);
|
margin-top: _.unit(0.5);
|
||||||
font: var(--font-body-3);
|
font: var(--font-body-3);
|
||||||
color: var(--color-text-secondary);
|
color: var(--color-text-secondary);
|
||||||
// Keep the height of the item consistent when the plan name is loading
|
// Keep the height of the item consistent when the plan name is loading
|
||||||
min-height: 16px;
|
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%);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -1,14 +1,14 @@
|
||||||
import { TenantTag } from '@logto/schemas';
|
import { TenantTag } from '@logto/schemas';
|
||||||
import classNames from 'classnames';
|
import classNames from 'classnames';
|
||||||
import { useContext, useMemo } from 'react';
|
import { useContext, useMemo } from 'react';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
|
||||||
import Tick from '@/assets/icons/tick.svg?react';
|
import Tick from '@/assets/icons/tick.svg?react';
|
||||||
import { type TenantResponse } from '@/cloud/types/router';
|
import { type TenantResponse } from '@/cloud/types/router';
|
||||||
|
import { regionFlagMap } from '@/components/Region';
|
||||||
import SkuName from '@/components/SkuName';
|
import SkuName from '@/components/SkuName';
|
||||||
import TenantEnvTag from '@/components/TenantEnvTag';
|
|
||||||
import { SubscriptionDataContext } from '@/contexts/SubscriptionDataProvider';
|
import { SubscriptionDataContext } from '@/contexts/SubscriptionDataProvider';
|
||||||
import { DropdownItem } from '@/ds-components/Dropdown';
|
import { DropdownItem } from '@/ds-components/Dropdown';
|
||||||
import DynamicT from '@/ds-components/DynamicT';
|
|
||||||
|
|
||||||
import TenantStatusTag from './TenantStatusTag';
|
import TenantStatusTag from './TenantStatusTag';
|
||||||
import styles from './index.module.scss';
|
import styles from './index.module.scss';
|
||||||
|
@ -23,8 +23,10 @@ function TenantDropdownItem({ tenantData, isSelected, onClick }: Props) {
|
||||||
const {
|
const {
|
||||||
name,
|
name,
|
||||||
tag,
|
tag,
|
||||||
|
regionName,
|
||||||
subscription: { planId, isEnterprisePlan },
|
subscription: { planId, isEnterprisePlan },
|
||||||
} = tenantData;
|
} = tenantData;
|
||||||
|
const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
|
||||||
|
|
||||||
const { logtoSkus } = useContext(SubscriptionDataContext);
|
const { logtoSkus } = useContext(SubscriptionDataContext);
|
||||||
const tenantSubscriptionSku = useMemo(
|
const tenantSubscriptionSku = useMemo(
|
||||||
|
@ -36,18 +38,22 @@ function TenantDropdownItem({ tenantData, isSelected, onClick }: Props) {
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const RegionFlag = regionFlagMap[regionName];
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<DropdownItem className={styles.item} onClick={onClick}>
|
<DropdownItem className={styles.item} onClick={onClick}>
|
||||||
<div className={styles.info}>
|
<div className={styles.info}>
|
||||||
<div className={styles.meta}>
|
<div className={styles.meta}>
|
||||||
<div className={styles.name}>{name}</div>
|
<div className={styles.name}>{name}</div>
|
||||||
<TenantEnvTag tag={tag} />
|
|
||||||
<TenantStatusTag tenantData={tenantData} className={styles.statusTag} />
|
<TenantStatusTag tenantData={tenantData} className={styles.statusTag} />
|
||||||
</div>
|
</div>
|
||||||
<div className={styles.planName}>
|
<div className={styles.metadata}>
|
||||||
{tag === TenantTag.Development ? (
|
<div className={styles.region}>
|
||||||
<DynamicT forKey="subscription.no_subscription" />
|
<RegionFlag />
|
||||||
) : (
|
<span>{regionName}</span>
|
||||||
|
</div>
|
||||||
|
<span>{t(`tenants.full_env_tag.${tag}`)}</span>
|
||||||
|
{tag !== TenantTag.Development && (
|
||||||
<SkuName skuId={planId} isEnterprisePlan={isEnterprisePlan} />
|
<SkuName skuId={planId} isEnterprisePlan={isEnterprisePlan} />
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -7,6 +7,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.region {
|
.region {
|
||||||
|
justify-content: start;
|
||||||
font: var(--font-label-1);
|
font: var(--font-label-1);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
import { useContext } from 'react';
|
import { useContext } from 'react';
|
||||||
import { Trans, useTranslation } from 'react-i18next';
|
import { Trans, useTranslation } from 'react-i18next';
|
||||||
|
|
||||||
import Region from '@/components/Region';
|
import Region, { regionDisplayNameMap } from '@/components/Region';
|
||||||
import { trustAndSecurityLink } from '@/consts';
|
import { trustAndSecurityLink } from '@/consts';
|
||||||
import { TenantsContext } from '@/contexts/TenantsProvider';
|
import { TenantsContext } from '@/contexts/TenantsProvider';
|
||||||
import TextLink from '@/ds-components/TextLink';
|
import TextLink from '@/ds-components/TextLink';
|
||||||
|
@ -26,7 +26,7 @@ function TenantRegion() {
|
||||||
a: <TextLink targetBlank="noopener" href={trustAndSecurityLink} />,
|
a: <TextLink targetBlank="noopener" href={trustAndSecurityLink} />,
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{t('tenants.settings.tenant_region_tip', { region: regionName })}
|
{t('tenants.settings.tenant_region_tip', { region: regionDisplayNameMap[regionName] })}
|
||||||
</Trans>
|
</Trans>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in a new issue