Fix margin on DeleteModal overlay (#998)

* Fix margin on DeleteModal overlay

* Update chromatic ci triggers

* Update chromatic ci triggers

.github/workflows/ci-chromatic.yaml

@@ -5,9 +5,10 @@ on:
     branches:
       - main
   pull_request_target:
+    types: [labeled, opened, edited]
 jobs:
   chromatic-deployment:
-    if: ${{ github.event.label.name == 'run-chromatic' || github.event_name == 'push' }}
+    if: ${{ contains(github.event.*.labels.*.name, 'run-chromatic') }} || github.event_name == 'push' }}
     runs-on: ubuntu-latest
     env:
       REACT_APP_API_URL: http://127.0.0.1:3000/graphql

front/src/modules/settings/profile/components/DeleteAccount.tsx

@@ -4,7 +4,7 @@ import { useNavigate } from 'react-router-dom';
 import { useAuth } from '@/auth/hooks/useAuth';
 import { AppPath } from '@/types/AppPath';
 import { ButtonVariant } from '@/ui/button/components/Button';
-import { SubSectionTitle } from '@/ui/title/components/SubSectionTitle';
+import { H2Title } from '@/ui/title/components/H2Title';
 import { useDeleteUserAccountMutation } from '~/generated/graphql';
 
 import { DeleteModal, StyledDeleteButton } from './DeleteModal';
@@ -29,7 +29,7 @@ export function DeleteAccount() {
 
   return (
     <>
-      <SubSectionTitle
+      <H2Title
         title="Danger zone"
         description="Delete account and all the associated data"
       />

front/src/modules/settings/profile/components/DeleteModal.tsx

@@ -7,6 +7,8 @@ import { currentUserState } from '@/auth/states/currentUserState';
 import { Button, ButtonVariant } from '@/ui/button/components/Button';
 import { TextInput } from '@/ui/input/components/TextInput';
 import { Modal } from '@/ui/modal/components/Modal';
+import { Section, SectionAlignment } from '@/ui/section/components/Section';
+import { H1Title, H1TitleFontColor } from '@/ui/title/components/H1Title';
 import { debounce } from '~/utils/debounce';
 
 interface DeleteModalProps {
@@ -18,22 +20,6 @@ interface DeleteModalProps {
   deleteButtonText?: string;
 }
 
-const StyledTitle = styled.div`
-  font-size: ${({ theme }) => theme.font.size.lg};
-  font-weight: ${({ theme }) => theme.font.weight.semiBold};
-`;
-
-const StyledSubtitle = styled.div`
-  text-align: center;
-`;
-
-const StyledModal = styled(Modal)`
-  color: ${({ theme }) => theme.font.color.primary};
-  > * + * {
-    margin-top: ${({ theme }) => theme.spacing(8)};
-  }
-`;
-
 const StyledCenteredButton = styled(Button)`
   justify-content: center;
 `;
@@ -77,7 +63,7 @@ export function DeleteModal({
   return (
     <AnimatePresence mode="wait">
       <LayoutGroup>
-        <StyledModal
+        <Modal
           isOpen={isOpen}
           onOutsideClick={() => {
             if (isOpen) {
@@ -85,8 +71,9 @@ export function DeleteModal({
             }
           }}
         >
-          <StyledTitle>{title}</StyledTitle>
+          <H1Title title={title} fontColor={H1TitleFontColor.Primary} />
-          <StyledSubtitle>{subtitle}</StyledSubtitle>
+          <Section alignment={SectionAlignment.Center}>{subtitle}</Section>
+          <Section>
             <TextInput
               value={email}
               onChange={handleEmailChange}
@@ -94,6 +81,7 @@ export function DeleteModal({
               fullWidth
               key={'email-' + userEmail}
             />
+          </Section>
           <StyledDeleteButton
             onClick={handleConfirmDelete}
             variant={ButtonVariant.Secondary}
@@ -110,7 +98,7 @@ export function DeleteModal({
               marginTop: 10,
             }}
           />
-        </StyledModal>
+        </Modal>
       </LayoutGroup>
     </AnimatePresence>
   );

front/src/modules/settings/profile/components/DeleteWorkspace.tsx

@@ -4,7 +4,7 @@ import { useNavigate } from 'react-router-dom';
 import { useAuth } from '@/auth/hooks/useAuth';
 import { AppPath } from '@/types/AppPath';
 import { ButtonVariant } from '@/ui/button/components/Button';
-import { SubSectionTitle } from '@/ui/title/components/SubSectionTitle';
+import { H2Title } from '@/ui/title/components/H2Title';
 import { useDeleteCurrentWorkspaceMutation } from '~/generated/graphql';
 
 import { DeleteModal, StyledDeleteButton } from './DeleteModal';
@@ -29,10 +29,7 @@ export function DeleteWorkspace() {
 
   return (
     <>
-      <SubSectionTitle
+      <H2Title title="Danger zone" description="Delete your whole workspace" />
-        title="Danger zone"
-        description="Delete your whole workspace"
-      />
       <StyledDeleteButton
         onClick={() => setIsDeleteWorkSpaceModalOpen(true)}
         variant={ButtonVariant.Secondary}

front/src/modules/ui/button/components/__stories__/Button.stories.tsx

@@ -50,7 +50,8 @@ export const Sizes: Story = {
     size: { control: false },
   },
   parameters: {
-    catalog: [
+    catalog: {
+      dimensions: [
         {
           name: 'sizes',
           values: Object.values(ButtonSize),
@@ -58,6 +59,7 @@ export const Sizes: Story = {
         },
       ],
     },
+  },
   decorators: [CatalogDecorator],
 };
 
@@ -68,7 +70,8 @@ export const Variants: Story = {
   },
   parameters: {
     pseudo: { hover: ['.hover'], active: ['.active'], focus: ['.focus'] },
-    catalog: [
+    catalog: {
+      dimensions: [
         {
           name: 'state',
           values: ['default', 'disabled', 'hover', 'active', 'focus'],
@@ -85,6 +88,7 @@ export const Variants: Story = {
         },
       ],
     },
+  },
   decorators: [CatalogDecorator],
 };
 
@@ -93,7 +97,8 @@ export const Positions: Story = {
     position: { control: false },
   },
   parameters: {
-    catalog: [
+    catalog: {
+      dimensions: [
         {
           name: 'positions',
           values: ['none', ...Object.values(ButtonPosition)],
@@ -102,12 +107,14 @@ export const Positions: Story = {
         },
       ],
     },
+  },
   decorators: [CatalogDecorator],
 };
 
 export const WithAdornments: Story = {
   parameters: {
-    catalog: [
+    catalog: {
+      dimensions: [
         {
           name: 'adornments',
           values: ['with icon', 'with soon pill'],
@@ -118,5 +125,6 @@ export const WithAdornments: Story = {
         },
       ],
     },
+  },
   decorators: [CatalogDecorator],
 };

front/src/modules/ui/chip/components/__stories__/Chip.stories.tsx

@@ -38,7 +38,8 @@ export const Catalog: Story = {
   },
   parameters: {
     pseudo: { hover: ['.hover'], active: ['.active'] },
-    catalog: [
+    catalog: {
+      dimensions: [
         {
           name: 'states',
           values: ['default', 'hover', 'active', 'disabled'],
@@ -62,5 +63,6 @@ export const Catalog: Story = {
         },
       ],
     },
+  },
   decorators: [CatalogDecorator],
 };

front/src/modules/ui/input/components/__stories__/Checkbox.stories.tsx

@@ -39,7 +39,8 @@ export const Catalog: Story = {
     shape: { control: false },
   },
   parameters: {
-    catalog: [
+    catalog: {
+      dimensions: [
         {
           name: 'state',
           values: ['unchecked', 'checked', 'indeterminate'],
@@ -70,5 +71,6 @@ export const Catalog: Story = {
         },
       ],
     },
+  },
   decorators: [CatalogDecorator],
 };

front/src/modules/ui/progress-bar/components/__stories__/ProgressBar.stories.tsx

@@ -35,7 +35,8 @@ export const Catalog = {
     autoStart: defaultArgTypes,
   },
   parameters: {
-    catalog: [
+    catalog: {
+      dimensions: [
         {
           name: 'animation',
           values: [true, false],
@@ -56,5 +57,6 @@ export const Catalog = {
         },
       ],
     },
+  },
   decorators: [CatalogDecorator],
 };

front/src/modules/ui/section/components/Section.tsx

@@ -0,0 +1,35 @@
+import { ReactNode } from 'react';
+import styled from '@emotion/styled';
+
+type OwnProps = {
+  children: ReactNode;
+  alignment?: SectionAlignment;
+  fullWidth?: boolean;
+};
+
+export enum SectionAlignment {
+  Left = 'left',
+  Center = 'center',
+}
+
+const StyledSection = styled.div<{
+  alignment: SectionAlignment;
+  fullWidth: boolean;
+}>`
+  margin-bottom: ${({ theme }) => theme.spacing(4)};
+  margin-top: ${({ theme }) => theme.spacing(4)};
+  text-align: ${({ alignment }) => alignment};
+  width: ${({ fullWidth }) => (fullWidth ? '100%' : 'auto')};
+`;
+
+export function Section({
+  children,
+  alignment = SectionAlignment.Left,
+  fullWidth = true,
+}: OwnProps) {
+  return (
+    <StyledSection alignment={alignment} fullWidth={fullWidth}>
+      {children}
+    </StyledSection>
+  );
+}

front/src/modules/ui/tab/components/__stories__/Tab.stories.tsx

@@ -29,7 +29,8 @@ export const Catalog: Story = {
   },
   parameters: {
     pseudo: { hover: ['.hover'], active: ['.active'] },
-    catalog: [
+    catalog: {
+      dimensions: [
         {
           name: 'states',
           values: ['default', 'hover', 'active'],
@@ -43,5 +44,6 @@ export const Catalog: Story = {
         },
       ],
     },
+  },
   decorators: [CatalogDecorator],
 };

front/src/modules/ui/title/components/H1Title.tsx

@@ -0,0 +1,30 @@
+import styled from '@emotion/styled';
+
+type OwnProps = {
+  title: string;
+  fontColor?: H1TitleFontColor;
+};
+
+export enum H1TitleFontColor {
+  Primary = 'primary',
+  Secondary = 'secondary',
+  Tertiary = 'tertiary',
+}
+
+const StyledTitle = styled.h2<{
+  fontColor: H1TitleFontColor;
+}>`
+  color: ${({ theme, fontColor }) => theme.font.color[fontColor]};
+  font-size: ${({ theme }) => theme.font.size.lg};
+  font-weight: ${({ theme }) => theme.font.weight.semiBold};
+  line-height: ${({ theme }) => theme.text.lineHeight.md};
+  margin: 0;
+  margin-bottom: ${({ theme }) => theme.spacing(4)};
+`;
+
+export function H1Title({
+  title,
+  fontColor = H1TitleFontColor.Tertiary,
+}: OwnProps) {
+  return <StyledTitle fontColor={fontColor}>{title}</StyledTitle>;
+}

front/src/modules/ui/title/components/H2Title.tsx

@@ -23,10 +23,10 @@ const StyledDescription = styled.h3`
   font-size: ${({ theme }) => theme.font.size.md};
   font-weight: ${({ theme }) => theme.font.weight.regular};
   margin: 0;
-  margin-top: ${({ theme }) => theme.spacing(1)};
+  margin-top: ${({ theme }) => theme.spacing(3)};
 `;
 
-export function SubSectionTitle({ title, description }: Props) {
+export function H2Title({ title, description }: Props) {
   return (
     <StyledContainer>
       <StyledTitle>{title}</StyledTitle>

front/src/modules/ui/title/components/MainSectionTitle.tsx

@@ -1,18 +0,0 @@
-import { ReactNode } from 'react';
-import styled from '@emotion/styled';
-
-type OwnProps = {
-  children: ReactNode;
-};
-
-const StyledMainSectionTitle = styled.h2`
-  color: ${({ theme }) => theme.font.color.tertiary};
-  font-size: ${({ theme }) => theme.font.size.xl};
-  font-weight: ${({ theme }) => theme.font.weight.semiBold};
-  line-height: ${({ theme }) => theme.text.lineHeight.lg};
-  margin: 0;
-`;
-
-export function MainSectionTitle({ children }: OwnProps) {
-  return <StyledMainSectionTitle>{children}</StyledMainSectionTitle>;
-}

front/src/modules/ui/title/components/__stories__/H1Title.stories.tsx

@@ -0,0 +1,42 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { CatalogDecorator } from '~/testing/decorators/CatalogDecorator';
+import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
+
+import { H1Title, H1TitleFontColor } from '../H1Title';
+
+const meta: Meta<typeof H1Title> = {
+  title: 'UI/Title/H1Title',
+  component: H1Title,
+  decorators: [ComponentDecorator],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof H1Title>;
+
+const args = {
+  title: 'Title',
+  fontColor: H1TitleFontColor.Primary,
+};
+
+export const Default: Story = {
+  args,
+  decorators: [ComponentDecorator],
+};
+
+export const Catalog: Story = {
+  args,
+  decorators: [CatalogDecorator],
+  parameters: {
+    catalog: {
+      dimensions: [
+        {
+          name: 'FontColor',
+          values: Object.values(H1TitleFontColor),
+          props: (fontColor: H1TitleFontColor) => ({ fontColor }),
+        },
+      ],
+    },
+  },
+};

front/src/modules/ui/title/components/__stories__/H2Title.stories.tsx

@@ -2,16 +2,16 @@ import type { Meta, StoryObj } from '@storybook/react';
 
 import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
 
-import { SubSectionTitle } from '../SubSectionTitle';
+import { H2Title } from '../H2Title';
 
 const args = {
-  title: 'Lorem ipsum',
+  title: 'Sub title',
   description: 'Lorem ipsum dolor sit amet',
 };
 
-const meta: Meta<typeof SubSectionTitle> = {
+const meta: Meta<typeof H2Title> = {
-  title: 'UI/Title/SubSectionTitle',
+  title: 'UI/Title/H2Title',
-  component: SubSectionTitle,
+  component: H2Title,
   decorators: [ComponentDecorator],
   args: {
     title: args.title,
@@ -20,7 +20,7 @@ const meta: Meta<typeof SubSectionTitle> = {
 
 export default meta;
 
-type Story = StoryObj<typeof SubSectionTitle>;
+type Story = StoryObj<typeof H2Title>;
 
 export const Default: Story = {
   decorators: [ComponentDecorator],

front/src/modules/ui/title/components/__stories__/MainSectionTitle.stories.tsx

@@ -1,24 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
-
-import { MainSectionTitle } from '../MainSectionTitle';
-
-const meta: Meta<typeof MainSectionTitle> = {
-  title: 'UI/Title/MainSectionTitle',
-  component: MainSectionTitle,
-  decorators: [ComponentDecorator],
-};
-
-export default meta;
-
-type Story = StoryObj<typeof MainSectionTitle>;
-
-const args = {
-  children: 'Lorem ipsum',
-};
-
-export const Default: Story = {
-  args,
-  decorators: [ComponentDecorator],
-};

front/src/modules/ui/tooltip/__stories__/Tooltip.stories.tsx

@@ -42,7 +42,8 @@ export const Catalog: Story = {
     });
   },
   parameters: {
-    catalog: [
+    catalog: {
+      dimensions: [
         {
           name: 'anchorSelect',
           values: Object.values(TooltipPosition),
@@ -53,5 +54,6 @@ export const Catalog: Story = {
         },
       ],
     },
+  },
   decorators: [CatalogDecorator],
 };

front/src/pages/auth/CreateProfile.tsx

@@ -17,7 +17,7 @@ import { MainButton } from '@/ui/button/components/MainButton';
 import { useScopedHotkeys } from '@/ui/hotkey/hooks/useScopedHotkeys';
 import { TextInput } from '@/ui/input/components/TextInput';
 import { useSnackBar } from '@/ui/snack-bar/hooks/useSnackBar';
-import { SubSectionTitle } from '@/ui/title/components/SubSectionTitle';
+import { H2Title } from '@/ui/title/components/H2Title';
 import { GET_CURRENT_USER } from '@/users/queries';
 import { useUpdateUserMutation } from '~/generated/graphql';
 
@@ -128,11 +128,11 @@ export function CreateProfile() {
       <SubTitle>How you'll be identified on the app.</SubTitle>
       <StyledContentContainer>
         <StyledSectionContainer>
-          <SubSectionTitle title="Picture" />
+          <H2Title title="Picture" />
           <ProfilePictureUploader />
         </StyledSectionContainer>
         <StyledSectionContainer>
-          <SubSectionTitle
+          <H2Title
             title="Name"
             description="Your name as it will be displayed on the app"
           />

front/src/pages/auth/CreateWorkspace.tsx

@@ -14,7 +14,7 @@ import { MainButton } from '@/ui/button/components/MainButton';
 import { useScopedHotkeys } from '@/ui/hotkey/hooks/useScopedHotkeys';
 import { TextInput } from '@/ui/input/components/TextInput';
 import { useSnackBar } from '@/ui/snack-bar/hooks/useSnackBar';
-import { SubSectionTitle } from '@/ui/title/components/SubSectionTitle';
+import { H2Title } from '@/ui/title/components/H2Title';
 import { GET_CURRENT_USER } from '@/users/queries';
 import { useUpdateWorkspaceMutation } from '~/generated/graphql';
 
@@ -107,11 +107,11 @@ export function CreateWorkspace() {
       </SubTitle>
       <StyledContentContainer>
         <StyledSectionContainer>
-          <SubSectionTitle title="Workspace logo" />
+          <H2Title title="Workspace logo" />
           <WorkspaceLogoUploader />
         </StyledSectionContainer>
         <StyledSectionContainer>
-          <SubSectionTitle
+          <H2Title
             title="Workspace name"
             description="The name of your organization"
           />

front/src/pages/settings/SettingsExperience.tsx

@@ -3,9 +3,10 @@ import styled from '@emotion/styled';
 import { ColorSchemePicker } from '@/ui/color-scheme/components/ColorSchemePicker';
 import { IconSettings } from '@/ui/icon';
 import { SubMenuTopBarContainer } from '@/ui/layout/components/SubMenuTopBarContainer';
+import { Section } from '@/ui/section/components/Section';
 import { useColorScheme } from '@/ui/themes/hooks/useColorScheme';
-import { MainSectionTitle } from '@/ui/title/components/MainSectionTitle';
+import { H1Title } from '@/ui/title/components/H1Title';
-import { SubSectionTitle } from '@/ui/title/components/SubSectionTitle';
+import { H2Title } from '@/ui/title/components/H2Title';
 
 const StyledContainer = styled.div`
   display: flex;
@@ -13,15 +14,6 @@ const StyledContainer = styled.div`
   padding: ${({ theme }) => theme.spacing(8)};
   padding-bottom: ${({ theme }) => theme.spacing(10)};
   width: 350px;
-  > * + * {
-    margin-top: ${({ theme }) => theme.spacing(8)};
-  }
-`;
-
-const StyledSectionContainer = styled.div`
-  > * + * {
-    margin-top: ${({ theme }) => theme.spacing(4)};
-  }
 `;
 
 export function SettingsExperience() {
@@ -29,15 +21,13 @@ export function SettingsExperience() {
 
   return (
     <SubMenuTopBarContainer icon={<IconSettings size={16} />} title="Settings">
-      <div>
       <StyledContainer>
-          <MainSectionTitle>Experience</MainSectionTitle>
+        <H1Title title="Experience" />
-          <StyledSectionContainer>
+        <Section>
-            <SubSectionTitle title="Appearance" />
+          <H2Title title="Appearance" />
           <ColorSchemePicker value={colorScheme} onChange={setColorScheme} />
-          </StyledSectionContainer>
+        </Section>
       </StyledContainer>
-      </div>
     </SubMenuTopBarContainer>
   );
 }

front/src/pages/settings/SettingsProfile.tsx

@@ -6,24 +6,18 @@ import { NameFields } from '@/settings/profile/components/NameFields';
 import { ProfilePictureUploader } from '@/settings/profile/components/ProfilePictureUploader';
 import { IconSettings } from '@/ui/icon';
 import { SubMenuTopBarContainer } from '@/ui/layout/components/SubMenuTopBarContainer';
-import { MainSectionTitle } from '@/ui/title/components/MainSectionTitle';
+import { Section } from '@/ui/section/components/Section';
-import { SubSectionTitle } from '@/ui/title/components/SubSectionTitle';
+import { H1Title } from '@/ui/title/components/H1Title';
+import { H2Title } from '@/ui/title/components/H2Title';
 
 const StyledContainer = styled.div`
   display: flex;
   flex-direction: column;
+  height: fit-content;
   padding: ${({ theme }) => theme.spacing(8)};
   padding-bottom: ${({ theme }) => theme.spacing(10)};
+  padding-bottom: 30px;
   width: 350px;
-  > * + * {
-    margin-top: ${({ theme }) => theme.spacing(8)};
-  }
-`;
-
-const StyledSectionContainer = styled.div`
-  > * + * {
-    margin-top: ${({ theme }) => theme.spacing(4)};
-  }
 `;
 
 export function SettingsProfile() {
@@ -31,29 +25,28 @@ export function SettingsProfile() {
     <SubMenuTopBarContainer icon={<IconSettings size={16} />} title="Settings">
       <>
         <StyledContainer>
-          <MainSectionTitle>Profile</MainSectionTitle>
+          <H1Title title="Profile" />
-          <StyledSectionContainer>
+          <Section>
-            <SubSectionTitle title="Picture" />
+            <H2Title title="Picture" />
             <ProfilePictureUploader />
-          </StyledSectionContainer>
+          </Section>
-          <StyledSectionContainer>
+          <Section>
-            <SubSectionTitle
+            <H2Title
               title="Name"
               description="Your name as it will be displayed"
             />
             <NameFields />
-          </StyledSectionContainer>
+          </Section>
-          <StyledSectionContainer>
+          <Section>
-            <SubSectionTitle
+            <H2Title
               title="Email"
               description="The email associated to your account"
             />
             <EmailField />
-          </StyledSectionContainer>
+          </Section>
-
+          <Section>
-          <StyledSectionContainer>
             <DeleteAccount />
-          </StyledSectionContainer>
+          </Section>
         </StyledContainer>
       </>
     </SubMenuTopBarContainer>

front/src/pages/settings/SettingsWorkspace.tsx

@@ -5,23 +5,15 @@ import { NameField } from '@/settings/workspace/components/NameField';
 import { WorkspaceLogoUploader } from '@/settings/workspace/components/WorkspaceLogoUploader';
 import { IconSettings } from '@/ui/icon';
 import { SubMenuTopBarContainer } from '@/ui/layout/components/SubMenuTopBarContainer';
-import { MainSectionTitle } from '@/ui/title/components/MainSectionTitle';
+import { Section } from '@/ui/section/components/Section';
-import { SubSectionTitle } from '@/ui/title/components/SubSectionTitle';
+import { H1Title } from '@/ui/title/components/H1Title';
+import { H2Title } from '@/ui/title/components/H2Title';
 
 const StyledContainer = styled.div`
   display: flex;
   flex-direction: column;
   padding: ${({ theme }) => theme.spacing(8)};
   width: 350px;
-  > * + * {
-    margin-top: ${({ theme }) => theme.spacing(8)};
-  }
-`;
-
-const StyledSectionContainer = styled.div`
-  > * + * {
-    margin-top: ${({ theme }) => theme.spacing(4)};
-  }
 `;
 
 export function SettingsWorksapce() {
@@ -29,22 +21,19 @@ export function SettingsWorksapce() {
     <SubMenuTopBarContainer icon={<IconSettings size={16} />} title="Settings">
       <div>
         <StyledContainer>
-          <MainSectionTitle>General</MainSectionTitle>
+          <H1Title title="General" />
-          <StyledSectionContainer>
+          <Section>
-            <SubSectionTitle title="Picture" />
+            <H2Title title="Picture" />
             <WorkspaceLogoUploader />
-          </StyledSectionContainer>
+          </Section>
-          <StyledSectionContainer>
+          <Section>
-            <SubSectionTitle
+            <H2Title title="Name" description="Name of your workspace" />
-              title="Name"
-              description="Name of your workspace"
-            />
             <NameField />
-          </StyledSectionContainer>
+          </Section>
 
-          <StyledSectionContainer>
+          <Section>
             <DeleteWorkspace />
-          </StyledSectionContainer>
+          </Section>
         </StyledContainer>
       </div>
     </SubMenuTopBarContainer>

front/src/pages/settings/SettingsWorkspaceMembers.tsx

@@ -10,8 +10,9 @@ import {
 } from '@/ui/button/components/Button';
 import { IconSettings, IconTrash } from '@/ui/icon';
 import { SubMenuTopBarContainer } from '@/ui/layout/components/SubMenuTopBarContainer';
-import { MainSectionTitle } from '@/ui/title/components/MainSectionTitle';
+import { Section } from '@/ui/section/components/Section';
-import { SubSectionTitle } from '@/ui/title/components/SubSectionTitle';
+import { H1Title } from '@/ui/title/components/H1Title';
+import { H2Title } from '@/ui/title/components/H2Title';
 import { WorkspaceInviteLink } from '@/workspace/components/WorkspaceInviteLink';
 import { WorkspaceMemberCard } from '@/workspace/components/WorkspaceMemberCard';
 import {
@@ -22,11 +23,9 @@ import {
 const StyledContainer = styled.div`
   display: flex;
   flex-direction: column;
+  margin-top: ${({ theme }) => theme.spacing(8)};
   padding: ${({ theme }) => theme.spacing(8)};
   width: 350px;
-  > * + * {
-    margin-top: ${({ theme }) => theme.spacing(8)};
-  }
 `;
 
 const ButtonContainer = styled.div`
@@ -81,19 +80,20 @@ export function SettingsWorkspaceMembers() {
   return (
     <SubMenuTopBarContainer icon={<IconSettings size={16} />} title="Settings">
       <StyledContainer>
-        <MainSectionTitle>Members</MainSectionTitle>
+        <H1Title title="Members" />
         {workspace?.inviteHash && (
-          <>
+          <Section>
-            <SubSectionTitle
+            <H2Title
               title="Invite"
               description="Send an invitation to use Twenty"
             />
             <WorkspaceInviteLink
               inviteLink={`${window.location.origin}/invite/${workspace?.inviteHash}`}
             />
-          </>
+          </Section>
         )}
-        <SubSectionTitle
+        <Section>
+          <H2Title
             title="Members"
             description="Manage the members of your space here"
           />
@@ -105,7 +105,9 @@ export function SettingsWorkspaceMembers() {
                 currentUser?.id !== member.user.id && (
                   <ButtonContainer>
                     <Button
-                    onClick={() => handleRemoveWorkspaceMember(member.user.id)}
+                      onClick={() =>
+                        handleRemoveWorkspaceMember(member.user.id)
+                      }
                       variant={ButtonVariant.Tertiary}
                       size={ButtonSize.Small}
                       icon={<IconTrash size={theme.icon.size.md} />}
@@ -115,6 +117,7 @@ export function SettingsWorkspaceMembers() {
               }
             />
           ))}
+        </Section>
       </StyledContainer>
     </SubMenuTopBarContainer>
   );

front/src/testing/decorators/CatalogDecorator.tsx

@@ -57,6 +57,10 @@ const RowContainer = styled.div`
 `;
 
 export const ElementContainer = styled.div`
+  display: flex;
+`;
+
+export const CellContainer = styled.div`
   align-items: center;
   display: flex;
   flex-direction: column;
@@ -70,13 +74,15 @@ const emptyVariable = {
 };
 
 export const CatalogDecorator: Decorator = (Story, context) => {
-  const { catalog } = context.parameters;
+  const {
+    catalog: { dimensions, options },
+  } = context.parameters;
   const [
     variable1,
     variable2 = emptyVariable,
     variable3 = emptyVariable,
     variable4 = emptyVariable,
-  ] = catalog;
+  ] = dimensions;
 
   return (
     <StyledContainer>
@@ -96,12 +102,14 @@ export const CatalogDecorator: Decorator = (Story, context) => {
                     <RowTitle>{variable2.labels?.(value2) || value2}</RowTitle>
                   )}
                   {variable1.values.map((value1: string) => (
-                    <ElementContainer key={value1} id={value1}>
+                    <CellContainer key={value1} id={value1}>
                       {(variable1.labels?.(value1) || value1) && (
                         <ElementTitle>
                           {variable1.labels?.(value1) || value1}
                         </ElementTitle>
                       )}
+
+                      <ElementContainer {...options?.elementContainer}>
                         <Story
                           args={{
                             ...context.args,
@@ -112,6 +120,7 @@ export const CatalogDecorator: Decorator = (Story, context) => {
                           }}
                         />
                       </ElementContainer>
+                    </CellContainer>
                   ))}
                 </RowContainer>
               ))}