Plant-for-the-Planet-org · mohitb35 · Apr 23, 2025 · Mar 25, 2025 · Mar 26, 2025 · Mar 28, 2025
diff --git a/src/features/common/CarouselSlider/CarouselSlider.module.scss b/src/features/common/CarouselSlider/CarouselSlider.module.scss
@@ -1,38 +1,40 @@
+@import '../../../theme/theme';
+
 .carouselSliderContainer {
-    display: flex;
-    gap: 24px;
-    flex-direction: column;
+  display: flex;
+  gap: 24px;
+  flex-direction: column;
 }
 
 .carouselHeader {
-    display: flex;
+  display: flex;
 
-    @media screen and (max-width: 861px) {
-        flex-direction: column;
-        align-items: center;
-        gap: 10px;
-    }
+  @media screen and (max-width: 861px) {
+    flex-direction: column;
+    align-items: center;
+    gap: 10px;
+  }
 }
 
 .titleContainer {
-    text-align: center;
-    flex: 3;
-    font-size: 22px;
+  text-align: center;
+  flex: 3;
+  font-size: $fontLarge;
 }
 
 .arrowContainer {
-    display: flex;
-    gap: 14px;
-    button {
-        filter: drop-shadow(5.25px 5.25px 14px rgba(0, 0, 0, 0.25));
-    }
+  display: flex;
+  gap: 14px;
+  button {
+    filter: drop-shadow(5.25px 5.25px 14px rgba(0, 0, 0, 0.25));
+  }
 
-    svg {
-        overflow: visible;
-        width: 100%;
-    }
+  svg {
+    overflow: visible;
+    width: 100%;
+  }
 
-    @media screen and (min-width: 1101px) {
-        display: none;
-    }
-}
+  @media screen and (min-width: 1101px) {
+    display: none;
+  }
+}
diff --git a/src/features/common/InputTypes/BootstrapInput.tsx b/src/features/common/InputTypes/BootstrapInput.tsx
@@ -1,6 +1,7 @@
 import type { InputBaseProps } from '@mui/material';
 import type { Tenant } from '@planet-sdk/common/build/types/tenant';
 
+import themeProperties from '../../../theme/themeProperties';
 import { InputBase, styled } from '@mui/material';
 import { useTenant } from '../Layout/TenantContext';
 
@@ -19,7 +20,7 @@ const StyledInputBase = styled(InputBase, {
     backgroundColor: 'var(--background-color)',
     color: 'var(--primary-font-color)',
     boxShadow: '0px 3px 6px #00000029',
-    fontSize: 14,
+    fontSize: themeProperties.fontSizes.fontSmall,
     padding: '10px 26px 10px 12px',
     // Use the system font instead of the default Roboto font.
     fontFamily: [config.config.font.primaryFontFamily].join(','),

diff --git a/src/features/common/InputTypes/MaterialTextField.tsx b/src/features/common/InputTypes/MaterialTextField.tsx
@@ -3,6 +3,7 @@ import type { Tenant } from '@planet-sdk/common/build/types/tenant';
 
 import { TextField, styled } from '@mui/material';
 import { useTenant } from '../Layout/TenantContext';
+import themeProperties from '../../../theme/themeProperties';
 
 interface StyledTextFieldType {
   config: Tenant;
@@ -25,7 +26,7 @@ const StyledTextField = styled(TextField, {
   '& label': {
     color: 'var(--primary-font-color)',
     fontFamily: config.config.font.primaryFontFamily,
-    fontSize: '14px',
+    fontSize: themeProperties.fontSizes.fontSmall,
     top: '-3px',
   },
   '& .MuiInputLabel-outlined.MuiInputLabel-shrink': {

diff --git a/src/features/common/InputTypes/MuiAutoComplete.tsx b/src/features/common/InputTypes/MuiAutoComplete.tsx
@@ -1,4 +1,5 @@
 import { Autocomplete, styled } from '@mui/material';
+import themeProperties from '../../../theme/themeProperties';
 
 const MuiAutoComplete = styled(Autocomplete)((/* { theme } */) => {
   return {
@@ -13,7 +14,7 @@ const MuiAutoComplete = styled(Autocomplete)((/* { theme } */) => {
 const StyledAutoCompleteOption = styled('li')({
   '& span': {
     marginRight: 10,
-    fontSize: 18,
+    fontSize: themeProperties.fontSizes.fontMedium,
   },
 });
 

diff --git a/src/features/common/LandingVideo/styles.module.scss b/src/features/common/LandingVideo/styles.module.scss
@@ -44,7 +44,7 @@
     transition-duration: 0.5s;
     transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
     font-weight: bold;
-    font-size: 16px;
+    font-size: $fontSixteen;
   }
   .landingVideoSkipButton:hover {
     transform: scale(1.05);
@@ -127,7 +127,6 @@
   top: 100px;
 }
 
-
 @include xsPhoneView {
   .playButton {
     top: 149px;

diff --git a/src/features/common/Layout/DashboardView/index.tsx b/src/features/common/Layout/DashboardView/index.tsx
@@ -2,6 +2,7 @@ import type { ReactElement, ReactNode } from 'react';
 
 import { Box, Grid, ThemeProvider, styled } from '@mui/material';
 import materialTheme from '../../../../theme/themeStyles';
+import themeProperties from '../../../../theme/themeProperties';
 
 interface DashboardViewProps {
   title: string;
@@ -12,7 +13,7 @@ interface DashboardViewProps {
 }
 
 const DashboardGridContainer = styled(Box)(({ theme }) => ({
-  fontSize: '1rem',
+  fontSize: themeProperties.fontSizes.fontSixteen,
   backgroundColor: theme.palette.background.base,
   marginTop: 80,
   minHeight: '100vh',

diff --git a/src/features/common/Layout/Footer/Footer.module.scss b/src/features/common/Layout/Footer/Footer.module.scss
@@ -127,7 +127,7 @@
 }
 .unep_logo_text {
   font-family: $primaryFontFamily;
-  font-size: 9px;
+  font-size: $fontXXSmall;
   font-weight: normal;
   letter-spacing: 0.18px;
   color: $primaryFontColor;

diff --git a/src/features/common/Layout/Navbar/Navbar.scss b/src/features/common/Layout/Navbar/Navbar.scss
@@ -163,7 +163,7 @@
     display: flex;
     align-items: flex-start;
     font-family: inherit;
-    font-size: 16px;
+    font-size: $fontSixteen;
     color: $primaryFontColor;
   }
   & .menuRow {

diff --git a/src/features/common/Layout/UserLayout/UserLayout.module.scss b/src/features/common/Layout/UserLayout/UserLayout.module.scss
@@ -253,7 +253,7 @@
     }
   }
   button {
-    font-size: 14px;
+    font-size: $fontSmall;
     font-weight: 400;
     &:hover {
       cursor: pointer;

diff --git a/src/features/common/RedeemCode/SuccessfullyRedeemed.tsx b/src/features/common/RedeemCode/SuccessfullyRedeemed.tsx
@@ -31,11 +31,11 @@ export const SuccessfullyRedeemed = ({
         {redeemedCodeData?.project?.classification === 'membership'
           ? tRedeem.rich('membershipRedeemSuccessMessage', {
               line1: (chunks) => <p>{chunks}</p>,
-              line2: (chunks) => <p>{chunks}</p>,
+              line2: (chunks) => <p className={styles.subText}>{chunks}</p>,
             })
           : tRedeem.rich('redeemSuccessMessage', {
               line1: (chunks) => <p>{chunks}</p>,
-              line2: (chunks) => <p>{chunks}</p>,
+              line2: (chunks) => <p className={styles.subText}>{chunks}</p>,
             })}
       </div>
 

diff --git a/src/features/common/RedeemCode/style/RedeemModal.module.scss b/src/features/common/RedeemCode/style/RedeemModal.module.scss
@@ -59,13 +59,19 @@
 }
 
 .successMessage {
-  font-size: 25px;
+  font-size: $fontLarge;
   font-weight: bold;
   display: flex;
   flex-direction: column;
   gap: 10px;
   color: $primaryColor;
   > p {
     text-align: center;
+
+    &.subText {
+      color: #2f3336;
+      font-weight: 400;
+      font-size: $fontMedium;
+    }
   }
 }
diff --git a/src/features/common/TreeCounter/TreeCounter.module.scss b/src/features/common/TreeCounter/TreeCounter.module.scss
@@ -119,9 +119,9 @@
   width: max-content;
   color: #4f4f4f;
   font-weight: bold;
-  font-size: 2rem;
+  font-size: $fontXXLarge;
   @include xsPhoneView {
-    font-size: 21px;
+    font-size: $fontLarge;
   }
 }
 
@@ -140,8 +140,8 @@
 }
 
 .treesPlanted {
-  font-size: 24px;
+  font-size: $fontXLarge;
   @include xsPhoneView {
-    font-size: 11.2px;
+    font-size: $fontXSmall;
   }
 }
diff --git a/src/features/common/WebappButton/WebappButton.module.scss b/src/features/common/WebappButton/WebappButton.module.scss
@@ -45,7 +45,7 @@
 }
 
 .webappButtonLabel {
-  font-size: 14px;
+  font-size: $fontSmall;
   font-weight: 700;
   color: #2f3336;
   cursor: pointer;

diff --git a/src/features/donations/styles/DirectGift.module.scss b/src/features/donations/styles/DirectGift.module.scss
@@ -36,7 +36,7 @@
 }
 
 .giftTo a {
-  color: $primaryColor;
+  color: $primaryDarkColor;
   cursor: pointer;
 }
 
@@ -45,7 +45,7 @@
 }
 
 .selectProject {
-  font-size: 20px;
+  font-size: $fontLarge;
   min-width: 150px;
   color: $primaryFontColor;
 }

diff --git a/src/features/projects/styles/PlantLocation.module.scss b/src/features/projects/styles/PlantLocation.module.scss
@@ -8,7 +8,7 @@
   padding: 16px;
   color: $primaryFontColor;
   div:first-child {
-    font-size: 18px;
+    font-size: $fontMedium;
   }
   span {
     font-weight: 700;
@@ -131,7 +131,7 @@
   position: absolute;
   z-index: 1;
   &.singleSelected {
-    background-color:  rgba(0, 122, 73, 1);
+    background-color: rgba(0, 122, 73, 1);
   }
 }
 

diff --git a/src/features/projects/styles/ProjectSnippet.module.scss b/src/features/projects/styles/ProjectSnippet.module.scss
@@ -153,7 +153,7 @@
   border-radius: 14px;
   padding: 2px 8px 2px 2px;
   font-weight: 700;
-  font-size: 12px;
+  font-size: $fontXSmall;
 
   * {
     color: #6d4230;
@@ -204,7 +204,7 @@
 
 .target {
   font-family: $primaryFontFamily;
-  font-size: 13px;
+  font-size: $fontXSmall;
   color: $primaryFontColor;
   font-weight: bold;
   margin-right: 4px;
@@ -216,7 +216,7 @@
   text-align: center;
   color: #4f4f4f;
   height: 34px;
-  font-size: 10px;
+  font-size: $fontXXSmall;
   font-weight: 400;
   line-height: 1.5em;
   margin-top: 10px;
@@ -299,7 +299,7 @@
 }
 .projectHoverIcon {
   display: inline-flex;
-  font-size: 10px;
+  font-size: $fontXXSmall;
   font-weight: 700;
   color: var(--non-donatable-project-background-color);
   align-items: center;

diff --git a/src/features/projects/styles/ProjectsMap.module.scss b/src/features/projects/styles/ProjectsMap.module.scss
@@ -531,7 +531,7 @@
   position: fixed;
   bottom: 0px;
   right: 20px;
-  font-size: 11px;
+  font-size: $fontXSmall;
   color: $primaryFontColor;
   cursor: pointer;
   background-color: #f2f2f2;
@@ -606,7 +606,7 @@
 .clickForDetails {
   padding: 5px 10px;
   border-radius: 10px;
-  font-size: 14px;
+  font-size: $fontSmall;
   display: flex;
   flex-direction: row;
   justify-content: center;

diff --git a/src/features/projects/styles/VegetationChange.module.scss b/src/features/projects/styles/VegetationChange.module.scss
@@ -53,7 +53,7 @@
 
 .options p sup {
   padding-left: 1px;
-  font-size: 8px;
+  font-size: $fontXXSmall;
   color: $primaryFontColor;
 }