Merge pull request #265 from mayuran-deriv/mayuran/font-and-color-change

mayuran-deriv · web-flow · commit 476248f9785d · 2025-08-04T11:54:29.000+04:00
Mayuran/ENGT-2711/[Deriv API] Change the font family and color for the
diff --git a/src/components/Footer/Footer.module.scss b/src/components/Footer/Footer.module.scss
@@ -32,12 +32,15 @@
     flex-direction: column;
     height: 100px;
     margin-bottom: rem(4.8);
+    h6 {
+      color: var(--ifm-font-color-base);
+    }
   }
 
   .SectionTitle {
     font-family: 'Ubuntu', sans-serif;
     font-size: rem(1.6) !important;
-    color: var(--core-color-solid-slate-1400, #000);
+    color: var(--ifm-font-color-base);
     text-align: left;
   }
 
@@ -72,16 +75,20 @@
     align-items: center;
     gap: rem(0.5);
     text-decoration: none;
+    color: var(--ifm-font-color-base);
   }
 
   .labelcolor {
-    color: var(--component-textIcon-normal-prominent);
+    color: var(--ifm-font-color-base);
   }
 
   .SectionContent {
     color: #000;
     font-size: rem(1.4);
     margin-bottom: rem(1.6);
+    p {
+      color: var(--ifm-font-color-base);
+    }
   }
 
   .Communities {
@@ -98,6 +105,9 @@
     gap: rem(0.8);
     white-space: nowrap;
     justify-content: center;
+    button {
+      color: var(--ifm-font-color-base);
+    }
   }
 
   .PaddedButton {
@@ -127,6 +137,9 @@
     line-height: 22px;
     display: flex;
     width: 100%;
+    button {
+      color: var(--ifm-font-color-base);
+    }
   }
 
   .MobileAccordion {
diff --git a/src/components/UserNavbarItem/UserNavbarItem.module.scss b/src/components/UserNavbarItem/UserNavbarItem.module.scss
@@ -17,7 +17,7 @@
 }
 
 .SignedInButton {
-  color: var(--colors-coral500);
+  color: var(--ifm-font-color-base);
   font-weight: bold;
   display: flex !important;
   font-size: rem(1.4);
diff --git a/src/features/Apiexplorer/RequestJSONBox/RequestJSONBox.module.scss b/src/features/Apiexplorer/RequestJSONBox/RequestJSONBox.module.scss
@@ -37,15 +37,15 @@
       gap: rem(0.5);
       padding: rem(2);
 
-      button{
+      button {
         min-width: 96px;
         height: 48px;
       }
 
       button:nth-child(1) {
-        border: var(--component-button-border-width-sm) solid var(--component-button-bg-coral-primary-default);
+        border: var(--component-button-border-width-sm) solid
+          var(--component-button-bg-coral-primary-default);
       }
-
     }
   }
 
@@ -66,4 +66,4 @@
 
 div[role='dialog'] {
   padding-top: rem(0.8);
-}
+}
diff --git a/src/features/Apiexplorer/styles.module.scss b/src/features/Apiexplorer/styles.module.scss
@@ -11,6 +11,9 @@
   justify-content: space-between;
   width: 100%;
   margin-top: rem(4);
+  h2 {
+    color: var(--ifm-font-color-base);
+  }
 
   .pageWrapper {
     display: flex;
@@ -43,6 +46,10 @@
           align-items: stretch;
           gap: 10px;
           z-index: 2;
+          p,
+          span {
+            color: var(--ifm-font-color-base);
+          }
 
           @include mobile-sm {
             flex-direction: column;
@@ -77,4 +84,4 @@
   @include tablet {
     width: 100%;
   }
-}
+}
diff --git a/src/features/Home/ApiFeatures/ApiFeatures.module.scss b/src/features/Home/ApiFeatures/ApiFeatures.module.scss
@@ -23,11 +23,14 @@
     box-sizing: border-box;
     display: flex;
     flex-direction: column;
-
+    h2 {
+      color: var(--ifm-font-color-base);
+    }
     header {
       display: flex;
       flex-direction: column;
       gap: rem(2);
+      color: var(--ifm-font-color-base);
       @media screen and (max-width: 992px) {
         > h2 {
           text-align: center;
@@ -41,11 +44,13 @@
     .FeatureParagraph {
       font-weight: 400;
       line-height: rem(3);
+      color: var(--ifm-font-color-base);
     }
     .FeatureList {
       margin-left: rem(-2);
       font-weight: 400;
       padding-left: rem(2);
+      color: var(--ifm-font-color-base);
       @media screen and (max-width: 992px) {
         font-size: rem(1.4);
       }
diff --git a/src/features/Home/Benefits/Benefits.module.scss b/src/features/Home/Benefits/Benefits.module.scss
@@ -8,6 +8,7 @@
   .Heading {
     margin-bottom: rem(4);
     padding: 0 rem(2);
+    color: var(--ifm-font-color-base);
   }
 
   .BenefitsIcons {
@@ -77,10 +78,12 @@
         > p {
           line-height: rem(3.6);
           font-size: rem(2.4);
+          color: var(--ifm-font-color-base);
         }
 
         .headingSize {
           font-size: rem(3.2);
+          color: var(--ifm-font-color-base);
         }
       }
       @media screen and (max-width: 992px) {
@@ -98,6 +101,7 @@
           > p {
             line-height: rem(3.6);
             font-size: rem(1.8);
+            color: var(--ifm-font-color-base);
           }
         }
       }
@@ -110,6 +114,9 @@
   flex-direction: column;
   justify-content: center;
   align-items: center;
+  .BenefitsIconText {
+    color: var(--ifm-font-color-base);
+  }
   @media screen and (max-width: 992px) {
     > figcaption {
       font-size: var(--fontSizes-sm);
diff --git a/src/features/Home/Benefits/Benefits.tsx b/src/features/Home/Benefits/Benefits.tsx
@@ -18,7 +18,7 @@ const BenefitsIcon = ({ icon, text, alt }: TBenefitsIcon) => {
         src={`/img/${icon}.svg`}
         alt={alt}
       />
-      <Text as='figcaption' type='subtitle-2'>
+      <Text as='figcaption' type='subtitle-2' className={styles.BenefitsIconText}>
         {text}
       </Text>
     </figure>
diff --git a/src/features/Home/ClientLibraries/ClientLibraries.module.scss b/src/features/Home/ClientLibraries/ClientLibraries.module.scss
@@ -13,6 +13,7 @@
   .Heading {
     margin: rem(1) 0;
     padding: 0 rem(2);
+    color: var(--ifm-font-color-base);
   }
   .SubText {
     font-family: var(--ibm-font-family-base);
diff --git a/src/features/Home/GetStarted/GetStarted.module.scss b/src/features/Home/GetStarted/GetStarted.module.scss
@@ -21,6 +21,7 @@
     .getStartedHeading {
       text-align: center;
       padding: 0 rem(2.5) rem(4) rem(2.5);
+      color: var(--ifm-font-color-base);
     }
 
     .termConditions {
@@ -39,6 +40,9 @@
         flex-direction: column;
         gap: rem(2);
       }
+      p {
+        color: var(--ifm-font-color-base);
+      }
     }
     .mainPageCard {
       display: flex;
@@ -91,6 +95,7 @@
         display: flex;
         width: 100%;
         justify-content: space-between;
+        color: var(--ifm-font-color-base);
         .guideIcon,
         .signUpIcon,
         .registerYourAppIcon {
diff --git a/src/features/Home/WaysToEarn/WaysToEarn.module.scss b/src/features/Home/WaysToEarn/WaysToEarn.module.scss
@@ -26,6 +26,7 @@
       max-width: 384px;
       margin-bottom: rem(2.5);
       padding: 0 rem(2);
+      color: var(--ifm-font-color-base);
     }
 
     .Ways {
@@ -44,6 +45,7 @@
       }
       p {
         width: 92%;
+        color: var(--ifm-font-color-base);
       }
       .WaysImg {
         width: 32px;
diff --git a/src/features/dashboard/components/api-token-table/api-table.module.scss b/src/features/dashboard/components/api-token-table/api-table.module.scss
@@ -24,6 +24,10 @@
   flex-direction: column;
   border: 1px solid var(--opacity-black-100);
   border-radius: 32px;
+  p,
+  h3 {
+    color: var(--ifm-font-color-base);
+  }
 
   @include tablet-lg {
     border: none;
diff --git a/src/features/dashboard/components/app-register/app-register.scss b/src/features/dashboard/components/app-register/app-register.scss
@@ -62,6 +62,9 @@
 
   &__tnc {
     margin-top: 24px;
+    p {
+      color: var(--ifm-font-color-base);
+    }
     &__label {
       font-weight: 400;
       font-size: 16px;
diff --git a/src/features/dashboard/components/apps-table/apps-table.scss b/src/features/dashboard/components/apps-table/apps-table.scss
@@ -4,6 +4,10 @@
   border: 1px solid var(--opacity-black-100);
   border-radius: 32px;
   margin-top: 0;
+  p,
+  h5 {
+    color: var(--ifm-font-color-base);
+  }
 
   &.mobile {
     display: flex;
@@ -89,6 +93,10 @@
     display: flex;
     justify-content: space-between;
     padding: 48px 48px 25px;
+    h3,
+    p {
+      color: var(--ifm-font-color-base);
+    }
 
     &.mobile {
       flex-direction: column;
diff --git a/src/features/dashboard/components/dashboard-container/dashboard-container.scss b/src/features/dashboard/components/dashboard-container/dashboard-container.scss
@@ -9,16 +9,20 @@
   @include mobile {
     padding-block: 48px;
   }
-
+  h2 {
+    color: var(--ifm-font-color-base);
+  }
   &__top {
     max-width: 608px;
     margin: auto;
     text-align: center;
     h2 {
       margin-bottom: 8px;
     }
+    p {
+      color: var(--ifm-font-color-base);
+    }
   }
-
   &__main {
     width: 100%;
   }
diff --git a/src/features/dashboard/components/token-register/token-register.scss b/src/features/dashboard/components/token-register/token-register.scss
@@ -11,6 +11,9 @@
 
 .token_register__scopes__text {
   align-self: flex-start;
+  p {
+    color: var(--ifm-font-color-base);
+  }
 }
 
 .token_register__container {
@@ -48,6 +51,9 @@
     width: 100%;
     z-index: 10;
     margin-bottom: 1.5rem;
+    p {
+      color: var(--ifm-font-color-base);
+    }
   }
   .token_register__scopes,
   .token_register__name {
@@ -107,6 +113,9 @@
     @media screen and (max-width: 765px) {
       grid-template-columns: 1fr;
     }
+    p {
+      color: var(--ifm-font-color-base);
+    }
   }
 
   .mblk {
diff --git a/src/features/dashboard/manage-dashboard/manage-dashboard.scss b/src/features/dashboard/manage-dashboard/manage-dashboard.scss
@@ -4,8 +4,13 @@
 
 .breadcrumbs-wrapper {
   padding: 1rem 0;
-
-  a, a:active, a:visited {
+  color: var(--ifm-font-color-base);
+  a,
+  a:active,
+  a:visited {
     text-decoration: none;
+    p {
+      color: var(--ifm-font-color-base) !important;
+    }
   }
 }
diff --git a/src/features/dashboard/update-app/AppUpdateForm/app-update-form.scss b/src/features/dashboard/update-app/AppUpdateForm/app-update-form.scss
@@ -3,6 +3,10 @@
 .update_form {
   display: flex;
   justify-content: center;
+  h5,
+  p {
+    color: var(--ifm-font-color-base);
+  }
 
   .formContent {
     display: flex;
@@ -26,6 +30,12 @@
     align-items: center;
     justify-content: center;
     gap: rem(0.8);
+    &__primary {
+      p,
+      span {
+        color: var(--solid-slate-50);
+      }
+    }
   }
 
   .mblk {
diff --git a/src/features/dashboard/update-app/AppUpdateForm/index.tsx b/src/features/dashboard/update-app/AppUpdateForm/index.tsx
@@ -373,6 +373,7 @@ const AppUpdateForm = ({ initialValues, submit, onCancel, is_loading }: TAppForm
               label={translate({
                 message: 'Update application',
               })}
+              className='update_form__fields_button__primary'
             />
           </div>
         </form>
diff --git a/src/styles/index.scss b/src/styles/index.scss
diff --git a/src/theme/Navbar/MobileSidebar/PrimaryMenu/primary-menu.scss b/src/theme/Navbar/MobileSidebar/PrimaryMenu/primary-menu.scss

Original file line number	Diff line number	Diff line change
`@@ -17,7 +17,7 @@`
`17`	`17`	`}`
`18`	`18`
`19`	`19`	`.SignedInButton {`
`20`		`- color: var(--colors-coral500);`
	`20`	`+ color: var(--ifm-font-color-base);`
`21`	`21`	`font-weight: bold;`
`22`	`22`	`display: flex !important;`
`23`	`23`	`font-size: rem(1.4);`
Original file line number	Diff line number	Diff line change
`@@ -37,15 +37,15 @@`
`37`	`37`	`gap: rem(0.5);`
`38`	`38`	`padding: rem(2);`
`39`	`39`
`40`		`- button{`
	`40`	`+ button {`
`41`	`41`	`min-width: 96px;`
`42`	`42`	`height: 48px;`
`43`	`43`	`}`
`44`	`44`
`45`	`45`	`button:nth-child(1) {`
`46`		`- border: var(--component-button-border-width-sm) solid var(--component-button-bg-coral-primary-default);`
	`46`	`+ border: var(--component-button-border-width-sm) solid`
	`47`	`+ var(--component-button-bg-coral-primary-default);`
`47`	`48`	`}`
`48`		`-`
`49`	`49`	`}`
`50`	`50`	`}`
`51`	`51`
`@@ -66,4 +66,4 @@`
`66`	`66`
`67`	`67`	`div[role='dialog'] {`
`68`	`68`	`padding-top: rem(0.8);`
`69`		`-}`
	`69`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -8,6 +8,7 @@`
`8`	`8`	`.Heading {`
`9`	`9`	`margin-bottom: rem(4);`
`10`	`10`	`padding: 0 rem(2);`
	`11`	`+ color: var(--ifm-font-color-base);`
`11`	`12`	`}`
`12`	`13`
`13`	`14`	`.BenefitsIcons {`
`@@ -77,10 +78,12 @@`
`77`	`78`	`> p {`
`78`	`79`	`line-height: rem(3.6);`
`79`	`80`	`font-size: rem(2.4);`
	`81`	`+ color: var(--ifm-font-color-base);`
`80`	`82`	`}`
`81`	`83`
`82`	`84`	`.headingSize {`
`83`	`85`	`font-size: rem(3.2);`
	`86`	`+ color: var(--ifm-font-color-base);`
`84`	`87`	`}`
`85`	`88`	`}`
`86`	`89`	`@media screen and (max-width: 992px) {`
`@@ -98,6 +101,7 @@`
`98`	`101`	`> p {`
`99`	`102`	`line-height: rem(3.6);`
`100`	`103`	`font-size: rem(1.8);`
	`104`	`+ color: var(--ifm-font-color-base);`
`101`	`105`	`}`
`102`	`106`	`}`
`103`	`107`	`}`
`@@ -110,6 +114,9 @@`
`110`	`114`	`flex-direction: column;`
`111`	`115`	`justify-content: center;`
`112`	`116`	`align-items: center;`
	`117`	`+ .BenefitsIconText {`
	`118`	`+ color: var(--ifm-font-color-base);`
	`119`	`+ }`
`113`	`120`	`@media screen and (max-width: 992px) {`
`114`	`121`	`> figcaption {`
`115`	`122`	`font-size: var(--fontSizes-sm);`
Original file line number	Diff line number	Diff line change
`@@ -13,6 +13,7 @@`
`13`	`13`	`.Heading {`
`14`	`14`	`margin: rem(1) 0;`
`15`	`15`	`padding: 0 rem(2);`
	`16`	`+ color: var(--ifm-font-color-base);`
`16`	`17`	`}`
`17`	`18`	`.SubText {`
`18`	`19`	`font-family: var(--ibm-font-family-base);`
Original file line number	Diff line number	Diff line change
`@@ -26,6 +26,7 @@`
`26`	`26`	`max-width: 384px;`
`27`	`27`	`margin-bottom: rem(2.5);`
`28`	`28`	`padding: 0 rem(2);`
	`29`	`+ color: var(--ifm-font-color-base);`
`29`	`30`	`}`
`30`	`31`
`31`	`32`	`.Ways {`
`@@ -44,6 +45,7 @@`
`44`	`45`	`}`
`45`	`46`	`p {`
`46`	`47`	`width: 92%;`
	`48`	`+ color: var(--ifm-font-color-base);`
`47`	`49`	`}`
`48`	`50`	`.WaysImg {`
`49`	`51`	`width: 32px;`