From aacce0d3760f245d37a313d1a59a9dfb13af10bc Mon Sep 17 00:00:00 2001 From: Poojan Date: Mon, 4 Aug 2025 21:04:52 +0530 Subject: [PATCH 1/5] fix: full-page dark/high-contrast background and correct imports for About page --- client/modules/About/About.styles.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/modules/About/About.styles.js b/client/modules/About/About.styles.js index 0714e39608..f5361955f4 100644 --- a/client/modules/About/About.styles.js +++ b/client/modules/About/About.styles.js @@ -229,4 +229,4 @@ export const Footer = styled.div` display: grid; } } -`; +`; \ No newline at end of file From 4b20ddd1a57e0ef70f2f65165dc08ea58cfca228 Mon Sep 17 00:00:00 2001 From: Poojan Date: Mon, 4 Aug 2025 21:06:19 +0530 Subject: [PATCH 2/5] fix(About): apply full-page dark/high-contrast background and correct styled-component imports --- client/modules/About/About.styles.js | 79 ++++++++++++++++++++++++---- client/modules/About/pages/About.jsx | 6 ++- 2 files changed, 73 insertions(+), 12 deletions(-) diff --git a/client/modules/About/About.styles.js b/client/modules/About/About.styles.js index f5361955f4..dec8c220cd 100644 --- a/client/modules/About/About.styles.js +++ b/client/modules/About/About.styles.js @@ -1,8 +1,26 @@ -import styled from 'styled-components'; +import styled, { createGlobalStyle } from 'styled-components'; import { remSize, prop } from '../../theme'; +// 1. Global style for the full page background +export const GlobalStyle = createGlobalStyle` + html, body, #root { + background-color: ${prop('backgroundColor')}; + color: ${prop('primaryTextColor')}; + min-height: 100vh; + width: 100vw; + margin: 0; + padding: 0; + transition: background-color 0.3s, color 0.3s; + font-family: inherit; + } +`; + +// 2. Page Content wrapper export const AboutPageContent = styled.div` margin: ${remSize(42)} ${remSize(295)}; + background-color: ${prop('backgroundColor')}; + color: ${prop('primaryTextColor')}; + min-height: 100vh; @media (max-width: 1279px) { margin: ${remSize(20)}; @@ -12,10 +30,15 @@ export const AboutPageContent = styled.div` } `; +// 3. Intro section export const Intro = styled.div` + background-color: ${prop('backgroundColor')}; + color: ${prop('primaryTextColor')}; + & h1 { font-size: ${remSize(32)}; font-weight: 700; + color: ${prop('primaryTextColor')}; } & a { @@ -26,6 +49,8 @@ export const Intro = styled.div` align-items: center; width: ${remSize(110)}; justify-content: space-evenly; + color: ${prop('primaryTextColor')}; + background-color: ${prop('backgroundColor')}; &:hover { color: ${prop('Button.primary.default.background')}; @@ -33,18 +58,19 @@ export const Intro = styled.div` border-color: ${prop('Button.primary.hover.border')}; text-decoration: none; - & svg { - & path { - fill: ${prop('Button.primary.default.background')}; - } + svg path { + fill: ${prop('Button.primary.default.background')}; } } } `; +// 4. Intro Headline export const IntroHeadline = styled.div` display: flex; align-items: center; + background-color: ${prop('backgroundColor')}; + color: ${prop('primaryTextColor')}; & div { height: 100%; @@ -52,12 +78,11 @@ export const IntroHeadline = styled.div` font-weight: 550; font-size: ${remSize(24)}; margin: ${remSize(24)}; + color: ${prop('primaryTextColor')}; } - & svg { - & path { - fill: ${prop('logoColor')}; - } + & svg path { + fill: ${prop('logoColor')}; } @media (max-width: 769px) { @@ -70,23 +95,31 @@ export const IntroHeadline = styled.div` } `; +// 5. Intro Description export const IntroDescription = styled.div` line-height: ${remSize(27)}; font-size: ${remSize(16)}; margin: ${remSize(24)} 0; + background-color: ${prop('backgroundColor')}; + color: ${prop('primaryTextColor')}; p { margin-bottom: ${remSize(24)}; + color: ${prop('primaryTextColor')}; } `; +// 6. Section Wrapper export const Section = styled.div` margin: ${remSize(50)} 0; + background-color: ${prop('backgroundColor')}; + color: ${prop('primaryTextColor')}; & h2 { font-size: ${remSize(24)}; padding-bottom: ${remSize(30)}; font-weight: 600; + color: ${prop('primaryTextColor')}; } @media (max-width: 769px) { @@ -94,6 +127,7 @@ export const Section = styled.div` } `; +// 7. SectionContainer export const SectionContainer = styled.div` display: flex; justify-content: row; @@ -101,31 +135,39 @@ export const SectionContainer = styled.div` font-size: ${remSize(16)}; width: 100%; flex-wrap: wrap; + background-color: ${prop('backgroundColor')}; + color: ${prop('primaryTextColor')}; @media (max-width: 769px) { display: grid; } `; +// 8. SectionItem export const SectionItem = styled.div` width: 33%; display: flex; line-height: ${remSize(19.5)}; font-size: ${remSize(14)}; padding: 0 ${remSize(30)} ${remSize(30)} 0; + background-color: ${prop('backgroundColor')}; + color: ${prop('primaryTextColor')}; & p { margin-top: ${remSize(7)}; + color: ${prop('primaryTextColor')}; } & a { font-weight: 700; font-size: ${remSize(16)}; text-decoration: underline; + color: ${prop('primaryTextColor')}; &:hover { text-decoration: underline; text-decoration-thickness: 0.1em; + color: ${prop('primaryTextColor')}; } } @@ -149,12 +191,16 @@ export const SectionItem = styled.div` } `; +// 9. Contact Section export const Contact = styled.div` margin-bottom: ${remSize(50)}; + background-color: ${prop('backgroundColor')}; + color: ${prop('primaryTextColor')}; & h2 { font-size: ${remSize(24)}; font-weight: 600; + color: ${prop('primaryTextColor')}; } & div { @@ -162,19 +208,24 @@ export const Contact = styled.div` width: 100%; margin: ${remSize(20)} 0; font-size: ${remSize(16)}; + color: ${prop('primaryTextColor')}; } `; +// 10. ContactTitle export const ContactTitle = styled.p` width: 50%; + color: ${prop('primaryTextColor')}; @media (max-width: 769px) { width: 30%; } `; +// 11. ContactHandles export const ContactHandles = styled.p` width: 50%; + color: ${prop('primaryTextColor')}; & a { color: ${prop('logoColor')}; @@ -182,6 +233,7 @@ export const ContactHandles = styled.p` &:hover { text-decoration: underline; + color: ${prop('logoColor')}; } } @@ -190,11 +242,14 @@ export const ContactHandles = styled.p` } `; +// 12. Footer export const Footer = styled.div` - border-top: 0.1rem dashed; + border-top: 0.1rem dashed ${prop('primaryTextColor')}; padding: 0 ${remSize(20)} ${remSize(70)} 0; width: 100%; font-size: ${remSize(16)}; + background-color: ${prop('backgroundColor')}; + color: ${prop('primaryTextColor')}; & div { display: flex; @@ -210,11 +265,13 @@ export const Footer = styled.div` &:hover { text-decoration: underline; text-decoration-thickness: 0.1em; + color: ${prop('logoColor')}; } } & p { padding: ${remSize(20)} 9.5% 0 0; + color: ${prop('primaryTextColor')}; } @media (max-width: 770px) { @@ -229,4 +286,4 @@ export const Footer = styled.div` display: grid; } } -`; \ No newline at end of file +`; diff --git a/client/modules/About/pages/About.jsx b/client/modules/About/pages/About.jsx index 5690aba0a0..6df0cc424f 100644 --- a/client/modules/About/pages/About.jsx +++ b/client/modules/About/pages/About.jsx @@ -6,6 +6,7 @@ import { useTranslation } from 'react-i18next'; import { Link } from 'react-router-dom'; import { + GlobalStyle, AboutPageContent, Intro, IntroHeadline, @@ -20,6 +21,7 @@ import { } from '../About.styles'; import { ContactSectionLinks, AboutSectionInfo } from '../statics/aboutData'; + import Nav from '../../IDE/components/Header/Nav'; import RootPage from '../../../components/RootPage'; import packageData from '../../../../package.json'; @@ -57,8 +59,10 @@ const About = () => { return ( + + - {t('About.TitleHelmet')} + {t('About.TitleHelmet')}