From 19c190dffd396f180511986a48f8347987ec523b Mon Sep 17 00:00:00 2001 From: ankitrewar11 Date: Fri, 12 Jun 2026 01:03:43 +0530 Subject: [PATCH 1/3] fix: resolve dark mode contrast issues on legal pages Signed-off-by: ankitrewar11 --- src/sections/Company/Legal/cookie-notice/index.js | 9 +++++++-- src/sections/Company/Legal/privacy/index.js | 9 +++++++-- src/sections/Company/Legal/sub-processors/index.js | 9 +++++++-- src/sections/Company/Legal/terms.style.js | 3 +++ 4 files changed, 24 insertions(+), 6 deletions(-) diff --git a/src/sections/Company/Legal/cookie-notice/index.js b/src/sections/Company/Legal/cookie-notice/index.js index 89c6ac9b53295..16cbcd30cb548 100644 --- a/src/sections/Company/Legal/cookie-notice/index.js +++ b/src/sections/Company/Legal/cookie-notice/index.js @@ -85,6 +85,11 @@ const cookieData = [ const CookieNotice = () => { const { isDark } = useStyledDarkMode(); + const [didLoad, setDidLoad] = React.useState(false); + + React.useEffect(() => { + setDidLoad(true); + }, []); // Create custom theme with Qanelas Soft font family const customTheme = createTheme({ @@ -153,7 +158,7 @@ const CookieNotice = () => {

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:

- + {didLoad && ( @@ -190,7 +195,7 @@ const CookieNotice = () => { - + )}

You can also opt out of certain third-party cookies via the Digital Advertising Alliance’s opt-out tool or, for European visitors, Your Online Choices.

diff --git a/src/sections/Company/Legal/privacy/index.js b/src/sections/Company/Legal/privacy/index.js index 43f92e6bdeac4..6ccb201acf45e 100644 --- a/src/sections/Company/Legal/privacy/index.js +++ b/src/sections/Company/Legal/privacy/index.js @@ -133,6 +133,11 @@ const privacyData = [ const Privacy = () => { const { isDark } = useStyledDarkMode(); + const [didLoad, setDidLoad] = React.useState(false); + + React.useEffect(() => { + setDidLoad(true); + }, []); // Create custom theme with Qanelas Soft font family const customTheme = createTheme({ @@ -187,7 +192,7 @@ const Privacy = () => {

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.

- + {didLoad && ( @@ -230,7 +235,7 @@ const Privacy = () => { - + )}

Cookies and Tracking Technologies

We use cookies and similar technologies on our website to help it function, to analyze performance, and to personalize your experience. A cookie is a small text file stored on your device. diff --git a/src/sections/Company/Legal/sub-processors/index.js b/src/sections/Company/Legal/sub-processors/index.js index a250372570f7e..e69fcb61a58ce 100644 --- a/src/sections/Company/Legal/sub-processors/index.js +++ b/src/sections/Company/Legal/sub-processors/index.js @@ -185,6 +185,11 @@ const subProcessorData = [ const SubProcessors = () => { const { isDark } = useStyledDarkMode(); + const [didLoad, setDidLoad] = React.useState(false); + + React.useEffect(() => { + setDidLoad(true); + }, []); // Create custom theme with Qanelas Soft font family const customTheme = createTheme({ @@ -232,7 +237,7 @@ const SubProcessors = () => {

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.

- + {didLoad && ( {subProcessorData.map((section, index) => ( @@ -290,7 +295,7 @@ const SubProcessors = () => { ))} - + )}

Last Updated: Sept 25th, 2025 diff --git a/src/sections/Company/Legal/terms.style.js b/src/sections/Company/Legal/terms.style.js index 0880f54862959..0722f9bd7987d 100644 --- a/src/sections/Company/Legal/terms.style.js +++ b/src/sections/Company/Legal/terms.style.js @@ -44,6 +44,9 @@ const TermsWrapper = styled.section` h1 { color: white; } + h2, h3, h4, h5, h6, p, li { + color: ${props => props.theme.whiteToBlack}; + } @media (max-width: 680px) { padding: 2rem 0; h1 { From d6136fa45e6188126972aca49a3fe96e9d059517 Mon Sep 17 00:00:00 2001 From: ankitrewar11 Date: Thu, 18 Jun 2026 23:53:34 +0530 Subject: [PATCH 2/3] fix: improve text contrast in dark mode for legal pages Signed-off-by: ankitrewar11 --- src/sections/Company/Legal/terms.style.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/sections/Company/Legal/terms.style.js b/src/sections/Company/Legal/terms.style.js index 0722f9bd7987d..330d8a81acefb 100644 --- a/src/sections/Company/Legal/terms.style.js +++ b/src/sections/Company/Legal/terms.style.js @@ -104,3 +104,4 @@ const TermsWrapper = styled.section` `; export default TermsWrapper; + From ddefd65bc7d1872c31fed5a3f8e19e9a8c057256 Mon Sep 17 00:00:00 2001 From: ankitrewar11 Date: Fri, 26 Jun 2026 12:04:47 +0530 Subject: [PATCH 3/3] refactor: move createTheme outside component to avoid recreation on every render Signed-off-by: ankitrewar11 --- src/sections/Company/Legal/cookie-notice/index.js | 14 +++++++------- src/sections/Company/Legal/privacy/index.js | 14 +++++++------- src/sections/Company/Legal/sub-processors/index.js | 14 +++++++------- 3 files changed, 21 insertions(+), 21 deletions(-) diff --git a/src/sections/Company/Legal/cookie-notice/index.js b/src/sections/Company/Legal/cookie-notice/index.js index 16cbcd30cb548..46ea138fe3705 100644 --- a/src/sections/Company/Legal/cookie-notice/index.js +++ b/src/sections/Company/Legal/cookie-notice/index.js @@ -83,6 +83,13 @@ const cookieData = [ }, ]; +// Create custom theme with Qanelas Soft font family +const customTheme = createTheme({ + typography: { + fontFamily: "\"Qanelas Soft\", \"Open Sans\", sans-serif", + }, +}); + const CookieNotice = () => { const { isDark } = useStyledDarkMode(); const [didLoad, setDidLoad] = React.useState(false); @@ -91,13 +98,6 @@ const CookieNotice = () => { setDidLoad(true); }, []); - // Create custom theme with Qanelas Soft font family - const customTheme = createTheme({ - typography: { - fontFamily: "\"Qanelas Soft\", \"Open Sans\", sans-serif", - }, - }); - return (

diff --git a/src/sections/Company/Legal/privacy/index.js b/src/sections/Company/Legal/privacy/index.js index 6ccb201acf45e..d246a861a7da7 100644 --- a/src/sections/Company/Legal/privacy/index.js +++ b/src/sections/Company/Legal/privacy/index.js @@ -131,6 +131,13 @@ const privacyData = [ }, ]; +// Create custom theme with Qanelas Soft font family +const customTheme = createTheme({ + typography: { + fontFamily: "\"Qanelas Soft\", \"Open Sans\", sans-serif", + }, +}); + const Privacy = () => { const { isDark } = useStyledDarkMode(); const [didLoad, setDidLoad] = React.useState(false); @@ -139,13 +146,6 @@ const Privacy = () => { setDidLoad(true); }, []); - // Create custom theme with Qanelas Soft font family - const customTheme = createTheme({ - typography: { - fontFamily: "\"Qanelas Soft\", \"Open Sans\", sans-serif", - }, - }); - return (
diff --git a/src/sections/Company/Legal/sub-processors/index.js b/src/sections/Company/Legal/sub-processors/index.js index e69fcb61a58ce..0b61a5f3a28a4 100644 --- a/src/sections/Company/Legal/sub-processors/index.js +++ b/src/sections/Company/Legal/sub-processors/index.js @@ -183,6 +183,13 @@ const subProcessorData = [ }, ]; +// Create custom theme with Qanelas Soft font family +const customTheme = createTheme({ + typography: { + fontFamily: "\"Qanelas Soft\", \"Open Sans\", sans-serif", + }, +}); + const SubProcessors = () => { const { isDark } = useStyledDarkMode(); const [didLoad, setDidLoad] = React.useState(false); @@ -191,13 +198,6 @@ const SubProcessors = () => { setDidLoad(true); }, []); - // Create custom theme with Qanelas Soft font family - const customTheme = createTheme({ - typography: { - fontFamily: "\"Qanelas Soft\", \"Open Sans\", sans-serif", - }, - }); - return (