💄(website) homogenizes font sizes

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.
openfun · Aug 8, 2023 · d7a0692 · d7a0692
1 parent a9f30a2
commit d7a0692
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 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
@@ -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
@@ -203,15 +203,15 @@ 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={() => {
                   setIsDropOpen(false);
                 }}
               >
                 <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
@@ -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/...ndalone_site/src/features/Profile/features/AccountSettings/components/AccountSettings.tsx b/...ndalone_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
@@ -21,6 +21,14 @@ export const themeExtend = {
       },
     },
   },
+  text: {
+    medium: {
+      size: '0.938rem',
+    },
+    xlmedium: {
+      size: '1.125rem',
+    },
+  },
 };
 
 export const themeBase = theme;