From ef2c01b4dfab6d4e3326ae17091ae8459f4837b5 Mon Sep 17 00:00:00 2001
From: Andreas Ellewsen <ae@uio.no>
Date: Wed, 26 Jan 2022 10:05:44 +0100
Subject: [PATCH] Convert all pixel values to rem
---
frontend/src/components/loginBox/index.tsx | 6 +++---
frontend/src/components/table/index.tsx | 10 +++++-----
frontend/src/routes/components/sponsorGuestButtons.tsx | 8 ++++----
frontend/src/routes/components/sponsorInfoButtons.tsx | 10 +++++-----
frontend/src/routes/guest/register/steps/consent.tsx | 4 ++--
frontend/src/routes/sponsor/frontpage/index.tsx | 8 ++++----
.../src/routes/sponsor/guest/guestRoleInfo/index.tsx | 10 +++++-----
frontend/src/routes/sponsor/register/frontPage.tsx | 4 ++--
frontend/src/themes/main.ts | 9 ++++++---
9 files changed, 36 insertions(+), 33 deletions(-)
diff --git a/frontend/src/components/loginBox/index.tsx b/frontend/src/components/loginBox/index.tsx
index a0016333..36c27157 100644
--- a/frontend/src/components/loginBox/index.tsx
+++ b/frontend/src/components/loginBox/index.tsx
@@ -14,8 +14,8 @@ const StyledParagraph = styled('p')({
const StyledBox = styled(Box)({
borderStyle: 'solid',
borderColor: 'black',
- borderWidth: '2px',
- borderRadius: '11px',
+ borderWidth: '0.125rem',
+ borderRadius: '0.6875rem',
})
interface LoginBoxProps {
@@ -66,7 +66,7 @@ const LoginBox = ({
display: 'flex',
margin: '2rem',
flexDirection: 'column',
- gap: '16px',
+ gap: '1rem',
}}
>
<HrefButton to="/oidc/authenticate/" onClick={onClickLogin}>
diff --git a/frontend/src/components/table/index.tsx b/frontend/src/components/table/index.tsx
index 15c3d6e4..06347570 100644
--- a/frontend/src/components/table/index.tsx
+++ b/frontend/src/components/table/index.tsx
@@ -35,10 +35,10 @@ export const TableContainer = styled(TableContainerMui)({
borderRadius: '1%',
borderStyle: 'solid',
borderColor: 'black',
- borderWidth: '2px',
+ borderWidth: '0.125rem',
boxShadow: 'none',
- paddingLeft: '50px',
- paddingRight: '50px',
- paddingTop: '25px',
- paddingBottom: '25px',
+ paddingLeft: '3.125rem',
+ paddingRight: '3.125rem',
+ paddingTop: '1.5625rem',
+ paddingBottom: '1.5625rem',
})
diff --git a/frontend/src/routes/components/sponsorGuestButtons.tsx b/frontend/src/routes/components/sponsorGuestButtons.tsx
index fcd2fd00..400a3bde 100644
--- a/frontend/src/routes/components/sponsorGuestButtons.tsx
+++ b/frontend/src/routes/components/sponsorGuestButtons.tsx
@@ -14,7 +14,7 @@ const StyledIconButton = styled(IconButton)({
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
- fontSize: '22px',
+ fontSize: '1.375rem',
})
export default function SponsorGuestButtons(props: SponsorGuestButtonsProps) {
@@ -37,7 +37,7 @@ export default function SponsorGuestButtons(props: SponsorGuestButtonsProps) {
flexDirection: 'row',
justifyContent: 'space-evenly',
marginBottom: '2rem',
- fontSize: '22px',
+ fontSize: '1.375rem',
}}
>
<StyledIconButton
@@ -49,7 +49,7 @@ export default function SponsorGuestButtons(props: SponsorGuestButtonsProps) {
>
<PersonIcon
sx={{
- fontSize: '80px',
+ fontSize: '5rem',
borderRadius: '4rem',
borderStyle: 'solid',
borderColor: (theme: Theme) =>
@@ -75,7 +75,7 @@ export default function SponsorGuestButtons(props: SponsorGuestButtonsProps) {
>
<PersonAddIcon
sx={{
- fontSize: '80px',
+ fontSize: '5rem',
borderRadius: '4rem',
borderStyle: 'solid',
borderColor: (theme: Theme) =>
diff --git a/frontend/src/routes/components/sponsorInfoButtons.tsx b/frontend/src/routes/components/sponsorInfoButtons.tsx
index 73e1e02b..499f21fe 100644
--- a/frontend/src/routes/components/sponsorInfoButtons.tsx
+++ b/frontend/src/routes/components/sponsorInfoButtons.tsx
@@ -21,7 +21,7 @@ export default function SponsorInfoButtons({
flexDirection: 'row',
justifyContent: 'space-evenly',
marginBottom: '2rem',
- fontSize: '22px',
+ fontSize: '1.375rem',
}}
>
<IconButton
@@ -29,14 +29,14 @@ export default function SponsorInfoButtons({
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
- fontSize: '22px',
+ fontSize: '1.375rem',
}}
component={Link}
to={to}
>
<ArrowBackIcon
sx={{
- fontSize: '80px',
+ fontSize: '5rem',
}}
/>
{t('button.back')}
@@ -47,12 +47,12 @@ export default function SponsorInfoButtons({
flexDirection: 'column',
alignItems: 'center',
textDecorationLine: 'underline',
- fontSize: '22px',
+ fontSize: '1.375rem',
}}
>
<PersonOutlineRoundedIcon
sx={{
- fontSize: '80px',
+ fontSize: '5rem',
borderRadius: '4rem',
borderStyle: 'solid',
borderColor: (theme: Theme) => theme.palette.secondary.main,
diff --git a/frontend/src/routes/guest/register/steps/consent.tsx b/frontend/src/routes/guest/register/steps/consent.tsx
index 882b17c5..8e0aba7c 100644
--- a/frontend/src/routes/guest/register/steps/consent.tsx
+++ b/frontend/src/routes/guest/register/steps/consent.tsx
@@ -154,9 +154,9 @@ const GuestConsentStep = forwardRef(
return (
<Box
sx={{
- borderRadius: '4px',
+ borderRadius: '0.25rem',
borderStyle: 'solid',
- borderWidth: '1px',
+ borderWidth: '0.0625rem',
borderColor: (theme: Theme) => theme.palette.text.primary,
padding: '0 1.5rem 1.2rem 1.5rem',
marginBottom: '2.5rem',
diff --git a/frontend/src/routes/sponsor/frontpage/index.tsx b/frontend/src/routes/sponsor/frontpage/index.tsx
index e9ba7274..4e987e59 100644
--- a/frontend/src/routes/sponsor/frontpage/index.tsx
+++ b/frontend/src/routes/sponsor/frontpage/index.tsx
@@ -64,7 +64,7 @@ const StyledAccordion = styled(Accordion)({
const StyledAccordionSummary = styled(AccordionSummary)({
borderStyle: 'solid',
borderColor: 'black',
- borderWidth: '2px',
+ borderWidth: '0.125rem',
borderRadius: '1%',
})
@@ -76,7 +76,7 @@ const StyledTableHead = styled(TableHead)(({ theme }) => ({
borderTop: '0',
borderLeft: '0',
borderRight: '0',
- borderBottom: '3px solid',
+ borderBottom: '0.1875rem solid',
borderColor: theme.palette.secondary.main,
borderRadius: '0',
}))
@@ -167,7 +167,7 @@ const GuestTable = ({ guests, emptyText }: GuestTableProps) => {
return (
<TableContainer
component={Paper}
- sx={{ boxShadow: 'none', borderRadius: '0px' }}
+ sx={{ boxShadow: 'none', borderRadius: '0rem' }}
>
<Table sx={{ minWidth: 650 }} aria-label="simple table">
<StyledTableHead>
@@ -284,7 +284,7 @@ const WaitingGuests = ({ persons }: GuestProps) => {
{t('common:waitingGuests')}{' '}
{guests.length > 0 && (
<NotificationsActiveIcon
- sx={{ color: 'error.main', fontSize: '26px' }}
+ sx={{ color: 'error.main', fontSize: '1.625rem' }}
/>
)}
</Typography>
diff --git a/frontend/src/routes/sponsor/guest/guestRoleInfo/index.tsx b/frontend/src/routes/sponsor/guest/guestRoleInfo/index.tsx
index 3f1ec42f..a03eef1e 100644
--- a/frontend/src/routes/sponsor/guest/guestRoleInfo/index.tsx
+++ b/frontend/src/routes/sponsor/guest/guestRoleInfo/index.tsx
@@ -83,12 +83,12 @@ const TableContainer = styled(TableContainerMui)({
borderRadius: '1%',
borderStyle: 'solid',
borderColor: 'black',
- borderWidth: '2px',
+ borderWidth: '0.125rem',
boxShadow: 'none',
- paddingLeft: '50px',
- paddingRight: '50px',
- paddingTop: '25px',
- paddingBottom: '25px',
+ paddingLeft: '3.125rem',
+ paddingRight: '3.125rem',
+ paddingTop: '1.5625rem',
+ paddingBottom: '1.5625rem',
})
export default function GuestRoleInfo({ guest }: GuestRoleInfoProps) {
diff --git a/frontend/src/routes/sponsor/register/frontPage.tsx b/frontend/src/routes/sponsor/register/frontPage.tsx
index e6ad53f7..4a4abb56 100644
--- a/frontend/src/routes/sponsor/register/frontPage.tsx
+++ b/frontend/src/routes/sponsor/register/frontPage.tsx
@@ -62,9 +62,9 @@ function FrontPage() {
<Box
sx={{
borderStyle: () => (guests.length > 0 ? 'solid' : 'none'),
- borderRadius: '5px',
+ borderRadius: '0.3125rem',
borderColor: 'secondary.main',
- padding: '7px 12px',
+ padding: '0.4375 0.75rem',
}}
>
<TextField
diff --git a/frontend/src/themes/main.ts b/frontend/src/themes/main.ts
index 86bde5fc..2b0d1823 100644
--- a/frontend/src/themes/main.ts
+++ b/frontend/src/themes/main.ts
@@ -13,13 +13,16 @@ const mainTheme: ThemeOptions = {
typography: {
fontSize: 16,
h2: {
- fontSize: 28,
+ fontSize: '1.75rem', //28px at font-size 16
+ },
+ h3: {
+ fontSize: '1.375rem', //22px
},
body1: {
- fontSize: 18,
+ fontSize: '1.125rem', //18px
},
button: {
- fontSize: 14,
+ fontSize: '0.875rem', //14px
},
},
--
GitLab