Extract typography components from twenty-front to twenty-ui. (#5466)

Removed the following components from twenty-front and moved them to
twenty-ui.
- H1Title.
- H2Title.
- H3Title.

Moving components in smaller chunks to ease the process of resolving
conflicts.

<img width="1255" alt="image"
src="https://github.com/twentyhq/twenty/assets/125115953/a3953659-5dfd-4d03-a6de-50b064129d55">

Co-authored-by: Charles Bochet <charles@twenty.com>

packages/twenty-ui/src/display/typography/components/H2Title.tsx

@@ -0,0 +1,50 @@
+import styled from '@emotion/styled';
+
+type H2TitleProps = {
+  title: string;
+  description?: string;
+  addornment?: React.ReactNode;
+  className?: string;
+};
+
+const StyledContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  margin-bottom: ${({ theme }) => theme.spacing(4)};
+`;
+
+const StyledTitleContainer = styled.div`
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+`;
+
+const StyledTitle = styled.h2`
+  color: ${({ theme }) => theme.font.color.primary};
+  font-size: ${({ theme }) => theme.font.size.md};
+  font-weight: ${({ theme }) => theme.font.weight.semiBold};
+  margin: 0;
+`;
+
+const StyledDescription = styled.h3`
+  color: ${({ theme }) => theme.font.color.tertiary};
+  font-size: ${({ theme }) => theme.font.size.md};
+  font-weight: ${({ theme }) => theme.font.weight.regular};
+  margin: 0;
+  margin-top: ${({ theme }) => theme.spacing(3)};
+`;
+
+export const H2Title = ({
+  title,
+  description,
+  addornment,
+  className,
+}: H2TitleProps) => (
+  <StyledContainer className={className}>
+    <StyledTitleContainer>
+      <StyledTitle>{title}</StyledTitle>
+      {addornment}
+    </StyledTitleContainer>
+    {description && <StyledDescription>{description}</StyledDescription>}
+  </StyledContainer>
+);