Merge pull request #7045 from kishore08-07/fix-trust-pages-font

Fixed font-family to Qanelas Soft

Author: saurabhraghuvanshii

src/sections/Community/Handbook/Handbook.style.js

@@ -3,6 +3,11 @@ export const HandbookWrapper = styled.div`
     display: flex;
     flex-direction: column;
 
+    /* Ensure all text elements use Qanelas Soft */
+    * {
+      font-family: "Qanelas Soft", "Open Sans", sans-serif;
+    }
+
     .content > a:first-of-type > h2:first-of-type {
       padding-top: 1rem;
     }

src/sections/Company/Legal/cookie-notice/index.js

@@ -11,6 +11,7 @@ import {
   TableHead,
   TableBody,
   SistentThemeProvider,
+  createTheme,
 } from "@sistent/sistent";
 import TOC from "../../../../components/legal-navigation/index";
 import TocPagination from "../../../../components/legal-navigation/TocPagination";
@@ -41,11 +42,13 @@ const StyledTableCell = styled(TableCell)(({ theme }) => ({
   padding: "0.75rem",
   borderBottom: `1px solid ${theme.palette.divider}`,
   borderRadius: "0px",
+  fontFamily: "\"Qanelas Soft\", \"Open Sans\", sans-serif",
 }));
 
 const StyledHeaderCell = styled(StyledTableCell)(() => ({
   fontWeight: 600,
   backgroundColor: "transparent",
+  fontFamily: "\"Qanelas Soft\", \"Open Sans\", sans-serif",
 }));
 
 const cookieData = [
@@ -83,6 +86,13 @@ const cookieData = [
 const CookieNotice = () => {
   const { isDark } = useStyledDarkMode();
 
+  // Create custom theme with Qanelas Soft font family
+  const customTheme = createTheme({
+    typography: {
+      fontFamily: "\"Qanelas Soft\", \"Open Sans\", sans-serif",
+    },
+  });
+
   return (
     <TermsWrapper>
       <div className="page-header-section">
@@ -143,7 +153,7 @@ const CookieNotice = () => {
               <p>
               Third-party cookies are set by domains other than Layer5’s to support analytics, advertising, or other functionalities. These cookies may collect data across multiple websites to tailor ads based on your interests. Below is a list of third-party providers we use, along with their purposes and opt-out options:
               </p>
-              <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+              <SistentThemeProvider initialMode={isDark ? "dark" : "light"} theme={customTheme}>
                 <Row className="table-container" $Hcenter>
                   <Col md={12} sx={{ px: 0 }}>
                     <StyledTableContainer>

src/sections/Company/Legal/privacy/index.js

@@ -11,6 +11,7 @@ import {
   TableHead,
   TableBody,
   SistentThemeProvider,
+  createTheme,
 } from "@sistent/sistent";
 import TOC from "../../../../components/legal-navigation/index";
 import TocPagination from "../../../../components/legal-navigation/TocPagination";
@@ -39,12 +40,13 @@ const StyledTableCell = styled(TableCell)(({ theme }) => ({
   padding: "0.75rem",
   borderBottom: `1px solid ${theme.palette.divider}`,
   borderRadius: 0,
-
+  fontFamily: "\"Qanelas Soft\", \"Open Sans\", sans-serif",
 }));
 
 const StyledHeaderCell = styled(StyledTableCell)(() => ({
   fontWeight: 600,
   backgroundColor: "transparent",
+  fontFamily: "\"Qanelas Soft\", \"Open Sans\", sans-serif",
 }));
 
 const privacyData = [
@@ -132,6 +134,13 @@ const privacyData = [
 const Privacy = () => {
   const { isDark } = useStyledDarkMode();
 
+  // Create custom theme with Qanelas Soft font family
+  const customTheme = createTheme({
+    typography: {
+      fontFamily: "\"Qanelas Soft\", \"Open Sans\", sans-serif",
+    },
+  });
+
   return (
     <TermsWrapper>
       <div className="page-header-section">
@@ -178,7 +187,7 @@ const Privacy = () => {
               <p>
               We process your personal data for a variety of purposes depending on how you interact with us. The table below details what we collect, why we collect it, and the legal justification (lawful basis) under the GDPR for doing so.
               </p>
-              <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+              <SistentThemeProvider initialMode={isDark ? "dark" : "light"} theme={customTheme}>
                 <Row className="table-container" $Hcenter>
                   <Col md={12} sx={{ px: 0 }}>
                     <StyledTableContainer>

src/sections/Company/Legal/sub-processors/index.js

@@ -11,6 +11,7 @@ import {
   TableHead,
   TableBody,
   SistentThemeProvider,
+  createTheme,
 } from "@sistent/sistent";
 import TOC from "../../../../components/legal-navigation/index";
 import TocPagination from "../../../../components/legal-navigation/TocPagination";
@@ -42,11 +43,13 @@ const StyledTableCell = styled(TableCell)(({ theme }) => ({
   padding: "0.75rem",
   borderBottom: `1px solid ${theme.palette.divider}`,
   borderRadius: "0px",
+  fontFamily: "\"Qanelas Soft\", \"Open Sans\", sans-serif",
 }));
 
 const StyledHeaderCell = styled(StyledTableCell)(() => ({
   fontWeight: 600,
   backgroundColor: "transparent",
+  fontFamily: "\"Qanelas Soft\", \"Open Sans\", sans-serif",
 }));
 
 // Data structure for sub-processors and service providers
@@ -183,6 +186,13 @@ const subProcessorData = [
 const SubProcessors = () => {
   const { isDark } = useStyledDarkMode();
 
+  // Create custom theme with Qanelas Soft font family
+  const customTheme = createTheme({
+    typography: {
+      fontFamily: "\"Qanelas Soft\", \"Open Sans\", sans-serif",
+    },
+  });
+
   return (
     <TermsWrapper>
       <div className="page-header-section">
@@ -222,7 +232,7 @@ const SubProcessors = () => {
               <p>
               Since data is physically stored in a predetermined location, once an account begins storing data it cannot be moved. If you want to switch to a different region, contact your local partner or Enterprise account manager to create a new account hosted in the region of your choice going forward.
               </p>
-              <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+              <SistentThemeProvider initialMode={isDark ? "dark" : "light"} theme={customTheme}>
                 <Row className="table-container" $Hcenter>
                   <Col md={12} sx={{ px: 0 }}>
                     {subProcessorData.map((section, index) => (

src/sections/Company/Legal/terms.style.js

@@ -4,6 +4,11 @@ const TermsWrapper = styled.section`
   position: relative;
   z-index: 1;
 
+  /* Ensure all text elements use Qanelas Soft */
+  * {
+    font-family: "Qanelas Soft", "Open Sans", sans-serif;
+  }
+
   .terms-content {
     width: 100%;
     max-width: 900px;