Fix margin on DeleteModal overlay (#998)

* Fix margin on DeleteModal overlay * Update chromatic ci triggers * Update chromatic ci triggers
2023-07-30 13:17:33 -07:00
parent be835af48b
commit eafa30a9cf
24 changed files with 388 additions and 335 deletions
--- a/.github/workflows/ci-chromatic.yaml
+++ b/.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
--- a/front/src/modules/settings/profile/components/DeleteAccount.tsx
+++ b/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"
      />
--- a/front/src/modules/settings/profile/components/DeleteModal.tsx
+++ b/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,15 +71,17 @@ export function DeleteModal({
            }
          }}
        >
-          <StyledTitle>{title}</StyledTitle>
-          <StyledSubtitle>{subtitle}</StyledSubtitle>
-          <TextInput
-            value={email}
-            onChange={handleEmailChange}
-            placeholder={userEmail}
-            fullWidth
-            key={'email-' + userEmail}
-          />
+          <H1Title title={title} fontColor={H1TitleFontColor.Primary} />
+          <Section alignment={SectionAlignment.Center}>{subtitle}</Section>
+          <Section>
+            <TextInput
+              value={email}
+              onChange={handleEmailChange}
+              placeholder={userEmail}
+              fullWidth
+              key={'email-' + userEmail}
+            />
+          </Section>
          <StyledDeleteButton
            onClick={handleConfirmDelete}
            variant={ButtonVariant.Secondary}
@ -110,7 +98,7 @@ export function DeleteModal({
              marginTop: 10,
            }}
          />
-        </StyledModal>
+        </Modal>
      </LayoutGroup>
    </AnimatePresence>
  );
--- a/front/src/modules/settings/profile/components/DeleteWorkspace.tsx
+++ b/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
-        title="Danger zone"
-        description="Delete your whole workspace"
-      />
+      <H2Title title="Danger zone" description="Delete your whole workspace" />
      <StyledDeleteButton
        onClick={() => setIsDeleteWorkSpaceModalOpen(true)}
        variant={ButtonVariant.Secondary}
--- a/front/src/modules/ui/button/components/stories/Button.stories.tsx
+++ b/front/src/modules/ui/button/components/stories/Button.stories.tsx
@ -50,13 +50,15 @@ export const Sizes: Story = {
    size: { control: false },
  },
  parameters: {
-    catalog: [
-      {
-        name: 'sizes',
-        values: Object.values(ButtonSize),
-        props: (size: ButtonSize) => ({ size }),
-      },
-    ],
+    catalog: {
+      dimensions: [
+        {
+          name: 'sizes',
+          values: Object.values(ButtonSize),
+          props: (size: ButtonSize) => ({ size }),
+        },
+      ],
+    },
  },
  decorators: [CatalogDecorator],
 };
@ -68,22 +70,24 @@ export const Variants: Story = {
  },
  parameters: {
    pseudo: { hover: ['.hover'], active: ['.active'], focus: ['.focus'] },
-    catalog: [
-      {
-        name: 'state',
-        values: ['default', 'disabled', 'hover', 'active', 'focus'],
-        props: (state: string) => {
-          if (state === 'disabled') return { disabled: true };
-          if (state === 'default') return {};
-          return { className: state };
+    catalog: {
+      dimensions: [
+        {
+          name: 'state',
+          values: ['default', 'disabled', 'hover', 'active', 'focus'],
+          props: (state: string) => {
+            if (state === 'disabled') return { disabled: true };
+            if (state === 'default') return {};
+            return { className: state };
+          },
        },
-      },
-      {
-        name: 'variants',
-        values: Object.values(ButtonVariant),
-        props: (variant: ButtonVariant) => ({ variant }),
-      },
-    ],
+        {
+          name: 'variants',
+          values: Object.values(ButtonVariant),
+          props: (variant: ButtonVariant) => ({ variant }),
+        },
+      ],
+    },
  },
  decorators: [CatalogDecorator],
 };
@ -93,30 +97,34 @@ export const Positions: Story = {
    position: { control: false },
  },
  parameters: {
-    catalog: [
-      {
-        name: 'positions',
-        values: ['none', ...Object.values(ButtonPosition)],
-        props: (position: ButtonPosition | 'none') =>
-          position === 'none' ? {} : { position },
-      },
-    ],
+    catalog: {
+      dimensions: [
+        {
+          name: 'positions',
+          values: ['none', ...Object.values(ButtonPosition)],
+          props: (position: ButtonPosition | 'none') =>
+            position === 'none' ? {} : { position },
+        },
+      ],
+    },
  },
  decorators: [CatalogDecorator],
 };

 export const WithAdornments: Story = {
  parameters: {
-    catalog: [
-      {
-        name: 'adornments',
-        values: ['with icon', 'with soon pill'],
-        props: (value: string) =>
-          value === 'with icon'
-            ? { icon: <IconSearch size={14} /> }
-            : { soon: true },
-      },
-    ],
+    catalog: {
+      dimensions: [
+        {
+          name: 'adornments',
+          values: ['with icon', 'with soon pill'],
+          props: (value: string) =>
+            value === 'with icon'
+              ? { icon: <IconSearch size={14} /> }
+              : { soon: true },
+        },
+      ],
+    },
  },
  decorators: [CatalogDecorator],
 };
--- a/front/src/modules/ui/chip/components/stories/Chip.stories.tsx
+++ b/front/src/modules/ui/chip/components/stories/Chip.stories.tsx
@ -38,29 +38,31 @@ export const Catalog: Story = {
  },
  parameters: {
    pseudo: { hover: ['.hover'], active: ['.active'] },
-    catalog: [
-      {
-        name: 'states',
-        values: ['default', 'hover', 'active', 'disabled'],
-        props: (state: string) =>
-          state === 'default' ? {} : { className: state },
-      },
-      {
-        name: 'variants',
-        values: Object.values(ChipVariant),
-        props: (variant: ChipVariant) => ({ variant }),
-      },
-      {
-        name: 'sizes',
-        values: Object.values(ChipSize),
-        props: (size: ChipSize) => ({ size }),
-      },
-      {
-        name: 'accents',
-        values: Object.values(ChipAccent),
-        props: (accent: ChipAccent) => ({ accent }),
-      },
-    ],
+    catalog: {
+      dimensions: [
+        {
+          name: 'states',
+          values: ['default', 'hover', 'active', 'disabled'],
+          props: (state: string) =>
+            state === 'default' ? {} : { className: state },
+        },
+        {
+          name: 'variants',
+          values: Object.values(ChipVariant),
+          props: (variant: ChipVariant) => ({ variant }),
+        },
+        {
+          name: 'sizes',
+          values: Object.values(ChipSize),
+          props: (size: ChipSize) => ({ size }),
+        },
+        {
+          name: 'accents',
+          values: Object.values(ChipAccent),
+          props: (accent: ChipAccent) => ({ accent }),
+        },
+      ],
+    },
  },
  decorators: [CatalogDecorator],
 };
--- a/front/src/modules/ui/input/components/stories/Checkbox.stories.tsx
+++ b/front/src/modules/ui/input/components/stories/Checkbox.stories.tsx
@ -39,36 +39,38 @@ export const Catalog: Story = {
    shape: { control: false },
  },
  parameters: {
-    catalog: [
-      {
-        name: 'state',
-        values: ['unchecked', 'checked', 'indeterminate'],
-        props: (state: string) => {
-          if (state === 'checked') {
-            return { checked: true };
-          }
+    catalog: {
+      dimensions: [
+        {
+          name: 'state',
+          values: ['unchecked', 'checked', 'indeterminate'],
+          props: (state: string) => {
+            if (state === 'checked') {
+              return { checked: true };
+            }

-          if (state === 'indeterminate') {
-            return { indeterminate: true };
-          }
+            if (state === 'indeterminate') {
+              return { indeterminate: true };
+            }
+          },
        },
-      },
-      {
-        name: 'shape',
-        values: Object.values(CheckboxShape),
-        props: (shape: CheckboxShape) => ({ shape }),
-      },
-      {
-        name: 'variant',
-        values: Object.values(CheckboxVariant),
-        props: (variant: CheckboxVariant) => ({ variant }),
-      },
-      {
-        name: 'size',
-        values: Object.values(CheckboxSize),
-        props: (size: CheckboxSize) => ({ size }),
-      },
-    ],
+        {
+          name: 'shape',
+          values: Object.values(CheckboxShape),
+          props: (shape: CheckboxShape) => ({ shape }),
+        },
+        {
+          name: 'variant',
+          values: Object.values(CheckboxVariant),
+          props: (variant: CheckboxVariant) => ({ variant }),
+        },
+        {
+          name: 'size',
+          values: Object.values(CheckboxSize),
+          props: (size: CheckboxSize) => ({ size }),
+        },
+      ],
+    },
  },
  decorators: [CatalogDecorator],
 };
--- a/front/src/modules/ui/progress-bar/components/stories/ProgressBar.stories.tsx
+++ b/front/src/modules/ui/progress-bar/components/stories/ProgressBar.stories.tsx
@ -35,26 +35,28 @@ export const Catalog = {
    autoStart: defaultArgTypes,
  },
  parameters: {
-    catalog: [
-      {
-        name: 'animation',
-        values: [true, false],
-        props: (autoStart: string) => ({ autoStart }),
-        labels: (autoStart: string) => `AutoStart: ${autoStart}`,
-      },
-      {
-        name: 'colors',
-        values: [undefined, 'blue'],
-        props: (barColor: string) => ({ barColor }),
-        labels: (color: string) => `Color: ${color ?? 'default'}`,
-      },
-      {
-        name: 'sizes',
-        values: [undefined, 10],
-        props: (barHeight: number) => ({ barHeight }),
-        labels: (size: number) => `Size: ${size ? size + ' px' : 'default'}`,
-      },
-    ],
+    catalog: {
+      dimensions: [
+        {
+          name: 'animation',
+          values: [true, false],
+          props: (autoStart: string) => ({ autoStart }),
+          labels: (autoStart: string) => `AutoStart: ${autoStart}`,
+        },
+        {
+          name: 'colors',
+          values: [undefined, 'blue'],
+          props: (barColor: string) => ({ barColor }),
+          labels: (color: string) => `Color: ${color ?? 'default'}`,
+        },
+        {
+          name: 'sizes',
+          values: [undefined, 10],
+          props: (barHeight: number) => ({ barHeight }),
+          labels: (size: number) => `Size: ${size ? size + ' px' : 'default'}`,
+        },
+      ],
+    },
  },
  decorators: [CatalogDecorator],
 };
--- a/front/src/modules/ui/section/components/Section.tsx
+++ b/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>
+  );
+}
--- a/front/src/modules/ui/tab/components/stories/Tab.stories.tsx
+++ b/front/src/modules/ui/tab/components/stories/Tab.stories.tsx
@ -29,19 +29,21 @@ export const Catalog: Story = {
  },
  parameters: {
    pseudo: { hover: ['.hover'], active: ['.active'] },
-    catalog: [
-      {
-        name: 'states',
-        values: ['default', 'hover', 'active'],
-        props: (state: string) =>
-          state === 'default' ? {} : { className: state },
-      },
-      {
-        name: 'Active',
-        values: ['true', 'false'],
-        props: (active: string) => ({ active: active === 'true' }),
-      },
-    ],
+    catalog: {
+      dimensions: [
+        {
+          name: 'states',
+          values: ['default', 'hover', 'active'],
+          props: (state: string) =>
+            state === 'default' ? {} : { className: state },
+        },
+        {
+          name: 'Active',
+          values: ['true', 'false'],
+          props: (active: string) => ({ active: active === 'true' }),
+        },
+      ],
+    },
  },
  decorators: [CatalogDecorator],
 };
--- a/front/src/modules/ui/title/components/H1Title.tsx
+++ b/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>;
+}
--- a/front/src/modules/ui/title/components/SubSectionTitle.tsx
+++ b/front/src/modules/ui/title/components/SubSectionTitle.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>
--- a/front/src/modules/ui/title/components/MainSectionTitle.tsx
+++ b/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>;
-}
--- a/front/src/modules/ui/title/components/stories/H1Title.stories.tsx
+++ b/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 }),
+        },
+      ],
+    },
+  },
+};
--- a/front/src/modules/ui/title/components/stories/SubSectionTitle.stories.tsx
+++ b/front/src/modules/ui/title/components/stories/SubSectionTitle.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> = {
-  title: 'UI/Title/SubSectionTitle',
-  component: SubSectionTitle,
+const meta: Meta<typeof H2Title> = {
+  title: 'UI/Title/H2Title',
+  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],
--- a/front/src/modules/ui/title/components/stories/MainSectionTitle.stories.tsx
+++ b/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],
-};
--- a/front/src/modules/ui/tooltip/stories/Tooltip.stories.tsx
+++ b/front/src/modules/ui/tooltip/stories/Tooltip.stories.tsx
@ -42,16 +42,18 @@ export const Catalog: Story = {
    });
  },
  parameters: {
-    catalog: [
-      {
-        name: 'anchorSelect',
-        values: Object.values(TooltipPosition),
-        props: (anchorSelect: TooltipPosition) => ({
-          anchorSelect: `#${anchorSelect}`,
-          place: anchorSelect,
-        }),
-      },
-    ],
+    catalog: {
+      dimensions: [
+        {
+          name: 'anchorSelect',
+          values: Object.values(TooltipPosition),
+          props: (anchorSelect: TooltipPosition) => ({
+            anchorSelect: `#${anchorSelect}`,
+            place: anchorSelect,
+          }),
+        },
+      ],
+    },
  },
  decorators: [CatalogDecorator],
 };
--- a/front/src/pages/auth/CreateProfile.tsx
+++ b/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"
          />
--- a/front/src/pages/auth/CreateWorkspace.tsx
+++ b/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"
          />
--- a/front/src/pages/settings/SettingsExperience.tsx
+++ b/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 { 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;
@ -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>
-          <StyledSectionContainer>
-            <SubSectionTitle title="Appearance" />
-            <ColorSchemePicker value={colorScheme} onChange={setColorScheme} />
-          </StyledSectionContainer>
-        </StyledContainer>
-      </div>
+      <StyledContainer>
+        <H1Title title="Experience" />
+        <Section>
+          <H2Title title="Appearance" />
+          <ColorSchemePicker value={colorScheme} onChange={setColorScheme} />
+        </Section>
+      </StyledContainer>
    </SubMenuTopBarContainer>
  );
 }
--- a/front/src/pages/settings/SettingsProfile.tsx
+++ b/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 { SubSectionTitle } from '@/ui/title/components/SubSectionTitle';
+import { Section } from '@/ui/section/components/Section';
+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>
-          <StyledSectionContainer>
-            <SubSectionTitle title="Picture" />
+          <H1Title title="Profile" />
+          <Section>
+            <H2Title title="Picture" />
            <ProfilePictureUploader />
-          </StyledSectionContainer>
-          <StyledSectionContainer>
-            <SubSectionTitle
+          </Section>
+          <Section>
+            <H2Title
              title="Name"
              description="Your name as it will be displayed"
            />
            <NameFields />
-          </StyledSectionContainer>
-          <StyledSectionContainer>
-            <SubSectionTitle
+          </Section>
+          <Section>
+            <H2Title
              title="Email"
              description="The email associated to your account"
            />
            <EmailField />
-          </StyledSectionContainer>
-
-          <StyledSectionContainer>
+          </Section>
+          <Section>
            <DeleteAccount />
-          </StyledSectionContainer>
+          </Section>
        </StyledContainer>
      </>
    </SubMenuTopBarContainer>
--- a/front/src/pages/settings/SettingsWorkspace.tsx
+++ b/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 { SubSectionTitle } from '@/ui/title/components/SubSectionTitle';
+import { Section } from '@/ui/section/components/Section';
+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>
-          <StyledSectionContainer>
-            <SubSectionTitle title="Picture" />
+          <H1Title title="General" />
+          <Section>
+            <H2Title title="Picture" />
            <WorkspaceLogoUploader />
-          </StyledSectionContainer>
-          <StyledSectionContainer>
-            <SubSectionTitle
-              title="Name"
-              description="Name of your workspace"
-            />
+          </Section>
+          <Section>
+            <H2Title title="Name" description="Name of your workspace" />
            <NameField />
-          </StyledSectionContainer>
+          </Section>

-          <StyledSectionContainer>
+          <Section>
            <DeleteWorkspace />
-          </StyledSectionContainer>
+          </Section>
        </StyledContainer>
      </div>
    </SubMenuTopBarContainer>
--- a/front/src/pages/settings/SettingsWorkspaceMembers.tsx
+++ b/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 { SubSectionTitle } from '@/ui/title/components/SubSectionTitle';
+import { Section } from '@/ui/section/components/Section';
+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,40 +80,44 @@ export function SettingsWorkspaceMembers() {
  return (
    <SubMenuTopBarContainer icon={<IconSettings size={16} />} title="Settings">
      <StyledContainer>
-        <MainSectionTitle>Members</MainSectionTitle>
+        <H1Title title="Members" />
        {workspace?.inviteHash && (
-          <>
-            <SubSectionTitle
+          <Section>
+            <H2Title
              title="Invite"
              description="Send an invitation to use Twenty"
            />
            <WorkspaceInviteLink
              inviteLink={`${window.location.origin}/invite/${workspace?.inviteHash}`}
            />
-          </>
+          </Section>
        )}
-        <SubSectionTitle
-          title="Members"
-          description="Manage the members of your space here"
-        />
-        {data?.workspaceMembers?.map((member) => (
-          <WorkspaceMemberCard
-            key={member.user.id}
-            workspaceMember={{ user: member.user }}
-            accessory={
-              currentUser?.id !== member.user.id && (
-                <ButtonContainer>
-                  <Button
-                    onClick={() => handleRemoveWorkspaceMember(member.user.id)}
-                    variant={ButtonVariant.Tertiary}
-                    size={ButtonSize.Small}
-                    icon={<IconTrash size={theme.icon.size.md} />}
-                  />
-                </ButtonContainer>
-              )
-            }
+        <Section>
+          <H2Title
+            title="Members"
+            description="Manage the members of your space here"
          />
-        ))}
+          {data?.workspaceMembers?.map((member) => (
+            <WorkspaceMemberCard
+              key={member.user.id}
+              workspaceMember={{ user: member.user }}
+              accessory={
+                currentUser?.id !== member.user.id && (
+                  <ButtonContainer>
+                    <Button
+                      onClick={() =>
+                        handleRemoveWorkspaceMember(member.user.id)
+                      }
+                      variant={ButtonVariant.Tertiary}
+                      size={ButtonSize.Small}
+                      icon={<IconTrash size={theme.icon.size.md} />}
+                    />
+                  </ButtonContainer>
+                )
+              }
+            />
+          ))}
+        </Section>
      </StyledContainer>
    </SubMenuTopBarContainer>
  );
--- a/front/src/testing/decorators/CatalogDecorator.tsx
+++ b/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,22 +102,25 @@ 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>
                      )}
-                      <Story
-                        args={{
-                          ...context.args,
-                          ...variable1.props(value1),
-                          ...variable2.props(value2),
-                          ...variable3.props(value3),
-                          ...variable4.props(value4),
-                        }}
-                      />
-                    </ElementContainer>
+
+                      <ElementContainer {...options?.elementContainer}>
+                        <Story
+                          args={{
+                            ...context.args,
+                            ...variable1.props(value1),
+                            ...variable2.props(value2),
+                            ...variable3.props(value3),
+                            ...variable4.props(value4),
+                          }}
+                        />
+                      </ElementContainer>
+                    </CellContainer>
                  ))}
                </RowContainer>
              ))}