Update workspace domain card layout (#22108)
## What changed - Render the Workspace domain cards side by side instead of stacked. - Keep both domain cards full width within the row. - Rename the section title from `Workspace Domain` to `Workspace domain`. - Use the `www` globe icon for Subdomain while keeping the standard globe for Custom Domain. - Export `IconWorldWww` from `twenty-ui/icon` for front-end consumers. <img width="1029" height="220" alt="image" src="https://github.com/user-attachments/assets/83ad8a29-d63c-42bb-9233-7754d1e7adf7" /> ## Why This matches the updated settings design for the Workspace domain section and makes the Subdomain and Custom Domain options scan as sibling actions. ## Validation - Ran focused `oxlint` and `oxfmt` checks on edited files. - Built `twenty-ui` successfully. - Ran `twenty-front` typecheck successfully. <!-- This is an auto-generated description by cubic. --> <a href="https://cubic.dev/pr/twentyhq/twenty/pull/22108?utm_source=github" target="_blank" rel="noopener noreferrer" data-no-image-dialog="true"><picture><source media="(prefers-color-scheme: dark)" srcset="https://www.cubic.dev/buttons/review-in-cubic-dark.svg"><source media="(prefers-color-scheme: light)" srcset="https://www.cubic.dev/buttons/review-in-cubic-light.svg"><img alt="Review in cubic" src="https://www.cubic.dev/buttons/review-in-cubic-dark.svg"></picture></a> <!-- End of auto-generated description by cubic. -->
This commit is contained in:
committed by
GitHub
parent
cc21160d83
commit
9ed0d85954
+13
-6
@@ -8,14 +8,18 @@ import { useLingui } from '@lingui/react/macro';
|
||||
import { SettingsPath } from 'twenty-shared/types';
|
||||
import { getSettingsPath } from 'twenty-shared/utils';
|
||||
import { Status } from 'twenty-ui/data-display';
|
||||
import { IconWorld } from 'twenty-ui/icon';
|
||||
import { IconWorld, IconWorldWww } from 'twenty-ui/icon';
|
||||
import { UndecoratedLink } from 'twenty-ui/navigation';
|
||||
import { themeCssVariables } from 'twenty-ui/theme-constants';
|
||||
import { MOBILE_VIEWPORT, themeCssVariables } from 'twenty-ui/theme-constants';
|
||||
|
||||
const StyledContainer = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-direction: row;
|
||||
gap: ${themeCssVariables.spacing[2]};
|
||||
|
||||
@media (max-width: ${MOBILE_VIEWPORT}px) {
|
||||
flex-direction: column;
|
||||
}
|
||||
`;
|
||||
|
||||
export const SettingsWorkspaceDomainCard = () => {
|
||||
@@ -34,11 +38,14 @@ export const SettingsWorkspaceDomainCard = () => {
|
||||
|
||||
return (
|
||||
<StyledContainer>
|
||||
<UndecoratedLink to={getSettingsPath(SettingsPath.Subdomain)}>
|
||||
<SettingsCard title={t`Subdomain`} Icon={<IconWorld />} />
|
||||
<UndecoratedLink to={getSettingsPath(SettingsPath.Subdomain)} fullWidth>
|
||||
<SettingsCard title={t`Subdomain`} Icon={<IconWorldWww />} />
|
||||
</UndecoratedLink>
|
||||
{isCloudflareIntegrationEnabled && (
|
||||
<UndecoratedLink to={getSettingsPath(SettingsPath.CustomDomain)}>
|
||||
<UndecoratedLink
|
||||
to={getSettingsPath(SettingsPath.CustomDomain)}
|
||||
fullWidth
|
||||
>
|
||||
<SettingsCard
|
||||
title={t`Custom Domain`}
|
||||
Icon={<IconWorld />}
|
||||
|
||||
@@ -68,7 +68,7 @@ export const SettingsGeneral = () => {
|
||||
{isMultiWorkspaceEnabled && (
|
||||
<Section>
|
||||
<H2Title
|
||||
title={t`Workspace Domain`}
|
||||
title={t`Workspace domain`}
|
||||
description={t`Edit your subdomain name or set a custom domain.`}
|
||||
/>
|
||||
<SettingsWorkspaceDomainCard />
|
||||
|
||||
@@ -430,6 +430,7 @@ export {
|
||||
IconWebhook,
|
||||
IconWindow,
|
||||
IconWorld,
|
||||
IconWorldWww,
|
||||
IconX,
|
||||
} from '@tabler/icons-react';
|
||||
|
||||
|
||||
@@ -484,6 +484,7 @@ export {
|
||||
IconWebhook,
|
||||
IconWindow,
|
||||
IconWorld,
|
||||
IconWorldWww,
|
||||
IconX,
|
||||
} from './components/TablerIcons';
|
||||
export { ThinkingOrbitLoaderIcon } from './components/ThinkingOrbitLoaderIcon';
|
||||
|
||||
Reference in New Issue
Block a user