diff --git a/frontend/src/components/loginBox/index.tsx b/frontend/src/components/loginBox/index.tsx index a00163338bf050c702478e5125033641511fb276..36c27157407351c2948b10b77e7e3d17126b8c21 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 15c3d6e420555ca5e199854f5cc2bbdf5ae9ef1d..06347570104b8cedf2519972239bb5869636822f 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 fcd2fd00c2b417f2df3b0c90c5df526943785b55..400a3bde29cf07836003aba7dde8f12489e12da9 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 73e1e02b11b88fc0ceb632b95130288d0a338fbc..499f21fe4672487d25bd28899781cf381dc22c44 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 882b17c5db7b1c4050657ce0d494457f4b4c96ff..8e0aba7ce4b869b360f6130372e2e743641dc6f3 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 e9ba72745b9b5a65ae0025a24a53c775770f1b95..4e987e5968038381306b3f5a7a28e8c4436d2a8b 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 3f1ec42f8c501c033b9992adf6f4efc6187574bb..a03eef1ea4f8db54b7ba5113e339cdb0901e414f 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 e6ad53f70bcd4cc39a902136802e9eecbdd25495..4a4abb561afd799aeb5d79004db1bf278ef091e1 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 86bde5fcfc9b1556551845886905eec9b7b014a0..2b0d1823d3cacb5c2f51f830afd484204aea4c33 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 }, },