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:
Thomas des Francs
2026-06-24 18:24:39 +02:00
committed by GitHub
parent cc21160d83
commit 9ed0d85954
4 changed files with 16 additions and 7 deletions
@@ -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';
+1
View File
@@ -484,6 +484,7 @@ export {
IconWebhook,
IconWindow,
IconWorld,
IconWorldWww,
IconX,
} from './components/TablerIcons';
export { ThinkingOrbitLoaderIcon } from './components/ThinkingOrbitLoaderIcon';