Fix margin on DeleteModal overlay (#998)

* Fix margin on DeleteModal overlay

* Update chromatic ci triggers

* Update chromatic ci triggers

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> = {
-  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],

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],
-};