Update font sizes

podkrepi-bg · Mar 17, 2024 · b8a33d1 · b8a33d1
1 parent ea2f2d3
commit b8a33d1
Show file tree

Hide file tree

Showing 14 changed files with 30 additions and 27 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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}
           </Avatar>

diff --git 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}
           </Avatar>

diff --git 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 }}>
               <CloseModalButton onClose={handleClose} />
               <React.Fragment>
-                <ThumbUpIcon sx={{ fontSize: '64px', color: '#03C03C' }} />
+                <ThumbUpIcon sx={{ fontSize: theme.typography.pxToRem(64), color: '#03C03C' }} />
                 <DialogTitle>
                   <Typography
                     variant="h5"

diff --git a/src/components/client/notifications/GeneralSubscribeModal.tsx b/src/components/client/notifications/GeneralSubscribeModal.tsx
@@ -163,7 +163,7 @@ export default function RenderSubscribeModal({ setOpen }: ModalProps) {
           }}>
           <CloseModalButton onClose={handleClose} />
           <React.Fragment>
-            <EmailIcon color="primary" sx={{ fontSize: '64px' }} />
+            <EmailIcon color="primary" sx={{ fontSize: theme.typography.pxToRem(64), }} />
             <DialogTitle style={{ textAlign: 'center', width: '100%' }}>
               {t('common:notifications.subscribe-title')}
             </DialogTitle>
@@ -237,7 +237,7 @@ export default function RenderSubscribeModal({ setOpen }: ModalProps) {
           <CloseModalButton onClose={handleClose} />
           {!isSuccess ? (
             <React.Fragment>
-              <EmailIcon color="primary" sx={{ fontSize: '64px' }} />
+              <EmailIcon color="primary" sx={{ fontSize: theme.typography.pxToRem(64), }} />
               <DialogTitle style={{ textAlign: 'center', width: '100%' }}>
                 {t('common:notifications.subscribe-title')}
               </DialogTitle>
@@ -250,7 +250,7 @@ export default function RenderSubscribeModal({ setOpen }: ModalProps) {
               style={{ textAlign: 'center', fontSize: 20, fontWeight: 600, paddingBottom: 6 }}>
               <CloseModalButton onClose={handleClose} />
               <React.Fragment>
-                <ThumbUpIcon sx={{ fontSize: '64px', color: '#03C03C' }} />
+                <ThumbUpIcon sx={{ fontSize: theme.typography.pxToRem(64), color: '#03C03C' }} />
                 <DialogTitle>
                   <Typography
                     variant="h5"

diff --git a/src/components/client/notifications/SubscriptionPage.tsx b/src/components/client/notifications/SubscriptionPage.tsx
@@ -152,7 +152,7 @@ export default function SubscriptionPage(data: Props) {
         {isSuccess ? (
           <React.Fragment>
             <Grid item mt={5} display="flex" direction="column" alignItems="center">
-              <ThumbUpIcon sx={{ fontSize: '64px', color: '#03C03C' }} />
+              <ThumbUpIcon sx={{ fontSize: theme.typography.pxToRem(64), color: '#03C03C' }} />
               <DialogTitle>
                 <Typography
                   variant="h5"
@@ -178,7 +178,7 @@ export default function SubscriptionPage(data: Props) {
           <React.Fragment>
             <React.Fragment>
               <Grid item mt={5} display="flex" direction="column" alignItems="center">
-                <AnnouncementIcon sx={{ fontSize: '64px', color: '#FF007F' }} />
+                <AnnouncementIcon sx={{ fontSize: theme.typography.pxToRem(64), color: '#FF007F' }} />
                 <DialogTitle>
                   <Typography
                     variant="h5"

diff --git a/src/components/common/FormFieldButton.tsx b/src/components/common/FormFieldButton.tsx
@@ -41,7 +41,7 @@ const Root = styled('div')(({ theme }) => ({
   [`& .${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
@@ -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
@@ -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) {
         <IconButton>
           <HomeIcon color="action" />
         </IconButton>
-        <Typography fontSize={'18px'} sx={{ px: 0.5, height: '20px' }}>
+        <Typography fontSize={theme.typography.pxToRem(18)} sx={{ px: 0.5, height: '20px' }}>
           /
         </Typography>
         <IconButton sx={{ borderRadius: '25px' }}>