Use Typography for more frontend text elements

frontend/src/components/languageselector/index.tsx

@@ -27,6 +27,7 @@ function LanguageSelector({ noPadding }: { noPadding: boolean }) {
     '& .MuiSelect-icon': {
       color: 'white',
     },
+    fontSize: '1.25rem',
   }
 
   if (noPadding) {

frontend/src/components/loginBox/index.tsx

@@ -5,11 +5,7 @@ import Box from '@mui/material/Box'
 import AccountBoxOutlinedIcon from '@mui/icons-material/AccountBoxOutlined'
 
 import { HrefButton } from 'components/button'
-import { Button } from '@mui/material'
-
-const StyledParagraph = styled('p')({
-  fontSize: '1rem',
-})
+import { Button, Typography } from '@mui/material'
 
 const StyledBox = styled(Box)({
   borderStyle: 'solid',
@@ -50,16 +46,18 @@ const LoginBox = ({
           height: '35%',
         }}
       >
-        <Box sx={{ display: 'flex', alignItems: 'center' }}>
+        <Box sx={{ display: 'flex', alignItems: 'center', paddingBottom: 1 }}>
           <AccountBoxOutlinedIcon
             fontSize="inherit"
             sx={{
               marginRight: { xs: '0rem', md: '0.5rem' },
             }}
           />
-          {header}
+          <Typography variant="h3" component="h2">
+            {header}
+          </Typography>
         </Box>
-        <StyledParagraph>{info}</StyledParagraph>
+        <Typography variant="body2">{info}</Typography>
       </Box>
       <Box
         sx={{

frontend/src/components/page/page.tsx

@@ -2,17 +2,9 @@ import React from 'react'
 import { Helmet } from 'react-helmet'
 import { useTranslation } from 'react-i18next'
 
-import { styled } from '@mui/material/styles'
-import { Container } from '@mui/material'
+import { Container, Typography } from '@mui/material'
 import { appInst } from 'appConfig'
 
-const StyledPageHeader = styled('h1')(({ theme }) => ({
-  color: theme.greg.textWhite,
-  fontSize: '3rem',
-  fontWeight: 'bold',
-  margin: '1rem 0 1rem 0',
-}))
-
 interface IPage {
   children: React.ReactNode
   header?: string
@@ -47,7 +39,7 @@ export default function Page(props: IPage) {
         maxWidth="md"
         sx={{ paddingBottom: '2rem', paddingTop: '2rem' }}
       >
-        {header ? <StyledPageHeader>{header}</StyledPageHeader> : <></>}
+        {header ? <Typography variant="h1">{header}</Typography> : <></>}
         {children}
       </Container>
     </>

frontend/src/routes/components/footer.tsx

@@ -27,7 +27,7 @@ const InfoSection = styled('div')(({ theme }) => ({
 }))
 
 const FooterHeader = styled('div')({
-  fontSize: '2rem',
+  fontSize: '1.9375rem',
   color: 'white',
   padding: '1rem 0 2rem 0',
 })
@@ -45,7 +45,7 @@ const LinkSection = styled('div')({
 })
 
 const LinkHeader = styled('div')({
-  fontSize: '0.8rem',
+  fontSize: '0.75rem',
   marginBottom: '0.5rem',
 })
 
@@ -60,6 +60,7 @@ const LogoSection = styled('div')(({ theme }) => ({
 
 const StyledLink = styled(Link)({
   color: 'white',
+  fontSize: '1.0625rem',
 })
 
 StyledLink.defaultProps = {

frontend/src/routes/components/header.tsx

@@ -63,6 +63,7 @@ const Header = () => {
               <Link
                 sx={{
                   color: 'white',
+                  fontSize: '1.25rem',
                 }}
                 href={logoutLink}
               >

frontend/src/routes/components/notFound.tsx

@@ -4,7 +4,7 @@ import { Typography } from '@mui/material'
 
 export default function NotFound() {
   return (
-    <Page header="404 - Not found">
+    <Page>
       <Typography variant="h1">404 - Not found</Typography>
     </Page>
   )

frontend/src/routes/components/userInfo.tsx

-import { Box } from '@mui/material'
+import { Box, Typography } from '@mui/material'
 
 import { useUserContext } from 'contexts'
 
@@ -8,7 +8,9 @@ function UserInfo() {
   if (user.auth) {
     return (
       <Box sx={{ paddingLeft: '0.5rem' }}>
-        {user.first_name} {user.last_name}
+        <Typography sx={{ fontSize: '1.25rem' }}>
+          {user.first_name} {user.last_name}
+        </Typography>
       </Box>
     )
   }

frontend/src/routes/frontpage/components/loginpage.tsx

 import { useTranslation } from 'react-i18next'
-import { styled } from '@mui/system'
 import { Container, Typography } from '@mui/material'
 
 import LoginBox from 'components/loginBox'
 import { instNameUpperCaser } from 'utils'
 import { appInst } from 'appConfig'
 
-const StyledParagraph = styled('p')({
-  fontSize: '1rem',
-})
-
 export default function LoginPage() {
   const { t } = useTranslation(['frontpage'])
 
@@ -24,10 +19,12 @@ export default function LoginPage() {
       }}
     >
       <Container>
-        <Typography variant="h1">{t('header')}</Typography>
-        <StyledParagraph sx={{ marginBottom: '4rem' }}>
+        <Typography variant="h1" sx={{ paddingBottom: '1rem' }}>
+          {t('header')}
+        </Typography>
+        <Typography variant="body1" sx={{ paddingBottom: '2rem' }}>
           {t('description', { inst: instNameUpperCaser(appInst) })}
-        </StyledParagraph>
+        </Typography>
       </Container>
 
       <Container

frontend/src/routes/invite/index.tsx

@@ -6,7 +6,7 @@ import Loading from 'components/loading'
 import { useUserContext } from 'contexts'
 import { setCookie, submitJsonOpts } from 'utils'
 import LoginBox from 'components/loginBox'
-import { Box, Container, Typography } from '@mui/material'
+import { Container, Typography } from '@mui/material'
 
 function ChooseRegistrationMethod() {
   const { t } = useTranslation(['invite'])
@@ -28,10 +28,12 @@ function ChooseRegistrationMethod() {
           marginBottom: '8rem',
         }}
       >
-        <Typography variant="h1">{t('header')}</Typography>
-        <Box sx={{ fontSize: '1rem', marginBottom: '2rem' }}>
+        <Typography variant="h1" sx={{ marginBottom: '2rem' }}>
+          {t('header')}
+        </Typography>
+        <Typography variant="body1" sx={{ marginBottom: '2rem' }}>
           {t('description')}
-        </Box>
+        </Typography>
         <LoginBox
           header={t('guest')}
           info={t('guestInfo')}

frontend/src/themes/main.ts

@@ -12,17 +12,23 @@ const mainTheme: ThemeOptions = {
   },
   typography: {
     fontSize: 16,
+    h1: {
+      fontSize: '2.75rem', // 44px
+    },
     h2: {
-      fontSize: '1.75rem', //28px at font-size 16
+      fontSize: '1.75rem', // 28px
     },
     h3: {
-      fontSize: '1.375rem', //22px
+      fontSize: '1.375rem', // 22px
     },
     body1: {
-      fontSize: '1.125rem', //18px
+      fontSize: '1.125rem', // 18px
+    },
+    body2: {
+      lineHeight: 1.5,
     },
     button: {
-      fontSize: '0.875rem', //14px
+      fontSize: '0.875rem', // 14px
     },
   },