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

@@ -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,18 +19,26 @@ const icons: Icon[] = [
 ];
 
 export default function App() {
+  const { theme, toggleTheme } = React.useContext(ThemeContext);
+
   return (
     <>
       <Grid
         container
         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"

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>

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>
   );

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>
 );

src/theme.ts → 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": {

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",
+  },
+};

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>
+  );
+};