Upate font sizes - initail commit

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

Hide file tree

Showing 13 changed files with 32 additions and 29 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
@@ -33,11 +33,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',
     },
   },