From 5cca3ccbc6ec82adbf81d60b9ba7b588787f3029 Mon Sep 17 00:00:00 2001
From: Andreas Ellewsen <ae@uio.no>
Date: Wed, 26 Jan 2022 11:44:31 +0100
Subject: [PATCH] Use Typography for more frontend text elements
---
frontend/src/components/languageselector/index.tsx | 1 +
frontend/src/components/loginBox/index.tsx | 14 ++++++--------
frontend/src/components/page/page.tsx | 12 ++----------
frontend/src/routes/components/footer.tsx | 5 +++--
frontend/src/routes/components/header.tsx | 1 +
frontend/src/routes/components/notFound.tsx | 2 +-
frontend/src/routes/components/userInfo.tsx | 6 ++++--
.../src/routes/frontpage/components/loginpage.tsx | 13 +++++--------
frontend/src/routes/invite/index.tsx | 10 ++++++----
frontend/src/themes/main.ts | 14 ++++++++++----
10 files changed, 39 insertions(+), 39 deletions(-)
diff --git a/frontend/src/components/languageselector/index.tsx b/frontend/src/components/languageselector/index.tsx
index c328ba2c..8a76feba 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 36c27157..ee8bb458 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 647e39c5..8b49896b 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 7bbe7272..56d4452b 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 7b64b423..56a38897 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 c38a0f38..a89e49c8 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 23abf832..c3ba5f39 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 912692f4..4e09fb60 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 7100e10c..cb26540f 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 2b0d1823..b1ef8d09 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
},
},
--
GitLab