fix(About): apply full-page dark/high-contrast background and correct styled-component imports

Author: Poojan

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,38 +49,40 @@ 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')};
       background-color: ${prop('Button.primary.hover.background')};
       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%;
     align-items: center;
     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,62 +95,79 @@ 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) {
     display: grid;
   }
 `;
 
+// 7. SectionContainer
 export const SectionContainer = styled.div`
   display: flex;
   justify-content: row;
   padding-top: 0;
   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,39 +191,49 @@ 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 {
     display: flex;
     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')};
     text-decoration: underline;
 
     &: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;
     }
   }
-`;
+`;

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 (
     <RootPage>
+      <GlobalStyle />
+
       <Helmet>
-        <title> {t('About.TitleHelmet')} </title>
+        <title>{t('About.TitleHelmet')}</title>
       </Helmet>
 
       <Nav layout="dashboard" />