From b8a33d139b9003487990bc16b1b8dd51572935c3 Mon Sep 17 00:00:00 2001 From: ani-kalpachka Date: Sun, 17 Mar 2024 11:07:36 +0200 Subject: [PATCH] Update font sizes --- .../client/campaign-news/secured/NewsAdminPage.tsx | 2 +- src/components/client/campaigns/CampaignDetails.tsx | 6 +++--- src/components/client/campaigns/CampaignsPage.tsx | 8 ++++---- src/components/client/campaigns/DonationWishes.tsx | 2 +- src/components/client/campaigns/InlineDonation.tsx | 2 +- src/components/client/irregularity/helpers/Remark.tsx | 2 +- src/components/client/layout/nav/AdminMenu.tsx | 2 +- src/components/client/layout/nav/PrivateMenu.tsx | 2 +- .../client/notifications/CampaignSubscribeModal.tsx | 2 +- .../client/notifications/GeneralSubscribeModal.tsx | 6 +++--- .../client/notifications/SubscriptionPage.tsx | 4 ++-- src/components/common/FormFieldButton.tsx | 4 ++-- src/components/common/QuillStyleWrapper.tsx | 10 +++++----- src/components/common/navigation/AppBarMenu.tsx | 5 ++++- 14 files changed, 30 insertions(+), 27 deletions(-) diff --git a/src/components/client/campaign-news/secured/NewsAdminPage.tsx b/src/components/client/campaign-news/secured/NewsAdminPage.tsx index 26cd475c0..25143b207 100644 --- a/src/components/client/campaign-news/secured/NewsAdminPage.tsx +++ b/src/components/client/campaign-news/secured/NewsAdminPage.tsx @@ -25,7 +25,7 @@ const classes = { const Root = styled(Layout)({ [`& .${classes.gridColumn}`]: { '& .MuiDataGrid-columnHeaderTitle': { - fontSize: '15px', + fontSize: theme.typography.pxToRem(15), fontWeight: '700', }, }, diff --git a/src/components/client/campaigns/CampaignDetails.tsx b/src/components/client/campaigns/CampaignDetails.tsx index c78e0a6db..c26baf3e3 100644 --- a/src/components/client/campaigns/CampaignDetails.tsx +++ b/src/components/client/campaigns/CampaignDetails.tsx @@ -68,7 +68,7 @@ const StyledGrid = styled(Grid)(({ theme }) => ({ }, ['& .ql-editor']: { - fontSize: theme.spacing(2), + fontSize: theme.typography.pxToRem(16), fontWeight: 500, lineHeight: theme.spacing(4), paddingLeft: '0', @@ -109,10 +109,10 @@ const StyledGrid = styled(Grid)(({ theme }) => ({ }, }, [`& .${classes.financeSummary}`]: { - fontSize: `1.2rem`, + fontSize: theme.typography.pxToRem(19), [theme.breakpoints.up('sm')]: { marginLeft: theme.spacing(2), - fontSize: `1.3rem`, + fontSize: theme.typography.pxToRem(21), }, }, })) diff --git a/src/components/client/campaigns/CampaignsPage.tsx b/src/components/client/campaigns/CampaignsPage.tsx index a99a79a30..3b3d66a63 100644 --- a/src/components/client/campaigns/CampaignsPage.tsx +++ b/src/components/client/campaigns/CampaignsPage.tsx @@ -30,7 +30,7 @@ const Root = styled(Layout)(({ theme }) => ({ fontWeight: '500', color: '#2196F3', fontStyle: 'normal', - fontSize: '45px', + fontSize: theme.typography.pxToRem(45), lineHeight: '45px', alignItems: 'center', textAlign: 'center', @@ -42,7 +42,7 @@ const Root = styled(Layout)(({ theme }) => ({ marginTop: theme.spacing(3), fontStyle: 'normal', fontWeight: '400', - fontSize: '16px', + fontSize: theme.typography.pxToRem(16), lineHeight: '175 %', textAlign: 'center', letterSpacing: '0.15px', @@ -52,7 +52,7 @@ const Root = styled(Layout)(({ theme }) => ({ marginBottom: theme.spacing(3), fontStyle: 'normal', fontWeight: '500', - fontSize: '25px', + fontSize: theme.typography.pxToRem(25), lineHeight: '120%', textAlign: 'center', color: '#2196F3', @@ -66,7 +66,7 @@ const Root = styled(Layout)(({ theme }) => ({ }, [`& .${classes.arrowIcon}`]: { - fontSize: theme.spacing(8), + fontSize: theme.typography.pxToRem(48), }, })) diff --git a/src/components/client/campaigns/DonationWishes.tsx b/src/components/client/campaigns/DonationWishes.tsx index 58bcbe137..8607a6124 100644 --- a/src/components/client/campaigns/DonationWishes.tsx +++ b/src/components/client/campaigns/DonationWishes.tsx @@ -99,7 +99,7 @@ export default function DonationWishes({ campaignId, pageSize = 5 }: Props) { component="h4" sx={{ color: theme.palette.common.black, - fontSize: '2rem', + fontSize: theme.typography.pxToRem(32), paddingBottom: '1rem', }}> {t('campaign.messages')} diff --git a/src/components/client/campaigns/InlineDonation.tsx b/src/components/client/campaigns/InlineDonation.tsx index c41e32b6a..4397b22f5 100644 --- a/src/components/client/campaigns/InlineDonation.tsx +++ b/src/components/client/campaigns/InlineDonation.tsx @@ -118,7 +118,7 @@ const StyledGrid = styled(Grid)(({ theme }) => ({ display: 'flex', justifyContent: 'center', width: '50%', - fontSize: '13px', + fontSize: theme.typography.pxToRem(13), backgroundColor: 'transparant', paddingBottom: theme.spacing(0.2), borderRadius: '60px', diff --git a/src/components/client/irregularity/helpers/Remark.tsx b/src/components/client/irregularity/helpers/Remark.tsx index 184b79935..76303a3a9 100644 --- a/src/components/client/irregularity/helpers/Remark.tsx +++ b/src/components/client/irregularity/helpers/Remark.tsx @@ -5,7 +5,7 @@ type RemarkProps = { } const textStyles = { - fontSize: '13px', + fontSize: theme.typography.pxToRem(13), marginTop: '100px', } diff --git a/src/components/client/layout/nav/AdminMenu.tsx b/src/components/client/layout/nav/AdminMenu.tsx index 794e26f4b..835585027 100644 --- a/src/components/client/layout/nav/AdminMenu.tsx +++ b/src/components/client/layout/nav/AdminMenu.tsx @@ -83,7 +83,7 @@ export default function AdminMenu() { bgcolor: theme.palette.success.light, height: theme.spacing(4.5), width: theme.spacing(4.5), - fontSize: '1rem', + fontSize: theme.typography.pxToRem(16), }}> {lettersAvatar} diff --git a/src/components/client/layout/nav/PrivateMenu.tsx b/src/components/client/layout/nav/PrivateMenu.tsx index 9bbd4cbf2..8e9a11d68 100644 --- a/src/components/client/layout/nav/PrivateMenu.tsx +++ b/src/components/client/layout/nav/PrivateMenu.tsx @@ -76,7 +76,7 @@ export default function PrivateMenu() { bgcolor: theme.palette.success.light, height: theme.spacing(4.5), width: theme.spacing(4.5), - fontSize: '1rem', + fontSize: theme.typography.pxToRem(16), }}> {lettersAvatar} diff --git a/src/components/client/notifications/CampaignSubscribeModal.tsx b/src/components/client/notifications/CampaignSubscribeModal.tsx index fd919cf44..926ca4716 100644 --- a/src/components/client/notifications/CampaignSubscribeModal.tsx +++ b/src/components/client/notifications/CampaignSubscribeModal.tsx @@ -231,7 +231,7 @@ export default function RenderCampaignSubscribeModal({ campaign, setOpen }: Moda style={{ textAlign: 'center', fontSize: 20, fontWeight: 600, paddingBottom: 6 }}> - + - + {t('common:notifications.subscribe-title')} @@ -237,7 +237,7 @@ export default function RenderSubscribeModal({ setOpen }: ModalProps) { {!isSuccess ? ( - + {t('common:notifications.subscribe-title')} @@ -250,7 +250,7 @@ export default function RenderSubscribeModal({ setOpen }: ModalProps) { style={{ textAlign: 'center', fontSize: 20, fontWeight: 600, paddingBottom: 6 }}> - + - + - + ({ [`& .${classes.errorText}`]: { color: theme.palette.error.main, fontWeight: 400, - fontSize: '0.75rem', + fontSize: theme.typography.pxToRem(12), lineHeight: 1.66, letterSpacing: '0.03333em', textAlign: 'left', @@ -52,7 +52,7 @@ const Root = styled('div')(({ theme }) => ({ }, [`& .${classes.placeholderText}`]: { color: 'rgba(0, 0, 0, 0.6)', - fontSize: '1rem', + fontSize: theme.typography.pxToRem(16), lineHeight: '1.4375em', letterSpacing: '0.01071em', fontWeight: 400, diff --git a/src/components/common/QuillStyleWrapper.tsx b/src/components/common/QuillStyleWrapper.tsx index c571dd48d..5fd76b003 100644 --- a/src/components/common/QuillStyleWrapper.tsx +++ b/src/components/common/QuillStyleWrapper.tsx @@ -56,25 +56,25 @@ export const QuillStypeWrapper = styled(Grid)(({ theme }) => ({ }, ['.ql-editor, .ql-size-small']: { - fontSize: '.75em', + fontSize: theme.typography.pxToRem(12), }, ['.ql-editor, .ql-size-large']: { - fontSize: '1.5em', + fontSize: theme.typography.pxToRem(24), }, ['.ql-editor, .ql-size-huge']: { - fontSize: '2.5em', + fontSize: theme.typography.pxToRem(40), }, ['.ql-bubble, ql-editor h1']: { position: 'relative', width: '100%', - fontSize: '1em', + fontSize: theme.typography.pxToRem(16), }, ['.ql-bubble, ql-editor h2']: { - fontSize: '1.5em', + fontSize: theme.typography.pxToRem(24), }, ['.ql-bubble .ql-editor a ']: { diff --git a/src/components/common/navigation/AppBarMenu.tsx b/src/components/common/navigation/AppBarMenu.tsx index ca19cf976..351d68dd9 100644 --- a/src/components/common/navigation/AppBarMenu.tsx +++ b/src/components/common/navigation/AppBarMenu.tsx @@ -1,6 +1,9 @@ import { Typography, Box, Toolbar } from '@mui/material' import HomeIcon from '@mui/icons-material/Home' import { IconButton } from '@mui/material' + +import theme from 'common/theme' + type Props = { title: string } @@ -24,7 +27,7 @@ export default function AppBarMenu({ title }: Props) { - + /