From d7a069288205666d0e52e4fa429bc89bcd3da54d Mon Sep 17 00:00:00 2001
From: Anthony Le Courric <freelance.anthony@gmail.com>
Date: Tue, 8 Aug 2023 10:58:18 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84(website)=20homogenizes=20font=20si?=
 =?UTF-8?q?zes?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Different font sizes were used in different places, the menu was
different that the header, the user profil menu had different sizes
as well. This commit homogenizes the sizes.
---
 .../features/Contents/components/Contents/Contents.tsx   | 6 ++++--
 .../apps/standalone_site/src/features/Header/Header.tsx  | 9 +++++----
 .../src/features/Profile/components/ProfilePage.tsx      | 2 +-
 .../AccountSettings/components/AccountSettings.tsx       | 2 +-
 .../apps/standalone_site/src/styles/theme.extend.ts      | 8 ++++++++
 5 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/src/frontend/apps/standalone_site/src/features/Contents/components/Contents/Contents.tsx b/src/frontend/apps/standalone_site/src/features/Contents/components/Contents/Contents.tsx
index d9028ea695..5d2bc02076 100644
--- a/src/frontend/apps/standalone_site/src/features/Contents/components/Contents/Contents.tsx
+++ b/src/frontend/apps/standalone_site/src/features/Contents/components/Contents/Contents.tsx
@@ -1,4 +1,4 @@
-import { Box, Text } from 'grommet';
+import { Box, Heading, Text } from 'grommet';
 import { StyledLink } from 'lib-components';
 import { Fragment } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
@@ -38,7 +38,9 @@ const Contents = ({ playlistId }: ContentsProps) => {
             justify="between"
             margin={{ bottom: 'small' }}
           >
-            <Text weight="bolder">{intl.formatMessage(sample.title)}</Text>
+            <Heading weight="bolder" level="4" margin="none">
+              {intl.formatMessage(sample.title)}
+            </Heading>
             <Text weight="bolder">
               <StyledLink
                 to={{
diff --git a/src/frontend/apps/standalone_site/src/features/Header/Header.tsx b/src/frontend/apps/standalone_site/src/features/Header/Header.tsx
index 1ac5995931..a55e4f986a 100644
--- a/src/frontend/apps/standalone_site/src/features/Header/Header.tsx
+++ b/src/frontend/apps/standalone_site/src/features/Header/Header.tsx
@@ -203,7 +203,7 @@ const Header = forwardRef<Nullable<HTMLDivElement>>((_props, ref) => {
           }
           dropAlign={{ top: 'bottom', right: 'right' }}
           dropContent={
-            <Box direction="column" margin="small" gap="small">
+            <Box direction="column" margin="small" gap="xsmall">
               <NavLinkStyled
                 to={routes.PROFILE.path}
                 onClick={() => {
@@ -211,7 +211,7 @@ const Header = forwardRef<Nullable<HTMLDivElement>>((_props, ref) => {
                 }}
               >
                 <AvatarIcon />
-                {intl.formatMessage(messages.profile)}
+                <Text>{intl.formatMessage(messages.profile)}</Text>
               </NavLinkStyled>
 
               <NavLinkStyled
@@ -220,7 +220,8 @@ const Header = forwardRef<Nullable<HTMLDivElement>>((_props, ref) => {
                   setIsDropOpen(false);
                 }}
               >
-                <SettingsIcon /> {intl.formatMessage(messages.settings)}
+                <SettingsIcon />{' '}
+                <Text>{intl.formatMessage(messages.settings)}</Text>
               </NavLinkStyled>
 
               <ButtonStyled
@@ -230,7 +231,7 @@ const Header = forwardRef<Nullable<HTMLDivElement>>((_props, ref) => {
                 }}
               >
                 <LogoutIcon />
-                {intl.formatMessage(messages.logout)}
+                <Text>{intl.formatMessage(messages.logout)}</Text>
               </ButtonStyled>
             </Box>
           }
diff --git a/src/frontend/apps/standalone_site/src/features/Profile/components/ProfilePage.tsx b/src/frontend/apps/standalone_site/src/features/Profile/components/ProfilePage.tsx
index e26a4c67ab..a234d1a1ac 100644
--- a/src/frontend/apps/standalone_site/src/features/Profile/components/ProfilePage.tsx
+++ b/src/frontend/apps/standalone_site/src/features/Profile/components/ProfilePage.tsx
@@ -43,7 +43,7 @@ export const ProfilePage = () => {
 
   return (
     <Box>
-      <Heading>{intl.formatMessage(messages.header)}</Heading>
+      <Heading level="2">{intl.formatMessage(messages.header)}</Heading>
       <Box
         background="#daeeff"
         margin={{ vertical: 'small' }}
diff --git a/src/frontend/apps/standalone_site/src/features/Profile/features/AccountSettings/components/AccountSettings.tsx b/src/frontend/apps/standalone_site/src/features/Profile/features/AccountSettings/components/AccountSettings.tsx
index 3b589ffbc5..253014ca4f 100644
--- a/src/frontend/apps/standalone_site/src/features/Profile/features/AccountSettings/components/AccountSettings.tsx
+++ b/src/frontend/apps/standalone_site/src/features/Profile/features/AccountSettings/components/AccountSettings.tsx
@@ -133,7 +133,7 @@ export const AccountSettings = () => {
 
   return (
     <Box>
-      <Heading>{intl.formatMessage(messages.header)}</Heading>
+      <Heading level="2">{intl.formatMessage(messages.header)}</Heading>
       <Box width="large" margin={{ horizontal: 'auto' }}>
         <Box
           background="white"
diff --git a/src/frontend/apps/standalone_site/src/styles/theme.extend.ts b/src/frontend/apps/standalone_site/src/styles/theme.extend.ts
index f996ac46d7..9a48d33d2c 100644
--- a/src/frontend/apps/standalone_site/src/styles/theme.extend.ts
+++ b/src/frontend/apps/standalone_site/src/styles/theme.extend.ts
@@ -21,6 +21,14 @@ export const themeExtend = {
       },
     },
   },
+  text: {
+    medium: {
+      size: '0.938rem',
+    },
+    xlmedium: {
+      size: '1.125rem',
+    },
+  },
 };
 
 export const themeBase = theme;