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-front/src/modules/settings/accounts/components/SettingsAccountsEmailsBlocklistSection.tsx

@@ -1,4 +1,5 @@
 import { useRecoilValue } from 'recoil';
+import { H2Title } from 'twenty-ui';
 
 import { BlocklistItem } from '@/accounts/types/BlocklistItem';
 import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
@@ -8,7 +9,6 @@ import { useDeleteOneRecord } from '@/object-record/hooks/useDeleteOneRecord';
 import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
 import { SettingsAccountsEmailsBlocklistInput } from '@/settings/accounts/components/SettingsAccountsEmailsBlocklistInput';
 import { SettingsAccountsEmailsBlocklistTable } from '@/settings/accounts/components/SettingsAccountsEmailsBlocklistTable';
-import { H2Title } from '@/ui/display/typography/components/H2Title';
 import { Section } from '@/ui/layout/section/components/Section';
 
 export const SettingsAccountsEmailsBlocklistSection = () => {

packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsSettingsSection.tsx

@@ -1,11 +1,10 @@
 import { useNavigate } from 'react-router-dom';
 import styled from '@emotion/styled';
-import { IconCalendarEvent, IconMailCog } from 'twenty-ui';
+import { H2Title, IconCalendarEvent, IconMailCog } from 'twenty-ui';
 
 import { SettingsNavigationCard } from '@/settings/components/SettingsNavigationCard';
 import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
 import { SettingsPath } from '@/types/SettingsPath';
-import { H2Title } from '@/ui/display/typography/components/H2Title';
 import { Section } from '@/ui/layout/section/components/Section';
 
 const StyledCardsContainer = styled.div`

packages/twenty-front/src/modules/settings/accounts/components/SettingsNewAccountSection.tsx

@@ -1,5 +1,6 @@
+import { H2Title } from 'twenty-ui';
+
 import { SettingsAccountsListEmptyStateCard } from '@/settings/accounts/components/SettingsAccountsListEmptyStateCard';
-import { H2Title } from '@/ui/display/typography/components/H2Title';
 import { Section } from '@/ui/layout/section/components/Section';
 
 export const SettingsNewAccountSection = () => {

packages/twenty-front/src/modules/settings/data-model/new-object/components/SettingsAvailableStandardObjectsSection.tsx

@@ -1,5 +1,6 @@
+import { H2Title } from 'twenty-ui';
+
 import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
-import { H2Title } from '@/ui/display/typography/components/H2Title';
 import { Section } from '@/ui/layout/section/components/Section';
 import { Table } from '@/ui/layout/table/components/Table';
 import { TableBody } from '@/ui/layout/table/components/TableBody';

packages/twenty-front/src/modules/settings/integrations/components/SettingsIntegrationGroup.tsx

@@ -1,9 +1,9 @@
 import { Link } from 'react-router-dom';
 import styled from '@emotion/styled';
+import { H2Title } from 'twenty-ui';
 
 import { SettingsIntegrationComponent } from '@/settings/integrations/components/SettingsIntegrationComponent';
 import { SettingsIntegrationCategory } from '@/settings/integrations/types/SettingsIntegrationCategory';
-import { H2Title } from '@/ui/display/typography/components/H2Title';
 import { Section } from '@/ui/layout/section/components/Section';
 
 interface SettingsIntegrationGroupProps {

packages/twenty-front/src/modules/settings/integrations/database-connection/components/SettingsIntegrationDatabaseConnectionShowContainer.tsx

@@ -1,5 +1,6 @@
 import { useNavigate } from 'react-router-dom';
 import { Section } from '@react-email/components';
+import { H2Title } from 'twenty-ui';
 
 import { useDeleteOneDatabaseConnection } from '@/databases/hooks/useDeleteOneDatabaseConnection';
 import { SettingsIntegrationDatabaseConnectionSummaryCard } from '@/settings/integrations/database-connection/components/SettingsIntegrationDatabaseConnectionSummaryCard';
@@ -8,7 +9,6 @@ import { useDatabaseConnection } from '@/settings/integrations/database-connecti
 import { getConnectionDbName } from '@/settings/integrations/utils/getConnectionDbName';
 import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
 import { SettingsPath } from '@/types/SettingsPath';
-import { H2Title } from '@/ui/display/typography/components/H2Title';
 import { Breadcrumb } from '@/ui/navigation/bread-crumb/components/Breadcrumb';
 
 export const SettingsIntegrationDatabaseConnectionShowContainer = () => {

packages/twenty-front/src/modules/settings/integrations/database-connection/components/SettingsIntegrationEditDatabaseConnectionContent.tsx

@@ -3,6 +3,7 @@ import { useNavigate } from 'react-router-dom';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { Section } from '@react-email/components';
 import pick from 'lodash.pick';
+import { H2Title } from 'twenty-ui';
 import { z } from 'zod';
 
 import { useUpdateOneDatabaseConnection } from '@/databases/hooks/useUpdateOneDatabaseConnection';
@@ -19,7 +20,6 @@ import { getConnectionDbName } from '@/settings/integrations/utils/getConnection
 import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
 import { SettingsPath } from '@/types/SettingsPath';
 import { Info } from '@/ui/display/info/components/Info';
-import { H2Title } from '@/ui/display/typography/components/H2Title';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { Breadcrumb } from '@/ui/navigation/bread-crumb/components/Breadcrumb';
 import {

packages/twenty-front/src/modules/settings/profile/components/ChangePassword.tsx

@@ -1,7 +1,7 @@
 import { useRecoilValue } from 'recoil';
+import { H2Title } from 'twenty-ui';
 
 import { currentUserState } from '@/auth/states/currentUserState';
-import { H2Title } from '@/ui/display/typography/components/H2Title';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { Button } from '@/ui/input/button/components/Button';
 import { useEmailPasswordResetLinkMutation } from '~/generated/graphql';

packages/twenty-front/src/modules/settings/profile/components/DeleteAccount.tsx

@@ -1,9 +1,9 @@
 import { useState } from 'react';
 import { useRecoilValue } from 'recoil';
+import { H2Title } from 'twenty-ui';
 
 import { useSignOutAndRedirect } from '@/auth/hooks/useSignOutAndRedirect';
 import { currentUserState } from '@/auth/states/currentUserState';
-import { H2Title } from '@/ui/display/typography/components/H2Title';
 import { Button } from '@/ui/input/button/components/Button';
 import { ConfirmationModal } from '@/ui/layout/modal/components/ConfirmationModal';
 import { useDeleteUserAccountMutation } from '~/generated/graphql';

packages/twenty-front/src/modules/settings/profile/components/DeleteWorkspace.tsx

@@ -1,9 +1,9 @@
 import { useState } from 'react';
 import { useRecoilValue } from 'recoil';
+import { H2Title } from 'twenty-ui';
 
 import { useSignOutAndRedirect } from '@/auth/hooks/useSignOutAndRedirect';
 import { currentUserState } from '@/auth/states/currentUserState';
-import { H2Title } from '@/ui/display/typography/components/H2Title';
 import {
   ConfirmationModal,
   StyledConfirmationButton,