diff --git a/frontend/src/components/languageselector/index.tsx b/frontend/src/components/languageselector/index.tsx
index c328ba2cfed2956a0f819afb64a22ea38d71cdc0..8a76feba3847cad58a05fe7ef3d32ce06e486944 100644
--- a/frontend/src/components/languageselector/index.tsx
+++ b/frontend/src/components/languageselector/index.tsx
@@ -27,6 +27,7 @@ function LanguageSelector({ noPadding }: { noPadding: boolean }) {
'& .MuiSelect-icon': {
color: 'white',
},
+ fontSize: '1.25rem',
}
if (noPadding) {
diff --git a/frontend/src/components/loginBox/index.tsx b/frontend/src/components/loginBox/index.tsx
index 36c27157407351c2948b10b77e7e3d17126b8c21..ee8bb4582fa4d48810530d6faae4f7d74b8bc1de 100644
--- a/frontend/src/components/loginBox/index.tsx
+++ b/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={{
diff --git a/frontend/src/components/page/page.tsx b/frontend/src/components/page/page.tsx
index 647e39c59b965c5abcaa6c663d809b583209c5cc..8b49896b462563f9e6e1c228b672156e41bcb7b0 100644
--- a/frontend/src/components/page/page.tsx
+++ b/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>
</>
diff --git a/frontend/src/routes/components/footer.tsx b/frontend/src/routes/components/footer.tsx
index 7bbe72725ec40d879d5a3498928c1a5872b1484f..56d4452b0a5a6fb4f2fdba5a6ef12757d65390e3 100644
--- a/frontend/src/routes/components/footer.tsx
+++ b/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 = {
diff --git a/frontend/src/routes/components/header.tsx b/frontend/src/routes/components/header.tsx
index 7b64b4233ae3c983d8300ef7cce52e2fcd325e66..56a38897240f9bb2f731235457a6c2781d728e06 100644
--- a/frontend/src/routes/components/header.tsx
+++ b/frontend/src/routes/components/header.tsx
@@ -63,6 +63,7 @@ const Header = () => {
<Link
sx={{
color: 'white',
+ fontSize: '1.25rem',
}}
href={logoutLink}
>
diff --git a/frontend/src/routes/components/notFound.tsx b/frontend/src/routes/components/notFound.tsx
index c38a0f384fe0a4386f58c61c14b58d6b63a748c1..a89e49c819c837402bbc2c13c80b79a998181686 100644
--- a/frontend/src/routes/components/notFound.tsx
+++ b/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>
)
diff --git a/frontend/src/routes/components/userInfo.tsx b/frontend/src/routes/components/userInfo.tsx
index 23abf83284a3e66b03e48a2bc764091c1ca8e3f3..c3ba5f39971a223b2b267c7673714394a675819f 100644
--- a/frontend/src/routes/components/userInfo.tsx
+++ b/frontend/src/routes/components/userInfo.tsx
@@ -1,4 +1,4 @@
-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>
)
}
diff --git a/frontend/src/routes/frontpage/components/loginpage.tsx b/frontend/src/routes/frontpage/components/loginpage.tsx
index 912692f48cd3a2fc0dee5e313feac570d4b1c6c1..4e09fb605e62770e642aa285d4c67d9c955d2b29 100644
--- a/frontend/src/routes/frontpage/components/loginpage.tsx
+++ b/frontend/src/routes/frontpage/components/loginpage.tsx
@@ -1,15 +1,10 @@
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
diff --git a/frontend/src/routes/invite/index.tsx b/frontend/src/routes/invite/index.tsx
index 7100e10c20990a3098417e2e48ff03fc2e722f41..cb26540fcb5ea2b53fa7b09ee30032c8791760f6 100644
--- a/frontend/src/routes/invite/index.tsx
+++ b/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')}
diff --git a/frontend/src/themes/main.ts b/frontend/src/themes/main.ts
index 2b0d1823d3cacb5c2f51f830afd484204aea4c33..b1ef8d0937c3de08d710676746b906bdb2204dcf 100644
--- a/frontend/src/themes/main.ts
+++ b/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
},
},