Unify fontSize values using pxToRem from the theme (#1744)

* Upate font sizes - initail commit * Update font sizes * Add theme import in Grid component * add theme imports * Fix lint errors * Fix lint errors * Fix lint error --------- Co-authored-by: ani-kalpachka <[email protected]>
podkrepi-bg · Mar 20, 2024 · 2917df7 · 2917df7
1 parent 3afbf5a
commit 2917df7
Show file tree

Hide file tree

Showing 30 changed files with 93 additions and 67 deletions.
diff --git a/src/components/admin/affiliates/AffiliatesPage.tsx b/src/components/admin/affiliates/AffiliatesPage.tsx
@@ -20,7 +20,7 @@ import LoopIcon from '@mui/icons-material/Loop'
 const addIconStyles = {
   color: '#4ac3ff',
   background: 'transperent',
-  fontSize: '40px',
+  fontSize: theme.typography.pxToRem(40),
   cursor: 'pointer',
   padding: 0.7,
 }

diff --git a/src/components/admin/countries/grid/CountryGrid.tsx b/src/components/admin/countries/grid/CountryGrid.tsx
@@ -23,7 +23,7 @@ const classes = {
 const Root = styled('div')({
   [`& .${classes.gridColumn}`]: {
     '& .MuiDataGrid-columnHeaderTitle': {
-      fontSize: '14px',
+      fontSize: theme.typography.pxToRem(14),
       fontWeight: '700',
     },
   },

diff --git a/src/components/admin/expenses/grid/Grid.tsx b/src/components/admin/expenses/grid/Grid.tsx
@@ -14,6 +14,8 @@ import DetailsModal from './DetailsModal'
 import DeleteModal from './DeleteModal'
 import { moneyPublic } from 'common/util/money'
 
+import theme from 'common/theme'
+
 const PREFIX = 'Grid'
 
 const classes = {
@@ -33,11 +35,11 @@ const Root = styled('div')({
       marginTop: '30px',
       marginRight: '40px',
     },
-    fontSize: '12px',
+    fontSize: theme.typography.pxToRem(12),
   },
   [`& .${classes.gridColumn}`]: {
     '& .MuiDataGrid-columnHeaderTitle': {
-      fontSize: '14px',
+      fontSize: theme.typography.pxToRem(14),
       fontWeight: '700',
     },
   },

diff --git a/src/components/client/auth/profile/AffiliateProgramTab.tsx b/src/components/client/auth/profile/AffiliateProgramTab.tsx
@@ -41,21 +41,21 @@ const Root = styled(Box)(({ theme }) => ({
   [`& .${classes.h1}`]: {
     fontStyle: 'normal',
     fontWeight: '500',
-    fontSize: '30px',
+    fontSize: theme.typography.pxToRem(30),
     lineHeight: '65px',
     paddingLeft: 2,
   },
   [`& .${classes.h3}`]: {
     fontStyle: 'normal',
     fontWeight: '500',
-    fontSize: '25px',
+    fontSize: theme.typography.pxToRem(25),
     lineHeight: '116.7%',
     margin: '0',
   },
   [`& .${classes.h2}`]: {
     fontStyle: 'normal',
     fontWeight: '500',
-    fontSize: '23px',
+    fontSize: theme.typography.pxToRem(23),
     lineHeight: '116.7%',
     marginBottom: theme.spacing(3),
   },

diff --git a/src/components/client/auth/profile/CertificatesTab.tsx b/src/components/client/auth/profile/CertificatesTab.tsx
@@ -19,14 +19,14 @@ const Root = styled('div')(({ theme }) => ({
   [`& .${classes.h3}`]: {
     fontStyle: 'normal',
     fontWeight: '500',
-    fontSize: '25px',
+    fontSize: theme.typography.pxToRem(25),
     lineHeight: '116.7%',
     margin: '0',
   },
   [`& .${classes.thinFont}`]: {
     fontStyle: 'normal',
     fontWeight: 400,
-    fontSize: '24px',
+    fontSize: theme.typography.pxToRem(24),
     lineHeight: '123.5%',
     letterSpacing: '0.25px',
     color: theme.palette.common.black,
@@ -35,7 +35,7 @@ const Root = styled('div')(({ theme }) => ({
   [`& .${classes.smallText}`]: {
     fontStyle: 'normal',
     fontWeight: '500',
-    fontSize: '15px',
+    fontSize: theme.typography.pxToRem(15),
     lineHeight: '160%',
     letterSpacing: '0.15px',
   },

diff --git a/src/components/client/auth/profile/DonationAgreementTab.tsx b/src/components/client/auth/profile/DonationAgreementTab.tsx
@@ -14,7 +14,7 @@ const Root = styled('div')(({ theme }) => ({
   [`& .${classes.h3}`]: {
     fontStyle: 'normal',
     fontWeight: '500',
-    fontSize: '25px',
+    fontSize: theme.typography.pxToRem(25),
     lineHeight: '116.7%',
     margin: '0',
   },

diff --git a/src/components/client/auth/profile/DonationTab.tsx b/src/components/client/auth/profile/DonationTab.tsx
@@ -52,21 +52,21 @@ const Root = styled('div')(({ theme }) => ({
   [`& .${classes.h1}`]: {
     fontStyle: 'normal',
     fontWeight: '500',
-    fontSize: '30px',
+    fontSize: theme.typography.pxToRem(30),
     lineHeight: '65px',
     paddingLeft: 2,
   },
   [`& .${classes.h3}`]: {
     fontStyle: 'normal',
     fontWeight: '500',
-    fontSize: '25px',
+    fontSize: theme.typography.pxToRem(25),
     lineHeight: '116.7%',
     margin: '0',
   },
   [`& .${classes.h2}`]: {
     fontStyle: 'normal',
     fontWeight: '500',
-    fontSize: '23px',
+    fontSize: theme.typography.pxToRem(23),
     lineHeight: '116.7%',
     marginBottom: theme.spacing(3),
   },

diff --git a/src/components/client/auth/profile/MyCampaignsTab.tsx b/src/components/client/auth/profile/MyCampaignsTab.tsx
@@ -21,14 +21,14 @@ const Root = styled('div')(({ theme }) => ({
   [`& .${classes.h3}`]: {
     fontStyle: 'normal',
     fontWeight: '500',
-    fontSize: '25px',
+    fontSize: theme.typography.pxToRem(25),
     lineHeight: '116.7%',
     margin: '0',
   },
   [`& .${classes.thinFont}`]: {
     fontStyle: 'normal',
     fontWeight: 400,
-    fontSize: '24px',
+    fontSize: theme.typography.pxToRem(24),
     lineHeight: '123.5%',
     letterSpacing: '0.25px',
     color: theme.palette.common.black,
@@ -37,7 +37,7 @@ const Root = styled('div')(({ theme }) => ({
   [`& .${classes.smallText}`]: {
     fontStyle: 'normal',
     fontWeight: '500',
-    fontSize: '15px',
+    fontSize: theme.typography.pxToRem(15),
     lineHeight: '160%',
     letterSpacing: '0.15px',
   },

diff --git a/src/components/client/auth/profile/MyNotificationsTab.tsx b/src/components/client/auth/profile/MyNotificationsTab.tsx
@@ -27,23 +27,22 @@ const Root = styled('div')(({ theme }) => ({
   [`& .${classes.h3}`]: {
     fontStyle: 'normal',
     fontWeight: '500',
-    fontSize: '25px',
+    fontSize: theme.typography.pxToRem(25),
     lineHeight: '116.7%',
     margin: '0',
   },
   [`& .${classes.thinFont}`]: {
     fontStyle: 'normal',
     fontWeight: 400,
-    fontSize: '24px',
+    fontSize: theme.typography.pxToRem(24),
     lineHeight: '123.5%',
     letterSpacing: '0.25px',
-    // color: theme.palette.common.black,
     margin: 0,
   },
   [`& .${classes.smallText}`]: {
     fontStyle: 'normal',
     fontWeight: '500',
-    fontSize: '15px',
+    fontSize: theme.typography.pxToRem(15),
     lineHeight: '160%',
     letterSpacing: '0.15px',
   },

diff --git a/src/components/client/auth/profile/PersonalInfoTab.tsx b/src/components/client/auth/profile/PersonalInfoTab.tsx
@@ -44,7 +44,7 @@ const Root = styled('div')(({ theme }) => ({
   [`& .${classes.heading}`]: {
     fontStyle: 'normal',
     fontWeight: 400,
-    fontSize: '24px',
+    fontSize: theme.typography.pxToRem(24),
     lineHeight: '123.5%',
     letterSpacing: '0.25px',
     color: theme.palette.common.black,
@@ -57,22 +57,22 @@ const Root = styled('div')(({ theme }) => ({
   [`& .${classes.graySpan}`]: {
     fontStyle: 'normal',
     fontWeight: '400',
-    fontSize: '18px',
+    fontSize: theme.typography.pxToRem(18),
     lineHeight: '133.4%',
     color: '#909090',
   },
 
   [`& .${classes.h5}`]: {
     fontStyle: 'normal',
     fontWeight: '600',
-    fontSize: '22px',
+    fontSize: theme.typography.pxToRem(22),
     lineHeight: '133.4%',
   },
 
   [`& .${classes.h3}`]: {
     fontStyle: 'normal',
     fontWeight: '500',
-    fontSize: '25px',
+    fontSize: theme.typography.pxToRem(25),
     lineHeight: '116.7%',
     margin: '0',
   },

diff --git a/src/components/client/auth/profile/ProfilePage.tsx b/src/components/client/auth/profile/ProfilePage.tsx
@@ -33,7 +33,7 @@ const StyledLayout = styled(Layout)({
   [`& .${classes.h1}`]: {
     fontStyle: 'normal',
     fontWeight: 500,
-    fontSize: '45px',
+    fontSize: theme.typography.pxToRem(45),
     lineHeight: '112px',
     letterSpacing: '-1.5px',
     color: theme.palette.common.black,

diff --git a/src/components/client/auth/register/RegisterPage.tsx b/src/components/client/auth/register/RegisterPage.tsx
@@ -33,6 +33,8 @@ import {
 } from 'gql/user-registration'
 import RegisterSuccess from './RegisterSuccess'
 
+import theme from 'common/theme'
+
 const providerIcons = {
   google: <Google style={{ width: 43.55, height: 43.55 }} />,
 }
@@ -146,7 +148,7 @@ export default function RegisterPage({ providers }: RegisterPageProps) {
             <Divider
               sx={{
                 py: 3,
-                fontSize: 16,
+                fontSize: theme.typography.pxToRem(16),
                 textTransform: 'uppercase',
                 color: '#444444',
                 ':before': {

diff --git a/src/components/client/campaign-expenses/grid/CampaignExpensesGrid.tsx b/src/components/client/campaign-expenses/grid/CampaignExpensesGrid.tsx
@@ -14,6 +14,8 @@ import { useCampaignExpensesList } from 'common/hooks/expenses'
 import { moneyPublic } from 'common/util/money'
 import { ModalStoreImpl } from 'stores/dashboard/ModalStore'
 
+import theme from 'common/theme'
+
 const PREFIX = 'Grid'
 
 type Props = { slug: string }
@@ -37,11 +39,11 @@ const Root = styled('div')({
       marginTop: '30px',
       marginRight: '40px',
     },
-    fontSize: '12px',
+    fontSize: theme.typography.pxToRem(12),
   },
   [`& .${classes.gridColumn}`]: {
     '& .MuiDataGrid-columnHeaderTitle': {
-      fontSize: '14px',
+      fontSize: theme.typography.pxToRem(14),
       fontWeight: '700',
     },
   },

diff --git a/src/components/client/campaign-news/secured/NewsAdminPage.tsx b/src/components/client/campaign-news/secured/NewsAdminPage.tsx
@@ -14,6 +14,8 @@ import { routes } from 'common/routes'
 import AddIcon from '@mui/icons-material/Add'
 import Link from 'next/link'
 
+import theme from 'common/theme'
+
 const PREFIX = 'NewsAdminPage'
 
 const classes = {
@@ -25,7 +27,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
@@ -1,11 +1,13 @@
 import { Grid, Typography } from '@mui/material'
 
+import theme from 'common/theme'
+
 type RemarkProps = {
   text: string
 }
 
 const textStyles = {
-  fontSize: '13px',
+  fontSize: theme.typography.pxToRem(13),
   marginTop: '100px',
 }