Merge pull request #159 from OperationSpark/improve-header-contrast

improve contrast for yellow headers
OperationSpark · Jun 11, 2024 · cb56533 · cb56533
2 parents 9b32664 + 84b18f0
commit cb56533
Show file tree

Hide file tree

Showing 8 changed files with 62 additions and 34 deletions.
diff --git a/pages/about/index.tsx b/pages/about/index.tsx
@@ -39,8 +39,8 @@ const About: NextPage<IAbout> = ({ mission, team, history, awards }) => {
               }}
             >
               <Content>
-                <h1 className='dynamic-xl'>Our Mission</h1>
-                <h2 className='dynamic-h3'>{mission.description}</h2>
+                <h1 className='dynamic-xl text-shadow'>Our Mission</h1>
+                <p className='dynamic-txt'>{mission.description}</p>
               </Content>
             </div>
           </BgImg>

diff --git a/pages/contact/index.tsx b/pages/contact/index.tsx
@@ -1,16 +1,18 @@
-import dynamic from 'next/dynamic';
 import { GetStaticProps, NextPage } from 'next';
+import dynamic from 'next/dynamic';
 import styled from 'styled-components';
 
-import { IContact } from '@this/data/types/contact';
+import { FiMapPin, FiPhone } from 'react-icons/fi';
+
 import { Section } from '@this/components/layout';
+import { IContact } from '@this/data/types/contact';
 
-import { getStaticAsset } from '@this/pages-api/static/[asset]';
 import Content from '@this/components/layout/Content';
 import Main from '@this/components/layout/Main';
-import Map from '@this/src/components/Elements/Map';
-import { FiPhone, FiMapPin } from 'react-icons/fi';
+import { getStaticAsset } from '@this/pages-api/static/[asset]';
 import { BgImg } from '@this/src/components/Elements';
+import Map from '@this/src/components/Elements/Map';
+
 const ContactForm = dynamic(() => import('@this/src/Forms/Form.Contact'));
 
 const Contact: NextPage<IContact> = ({ address, city, state, zip, phone, gMapUrl }) => {
@@ -31,19 +33,18 @@ const Contact: NextPage<IContact> = ({ address, city, state, zip, phone, gMapUrl
             <Section className='contact-info'>
               <p>
                 <span className='contact-icon'>
-                  <FiMapPin size={28} />
+                  <FiMapPin size={28} className='primary-secondary' />
                 </span>
                 <a className='anchor' href={gMapUrl} target='_blank' rel='noreferrer'>
-                  <span>{address}</span>
-                  <br />
-                  <span>
+                  <div className='text-center'>{address}</div>
+                  <div className='text-center'>
                     {city}, {state} {zip}
-                  </span>
+                  </div>
                 </a>
               </p>
               <p>
                 <span className='contact-icon'>
-                  <FiPhone size={28} />
+                  <FiPhone size={28} className='primary-secondary' />
                 </span>
                 <a className='anchor' href={`tel:${phone}`} target='_blank' rel='noreferrer'>
                   {phone}

diff --git a/src/components/Home/GreatCompanies.tsx b/src/components/Home/GreatCompanies.tsx
@@ -1,10 +1,10 @@
 import styled, { useTheme } from 'styled-components';
 
-import { BgImg } from '@this/components/Elements';
 import LogoCard from '@this/components/Cards/LogoCard';
+import { BgImg } from '@this/components/Elements';
 import NavLink from '@this/components/Navbar/elements/NavLink';
-import { IHome } from '@this/data/types/home';
 import Content from '@this/components/layout/Content';
+import { IHome } from '@this/data/types/home';
 
 const GreatCompanies = ({ title, description }: IHome['greatCompanies']) => {
   const theme = useTheme();
@@ -15,15 +15,15 @@ const GreatCompanies = ({ title, description }: IHome['greatCompanies']) => {
       <GreatCompaniesStyles className='_progress' id='companies'>
         <Content>
           {title.map((text) => (
-            <h1 key={text} className='dynamic-xl'>
+            <h1 key={text} className='dynamic-xl text-shadow'>
               {text}
             </h1>
           ))}
 
           <div className='row-between'>
-            <div className='outcomes-description'>
+            <div className='outcomes-description bg-subtle-dark rounded-card'>
               {description.map((text) => (
-                <p key={text} className='dynamic-txt bg-subtle-dark br-1 p-1'>
+                <p key={text} className='dynamic-txt'>
                   {text}
                 </p>
               ))}
@@ -63,9 +63,12 @@ const GreatCompaniesStyles = styled.div`
     display: flex;
     flex-flow: column;
     align-items: flex-start;
-    justify-content: space-between;
+    justify-content: center;
     color: white;
     width: 40%;
+    height: fit-content;
+    margin-top: auto;
+    margin-bottom: auto;
   }
   .logo-card {
     width: 60%;
@@ -75,6 +78,9 @@ const GreatCompaniesStyles = styled.div`
     .logo-card {
       width: 100%;
     }
+    .outcomes-description {
+      margin-bottom: 1rem;
+    }
     .info {
       margin: 2rem 0;
     }

diff --git a/src/components/Home/ProgramsForAll.tsx b/src/components/Home/ProgramsForAll.tsx
@@ -1,11 +1,11 @@
 import styled from 'styled-components';
 
-import { IProgramsForAll } from '@this/data/types/home';
-import { SlashDivider } from '@this/components/Elements/SlashDivider';
 import IconBtnCard from '@this/components/Cards/IconBtnCard';
 import { BgImg } from '@this/components/Elements';
+import { SlashDivider } from '@this/components/Elements/SlashDivider';
 import CareersForAll from '@this/components/Home/CareerForAll';
 import Content from '@this/components/layout/Content';
+import { IProgramsForAll } from '@this/data/types/home';
 
 const ProgramsForAll = ({
   title,
@@ -23,15 +23,17 @@ const ProgramsForAll = ({
         <Content>
           <div className='top-content'>
             {title.map((text) => (
-              <h1 key={text} className='dynamic-xl title'>
+              <h1 key={text} className='dynamic-xl title text-shadow'>
                 {text}
               </h1>
             ))}
-            {description.map((text) => (
-              <p key={text} className='dynamic-txt bg-subtle-dark br-1 p-1'>
-                {text}
-              </p>
-            ))}
+            <div className='rounded-card bg-subtle-dark'>
+              {description.map((text) => (
+                <p key={text} className='dynamic-txt'>
+                  {text}
+                </p>
+              ))}
+            </div>
           </div>
         </Content>
       </BgImg>

diff --git a/src/components/Home/TeamEffort.tsx b/src/components/Home/TeamEffort.tsx
@@ -1,17 +1,17 @@
 import styled from 'styled-components';
 
-import { IHome } from '@this/data/types/home';
-import { BgImg } from '@this/components/Elements';
 import YellowCard from '@this/components/Cards/LinkCard';
+import { BgImg } from '@this/components/Elements';
 import Content from '@this/components/layout/Content';
+import { IHome } from '@this/data/types/home';
 
 const TeamEffort = ({ title, description, cards }: IHome['teamEffort']) => {
   return (
     <BgImg src='/images/students-working.webp' height='auto'>
       <TeamEffortStyles className='_progress' id='partners'>
         <Content>
           {title.map((text) => (
-            <h1 key={text} className='dynamic-xl'>
+            <h1 key={text} className='dynamic-xl text-shadow'>
               {text}
             </h1>
           ))}

diff --git a/src/components/Home/TopCard.tsx b/src/components/Home/TopCard.tsx
@@ -14,9 +14,9 @@ const TopCard = () => {
       <ImgCardStyles>
         <Content className='top-card-content'>
           <div className='row-between'>
-            <div className='secondary'>
-              <h2 className='dynamic-h2'>WE ARE CHANGING LIVES WITH</h2>
-              <h1 className='dynamic-xl'>
+            <div className='secondary header-content'>
+              <h2 className='dynamic-h2 text-shadow'>WE ARE CHANGING LIVES WITH</h2>
+              <h1 className='dynamic-xl text-shadow'>
                 COMPUTER <br /> PROGRAMMING <br /> SKILLS
               </h1>
             </div>

diff --git a/src/components/footer/footer.tsx b/src/components/footer/footer.tsx
@@ -31,7 +31,7 @@ const Footer = ({ logos }: FooterProps) => {
       <COEBox />
       {!isInfoSessionPage && !isHighschoolPage ? (
         <InfoSessionStyles>
-          <h2 style={{ paddingBottom: '1rem' }} className='secondary dynamic-h2'>
+          <h2 style={{ paddingBottom: '1rem' }} className='secondary dynamic-h2 text-shadow'>
             ATTEND A FREE INFO SESSION
           </h2>
           <NavLink className='info' href='/infoSession'>

diff --git a/src/theme/styled/GlobalStyles.ts b/src/theme/styled/GlobalStyles.ts
@@ -21,6 +21,7 @@ const GlobalStyles = createGlobalStyle`
     font-weight: 400;
     margin: 0;
     padding: 0;
+    overscroll-behavior: none;
   }
   h1, h2, h3, h4, h5, h6 {
     font-family: 'Red Hat Display', sans-serif;
@@ -61,6 +62,14 @@ const GlobalStyles = createGlobalStyle`
    .bg-subtle-dark {
      background: ${({ theme }) => (theme.isLightMode ? theme.alpha.fg : theme.alpha.bg)};
      color: ${({ theme }) => theme.white};
+     backdrop-filter: blur(4px);
+     -webkit-backdrop-filter: blur(4px);
+   }
+
+   .rounded-card {
+      border-radius: 0.5rem;
+      padding: 1rem;
+      box-shadow: 0 0 0.5rem 0 inset ${({ theme }) => theme.primary[300]};
    }
    .p-1 {
       padding: 0.5rem;
@@ -124,9 +133,19 @@ const GlobalStyles = createGlobalStyle`
   .dynamic-txt {
     font-size: calc(0.4vw + 0.9rem);
   }
+
+
+
   .dynamic-xl {
     font-size: calc(0.8vw + 3.2rem);
     font-weight: 900;
+
+    &.secondary {
+      text-shadow: 0 0 5px rgba(0, 0, 0, 1);
+    }
+  }
+  .text-shadow {
+    text-shadow: 0 0 5px rgba(0, 0, 0, 1);
   }
   .dynamic-h1 {
     font-size: calc(0.8vw + 2.5rem);