Merge branch 'main' into 36-react

adamalston · Dec 8, 2023 · 247e19c · 247e19c
2 parents e294d28 + dcb794e
commit 247e19c
Show file tree

Hide file tree

Showing 7 changed files with 36 additions and 35 deletions.
diff --git a/src/components/Buttons.tsx b/src/components/Buttons.tsx
@@ -2,8 +2,9 @@ import { useContext } from 'react';
 import styled from 'styled-components';
 
 import { AppContext } from 'App/AppContext';
+import { Theme } from 'types';
 
-const Container = styled.div`
+const Container = styled.div<{ $theme: Theme }>`
   a,
   a:active,
   a:hover {
@@ -21,7 +22,7 @@ const Container = styled.div`
     transition: color 0.5s linear;
     height: 6rem;
     width: 6rem;
-    color: ${({ theme }) => theme.primaryTextColor};
+    color: ${({ $theme }) => $theme.primaryTextColor};
     display: table-cell;
     vertical-align: middle;
     text-align: center;
@@ -42,7 +43,7 @@ const Container = styled.div`
   }
 
   .button:hover {
-    background-color: ${({ theme }) => theme.shadowColor};
+    background-color: ${({ $theme }) => $theme.shadowColor};
     box-shadow: 0 0 0.75rem 0.75rem rgba(128, 128, 128, 0.25);
   }
 
@@ -91,7 +92,7 @@ export const Buttons = () => {
   const { config, theme } = useContext(AppContext);
 
   return (
-    <Container theme={theme}>
+    <Container $theme={theme}>
       {config.buttons.map(({ name, display, aria, icon, href }) => (
         <span className="button-container" key={name}>
           <a

diff --git a/src/components/Content.tsx b/src/components/Content.tsx
@@ -2,6 +2,7 @@ import { useContext } from 'react';
 import styled, { css } from 'styled-components';
 
 import { AppContext } from 'App/AppContext';
+import { Theme } from 'types';
 
 const sharedStyles = css`
   transition: color 0.5s linear;
@@ -11,19 +12,19 @@ const sharedStyles = css`
 `;
 
 const C = {
-  Name: styled.div`
+  Name: styled.div<{ $theme: Theme }>`
     ${sharedStyles};
     font-size: 6rem;
-    color: ${({ theme }) => theme.primaryTextColor};
+    color: ${({ $theme }) => $theme.primaryTextColor};
     @media only screen and (max-device-width: 820px) and (-webkit-min-device-pixel-ratio: 2) {
       font-size: 4.5rem;
     }
   `,
-  Title: styled.div`
+  Title: styled.div<{ $theme: Theme }>`
     ${sharedStyles};
     font-size: 3.5rem;
     margin: 4rem 0;
-    color: ${({ theme }) => theme.secondaryTextColor};
+    color: ${({ $theme }) => $theme.secondaryTextColor};
     @media only screen and (max-device-width: 820px) and (-webkit-min-device-pixel-ratio: 2) {
       font-size: 2.5rem;
     }
@@ -37,17 +38,17 @@ export const Content = () => {
     <>
       <C.Name
         data-v2="name"
-        theme={theme}
         aria-label={config.name.aria}
         title={config.name.aria}
+        $theme={theme}
       >
         {config.name.display}
       </C.Name>
       <C.Title
         data-v2="title"
-        theme={theme}
         aria-label={config.title.aria}
         title={config.title.aria}
+        $theme={theme}
       >
         {config.title.display}
       </C.Title>

diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
@@ -2,44 +2,45 @@ import { useContext } from 'react';
 import styled from 'styled-components';
 
 import { AppContext } from 'App/AppContext';
+import { Theme } from 'types';
 
 const F = {
-  Container: styled.div<{ isMobile: boolean }>`
+  Container: styled.div<{ $isMobile: boolean }>`
     position: absolute;
     bottom: 0;
     right: 0;
     font-size: 0.75rem;
-    padding-right: ${({ isMobile }) => (isMobile ? '1.5rem' : '1rem')};
+    padding-right: ${({ $isMobile }) => ($isMobile ? '1.5rem' : '1rem')};
     z-index: 1;
   `,
-  Text: styled.p`
+  Text: styled.p<{ $theme: Theme }>`
     transition: color 0.5s linear;
-    color: ${({ theme }) => theme.tertiaryTextColor};
+    color: ${({ $theme }) => $theme.tertiaryTextColor};
   `,
-  Link: styled.a`
+  Link: styled.a<{ $theme: Theme }>`
     transition: color 0.5s linear;
     text-decoration: none;
-    color: ${({ theme }) => theme.secondaryTextColor};
+    color: ${({ $theme }) => $theme.secondaryTextColor};
   `,
 };
 
 export const Footer = () => {
   const { isMobile, theme } = useContext(AppContext);
 
   return (
-    <F.Container isMobile={isMobile}>
+    <F.Container $isMobile={isMobile}>
       <F.Text
         data-v2="footer"
-        theme={theme}
         aria-label="Designed and built by Adam Alston"
+        $theme={theme}
       >
         {'Designed and built by '}
         <F.Link
           data-v2="creator"
-          theme={theme}
           href="https://www.adamalston.com"
           aria-label="Adam's website"
           title="A link to Adam's personal website"
+          $theme={theme}
         >
           {'Adam Alston'}
         </F.Link>
@@ -48,10 +49,10 @@ export const Footer = () => {
             {' | '}
             <F.Link
               data-v2="source"
-              theme={theme}
               href="https://github.com/adamalston/v2/"
               aria-label="Source code"
               title="View this website's source code in GitHub"
+              $theme={theme}
             >
               {'Source'}
             </F.Link>

diff --git a/src/components/Particles.tsx b/src/components/Particles.tsx
@@ -4,12 +4,13 @@ import ReactParticles from 'react-tsparticles';
 
 import { AppContext } from 'App/AppContext';
 import { options } from 'appearance';
+import { Theme } from 'types';
 
 const P = {
-  Container: styled.div`
+  Container: styled.div<{ $theme: Theme }>`
     transition: background-color 0.5s linear;
     position: absolute;
-    background-color: ${({ theme }) => theme.background};
+    background-color: ${({ $theme }) => $theme.background};
     background-repeat: no-repeat;
     background-size: cover;
     background-position: 50% 50%;
@@ -21,7 +22,7 @@ export const Particles = () => {
   const { theme } = useContext(AppContext);
 
   return (
-    <P.Container data-v2="particles" theme={theme} aria-label="Particles">
+    <P.Container data-v2="particles" aria-label="Particles" $theme={theme}>
       <ReactParticles width="100vw" height="100vh" options={options} />
     </P.Container>
   );

diff --git a/src/components/Toggle.tsx b/src/components/Toggle.tsx
@@ -3,6 +3,7 @@ import styled from 'styled-components';
 
 import { AppContext } from 'App/AppContext';
 import { Moon, Sun } from 'icons';
+import { Theme } from 'types';
 
 const T = {
   Container: styled.main`
@@ -31,13 +32,13 @@ const T = {
     position: absolute;
     width: 1px;
   `,
-  Switch: styled.label`
+  Switch: styled.label<{ $theme: Theme }>`
     cursor: pointer;
     display: flex;
     width: 1.5rem;
     height: 1.5rem;
     padding: 0.75rem;
-    background-color: ${({ theme }) => theme.shadowColor};
+    background-color: ${({ $theme }) => $theme.shadowColor};
     border-radius: 25%;
     box-shadow: 0 0 0.25rem 0.25rem rgba(128, 128, 128, 0.25);
     align-items: center;
@@ -72,7 +73,7 @@ export const Toggle = () => {
         aria-label="Theme toggle"
         title="Theme toggle"
       />
-      <T.Switch theme={theme} htmlFor="toggle">
+      <T.Switch htmlFor="toggle" $theme={theme}>
         {isDark ? <Moon /> : <Sun />}
       </T.Switch>
     </T.Container>

diff --git a/src/types/config.interface.ts b/src/types/config.interface.ts
@@ -1,18 +1,16 @@
-interface Content {
+export interface Content {
   display: string;
   aria: string;
 }
 
-interface Button extends Content {
+export interface Button extends Content {
   name: string;
   icon: JSX.Element;
   href: string;
 }
 
-interface Config {
+export interface Config {
   name: Content;
   title: Content;
   buttons: Button[];
 }
-
-export { Content, Button, Config };
diff --git a/src/types/theme.interface.ts b/src/types/theme.interface.ts
@@ -1,4 +1,4 @@
-interface Theme {
+export interface Theme {
   key: string;
   primaryTextColor: string;
   secondaryTextColor: string;
@@ -7,8 +7,6 @@ interface Theme {
   shadowColor: string;
 }
 
-interface Themes {
+export interface Themes {
   [key: string]: Theme;
 }
-
-export { Theme, Themes };