From 2d2c04af0c44b28d29506bfbf7d6de2ad3ef67d8 Mon Sep 17 00:00:00 2001
From: Maria Torrente <64274966+mariatorrentedev@users.noreply.github.com>
Date: Mon, 1 Jul 2024 15:12:11 -0400
Subject: [PATCH] Develop (#40)

* Some clean up, added Spotify icon for offline/loading state

* Minor clean up in Mobile view

* Updating about text.

* Fixing max width for the Tab Panel

* P-18: fixed bug when type is not track

* P-20: Add real time spotify streaming progress bar. (#21)

* P-23: Added experience section. (#24)

* P-26: Added placeholder projects section. (#27)

* Wip footer.

* develop: some footer updates, brb.

* develop: simple footer.

* P-11 (#31)

* P-11: added vitest, react testing library config for unit testing.

* P-11: add Projects unit test.

* P-11: fix bg card color.

* P-11 (#32)

* P-11: added vitest, react testing library config for unit testing.

* P-11: add Projects unit test.

* P-11: fix bg card color.

* P-11: almost done, missing Github actions and TODOS in test.

* Update src/components/Navigation/Navigation.test.tsx

* theme-mode: add dark/light mode. (#38)
---
 src/App.tsx                              |  28 ++++++++++---
 src/assets/mt-dark.png                   | Bin 0 -> 8027 bytes
 src/assets/mt-light.png                  | Bin 0 -> 7637 bytes
 src/components/Experience/Experience.tsx |   2 +-
 src/components/Footer/Footer.tsx         |  23 ++++++----
 src/main.tsx                             |   7 ++--
 src/{theme.ts => mui/base-theme.ts}      |  16 +------
 src/mui/palettes.ts                      |  36 ++++++++++++++++
 src/mui/theme-context.tsx                |  51 +++++++++++++++++++++++
 9 files changed, 129 insertions(+), 34 deletions(-)
 create mode 100644 src/assets/mt-dark.png
 create mode 100644 src/assets/mt-light.png
 rename src/{theme.ts => mui/base-theme.ts} (77%)
 create mode 100644 src/mui/palettes.ts
 create mode 100644 src/mui/theme-context.tsx

diff --git a/src/App.tsx b/src/App.tsx
index daf996c..d4e3b52 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,7 +1,9 @@
+import * as React from "react";
 import type { Icon } from "./types/shared";
 import { Grid, Typography, Link, IconButton } from "@mui/material";
-import { GitHub, LinkedIn } from "@mui/icons-material";
+import { GitHub, LinkedIn, LightMode, DarkMode } from "@mui/icons-material";
 import { Navigation, Footer } from "./components";
+import { ThemeContext } from "./mui/theme-context";
 
 const icons: Icon[] = [
   {
@@ -17,6 +19,8 @@ const icons: Icon[] = [
 ];
 
 export default function App() {
+  const { theme, toggleTheme } = React.useContext(ThemeContext);
+
   return (
     <>
       <Grid
@@ -24,11 +28,17 @@ export default function App() {
         maxWidth="md"
         textAlign="left"
         margin="0 auto"
-        alignItems="center"
+        direction="column"
         padding={["2rem", "5rem 2rem"]}
-        sx={{ ".MuiGrid-root": { paddingLeft: 0 } }}
+        sx={{ ".MuiGrid-root": { paddingLeft: 0 }, width: "auto" }}
         spacing={2}
       >
+        <Grid item sx={{ alignSelf: "flex-end" }}>
+          <IconButton color="secondary" onClick={toggleTheme}>
+            {theme.palette.mode === "dark" ? <LightMode /> : <DarkMode />}
+          </IconButton>
+        </Grid>
+
         <Grid item>
           <Typography component="h1" fontSize={[18, 42]} color="secondary">
             Hey there!
@@ -45,7 +55,14 @@ export default function App() {
             meaningful experiences.
           </Typography>
         </Grid>
-        <Grid item>
+        <Grid
+          item
+          sx={{
+            display: "flex",
+            justifyContent: "start",
+            alignItems: "center",
+          }}
+        >
           {icons.map((item, index) => (
             <IconButton
               key={index}
@@ -59,8 +76,7 @@ export default function App() {
               {item.icon}
             </IconButton>
           ))}
-        </Grid>
-        <Grid item>
+
           <Link
             color="secondary.main"
             component="a"
diff --git a/src/assets/mt-dark.png b/src/assets/mt-dark.png
new file mode 100644
index 0000000000000000000000000000000000000000..7cc07f307bbbb6c09845eddfe4c99a652d2ba27d
GIT binary patch
literal 8027
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

literal 0
HcmV?d00001

diff --git a/src/assets/mt-light.png b/src/assets/mt-light.png
new file mode 100644
index 0000000000000000000000000000000000000000..140c4f9efb2c7750596a1dff18931d81db25fbcc
GIT binary patch
literal 7637
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
Q`o}Bg_(=nro^#lL0IFJNZvX%Q

literal 0
HcmV?d00001

diff --git a/src/components/Experience/Experience.tsx b/src/components/Experience/Experience.tsx
index 8f76e47..96b2e0d 100644
--- a/src/components/Experience/Experience.tsx
+++ b/src/components/Experience/Experience.tsx
@@ -64,7 +64,7 @@ export default function Experience() {
                   color="secondary"
                   href={item.url}
                   target="_blank"
-                  sx={{ padding: "8px 0" }}
+                  sx={{ padding: "0", borderRadius: 0, border: "0.5px solid" }}
                 >
                   <img src={item.logo} alt={item.name} />
                 </IconButton>
diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx
index 0c7744f..5c56a2b 100644
--- a/src/components/Footer/Footer.tsx
+++ b/src/components/Footer/Footer.tsx
@@ -1,19 +1,24 @@
+import * as React from "react";
 import { Typography, Container, Stack, IconButton } from "@mui/material";
-import MTLogo from "../../assets/mt.png";
+import MTLogoDark from "../../assets/mt-dark.png";
+import MTLogoLight from "../../assets/mt-light.png";
+import { ThemeContext } from "../../mui/theme-context";
 
 export default function Footer() {
+  const { theme } = React.useContext(ThemeContext);
+
   return (
     <Container component="footer" maxWidth="md" sx={{ padding: 2 }}>
       <Stack alignItems="center" spacing={1}>
-        <IconButton
-          component="a"
-          color="secondary"
-          sx={{ img: { maxWidth: 50 } }}
-          href="#"
-        >
-          <img src={MTLogo} alt="Maria Torrente" />
+        <IconButton component="a" sx={{ img: { maxWidth: 50 } }} href="#">
+          <img
+            src={theme.palette.mode === "dark" ? MTLogoDark : MTLogoLight}
+            alt="Maria Torrente"
+          />
         </IconButton>
-        <Typography variant="caption"> © Maria Torrente 2024</Typography>
+        <Typography color="secondary.main">
+          Made with ♡ by Maria Torrente © 2024
+        </Typography>
       </Stack>
     </Container>
   );
diff --git a/src/main.tsx b/src/main.tsx
index 10b060d..8bfe6a8 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,8 +1,7 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
 import App from "./App.tsx";
-import { theme } from "./theme";
-import ThemeProvider from "@mui/material/styles/ThemeProvider";
+import { ThemeProviderWrapper } from "./mui/theme-context.tsx";
 import CssBaseline from "@mui/material/CssBaseline";
 import { QueryClient, QueryClientProvider } from "react-query";
 
@@ -11,10 +10,10 @@ const queryClient = new QueryClient();
 ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
     <QueryClientProvider client={queryClient}>
-      <ThemeProvider theme={theme}>
+      <ThemeProviderWrapper>
         <CssBaseline />
         <App />
-      </ThemeProvider>
+      </ThemeProviderWrapper>
     </QueryClientProvider>
   </React.StrictMode>
 );
diff --git a/src/theme.ts b/src/mui/base-theme.ts
similarity index 77%
rename from src/theme.ts
rename to src/mui/base-theme.ts
index 6c1103f..218138e 100644
--- a/src/theme.ts
+++ b/src/mui/base-theme.ts
@@ -1,17 +1,7 @@
+import type { Theme } from "@mui/material/styles";
 import { createTheme } from "@mui/material/styles";
 
-export const theme = createTheme({
-  palette: {
-    primary: {
-      main: "#142d4c",
-    },
-    secondary: {
-      main: "#9fd3c7",
-    },
-    info: {
-      main: "#ececec",
-    },
-  },
+export const baseTheme: Theme = createTheme({
   typography: {
     fontFamily: ["Poppins", "Arial", "sans-serif"].join(","),
     h1: {
@@ -25,9 +15,7 @@ export const theme = createTheme({
       styleOverrides: {
         body: {
           minHeight: "100vh",
-          backgroundColor: "#142d4c",
           textAlign: "left",
-          color: "#ececec",
         },
         ":root": {
           ".MuiSvgIcon-root": {
diff --git a/src/mui/palettes.ts b/src/mui/palettes.ts
new file mode 100644
index 0000000..00f1146
--- /dev/null
+++ b/src/mui/palettes.ts
@@ -0,0 +1,36 @@
+import type { PaletteMode, PaletteColor } from "@mui/material";
+
+type CustomPaletteColor = Omit<PaletteColor, "light" | "dark" | "contrastText">;
+
+type CustomPalette = {
+  mode: PaletteMode;
+  primary: CustomPaletteColor;
+  secondary: CustomPaletteColor;
+  info: CustomPaletteColor;
+};
+
+export const darkPalette: CustomPalette = {
+  mode: "dark",
+  primary: {
+    main: "#000000",
+  },
+  secondary: {
+    main: "#FDB3FD",
+  },
+  info: {
+    main: "#ECECEC",
+  },
+};
+
+export const lightPalette: CustomPalette = {
+  mode: "light",
+  primary: {
+    main: "#FFFFFF",
+  },
+  secondary: {
+    main: "#E61680",
+  },
+  info: {
+    main: "#000000",
+  },
+};
diff --git a/src/mui/theme-context.tsx b/src/mui/theme-context.tsx
new file mode 100644
index 0000000..0ba710e
--- /dev/null
+++ b/src/mui/theme-context.tsx
@@ -0,0 +1,51 @@
+import * as React from "react";
+import type { PaletteMode, Theme } from "@mui/material";
+import { ThemeProvider, createTheme } from "@mui/material/styles";
+import { baseTheme } from "./base-theme";
+import { lightPalette, darkPalette } from "./palettes";
+
+export interface ThemeContextProps {
+  toggleTheme: () => void;
+  theme: Theme;
+}
+
+export const ThemeContext = React.createContext<ThemeContextProps>({
+  toggleTheme: () => {},
+  theme: createTheme(baseTheme),
+});
+
+export const ThemeProviderWrapper: React.FC<{ children: React.ReactNode }> = ({
+  children,
+}) => {
+  const [mode, setMode] = React.useState<PaletteMode>("light");
+
+  const toggleTheme = () => {
+    setMode((prevMode) => (prevMode === "light" ? "dark" : "light"));
+  };
+
+  const theme = React.useMemo(() => {
+    const palette = mode === "light" ? lightPalette : darkPalette;
+    return createTheme({
+      ...baseTheme,
+      palette,
+      components: {
+        MuiCssBaseline: {
+          styleOverrides: {
+            ...((baseTheme.components?.MuiCssBaseline
+              ?.styleOverrides as object) || {}),
+            body: {
+              backgroundColor: palette.primary.main,
+              color: palette.info.main,
+            },
+          },
+        },
+      },
+    });
+  }, [mode]);
+
+  return (
+    <ThemeContext.Provider value={{ toggleTheme, theme }}>
+      <ThemeProvider theme={theme}>{children}</ThemeProvider>
+    </ThemeContext.Provider>
+  );
+};