From 2f45fbbc1972ed6a526870c35d36778e44eb8cad Mon Sep 17 00:00:00 2001
From: Michael Hunteman <michael@huntm.net>
Date: Thu, 15 Feb 2024 20:32:44 -0600
Subject: Update theme

---
 src/App.tsx                  | 24 +++++---------------
 src/ThemeContextProvider.tsx | 44 ++++++++++++++++++++++++++++++++++++
 src/components/Bar.tsx       | 39 --------------------------------
 src/components/NavBar.tsx    | 53 ++++++++++++++++++++++++++++++++++++++++++++
 src/components/Rsvp.tsx      |  1 +
 src/components/Schedule.tsx  | 48 +++++++++++++++++++++------------------
 src/main.tsx                 |  2 +-
 7 files changed, 132 insertions(+), 79 deletions(-)
 create mode 100644 src/ThemeContextProvider.tsx
 delete mode 100644 src/components/Bar.tsx
 create mode 100644 src/components/NavBar.tsx

(limited to 'src')

diff --git a/src/App.tsx b/src/App.tsx
index 156719f..deb7dec 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,35 +1,23 @@
-import React from 'react';
+import { createContext, useState, useMemo } from 'react';
 import { Outlet, Route, Routes } from 'react-router-dom';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import { createTheme, ThemeProvider } from '@mui/material/styles';
 import CssBaseline from '@mui/material/CssBaseline';
 
-import Bar from './components/Bar';
+import NavBar from './components/NavBar';
 import Home from './components/Home';
 import Schedule from './components/Schedule';
 import Registry from './components/Registry';
 import Rsvp from './components/Rsvp';
-
+import ThemeContextProvider from './ThemeContextProvider'
 
 function App() {
-  const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
-
-  const theme = React.useMemo(
-    () =>
-      createTheme({
-        palette: {
-          mode: prefersDarkMode ? 'dark' : 'light'
-        }
-      }),
-    [prefersDarkMode]
-  );
-
   return (
-    <ThemeProvider theme={theme}>
+    <ThemeContextProvider>
       <CssBaseline />
-      <Bar />
+      <NavBar />
       <Outlet />
-    </ThemeProvider>
+    </ThemeContextProvider>
   );
 }
 
diff --git a/src/ThemeContextProvider.tsx b/src/ThemeContextProvider.tsx
new file mode 100644
index 0000000..970f9d8
--- /dev/null
+++ b/src/ThemeContextProvider.tsx
@@ -0,0 +1,44 @@
+import { ReactNode, createContext, useMemo, useState } from 'react';
+import { StyledEngineProvider, ThemeProvider, createTheme } from '@mui/material/styles';
+
+type ThemeContextType = {
+  switchColorMode: () => void;
+};
+
+type ThemeProviderProps = {
+  children: ReactNode;
+};
+
+export const ThemeContext = createContext<ThemeContextType>({
+  switchColorMode: () => {}
+});
+
+function ThemeContextProvider({ children }: ThemeProviderProps) {
+  const [mode, setMode] = useState<'light' | 'dark'>('light');
+
+  const switchColorMode = () => {
+    setMode((prevMode) => (prevMode === 'light' ? 'dark' : 'light'));
+  };
+
+  const theme = useMemo(
+    () =>
+      createTheme({
+        palette: {
+          mode,
+        }
+      }),
+    [mode]
+  );
+
+  return (
+    <StyledEngineProvider injectFirst>
+      <ThemeContext.Provider value={{ switchColorMode }}>
+        <ThemeProvider theme={theme}>
+          {children}
+        </ThemeProvider>
+      </ThemeContext.Provider>
+    </StyledEngineProvider>
+  );
+}
+
+export default ThemeContextProvider;
diff --git a/src/components/Bar.tsx b/src/components/Bar.tsx
deleted file mode 100644
index ce3db43..0000000
--- a/src/components/Bar.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import { Link } from 'react-router-dom';
-import AppBar from '@mui/material/AppBar';
-import Box from '@mui/material/Box';
-import Button from '@mui/material/Button';
-import Toolbar from '@mui/material/Toolbar';
-import Typography from '@mui/material/Typography';
-
-function Bar() {
-  const pages = [
-    { name: 'Schedule', to: '/schedule'},
-    { name: 'RSVP', to: '/rsvp' },
-    { name: 'Registry', to: '/registry' }
-  ];
-
-  return (
-    <AppBar position="relative">
-      <Toolbar>
-        <Typography
-          variant="h4"
-          component={Link}
-          to="/"
-          color="inherit"
-          sx={{ textDecoration: 'none' }}
-          >
-          Wedding
-        </Typography>
-        <Box sx={{ marginLeft: 'auto' }}>
-          {pages.map((page) => (
-            <Button component={Link} to={page.to} key={page.name} color="inherit">
-              {page.name}
-            </Button>
-          ))}
-        </Box>
-      </Toolbar>
-    </AppBar>
-  );
-}
-
-export default Bar;
diff --git a/src/components/NavBar.tsx b/src/components/NavBar.tsx
new file mode 100644
index 0000000..c8cb136
--- /dev/null
+++ b/src/components/NavBar.tsx
@@ -0,0 +1,53 @@
+import { useContext, useMemo } from 'react';
+import { Link } from 'react-router-dom';
+import AppBar from '@mui/material/AppBar';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import IconButton from '@mui/material/IconButton';
+import DarkModeIcon from '@mui/icons-material/DarkMode';
+import LightModeIcon from '@mui/icons-material/LightMode';
+import Stack from '@mui/material/Stack';
+import Toolbar from '@mui/material/Toolbar';
+import Typography from '@mui/material/Typography';
+import { useTheme } from '@mui/material/styles';
+
+import { ThemeContext } from '../ThemeContextProvider';
+
+function NavBar({ mode }) {
+  const theme = useTheme();
+  const { switchColorMode } = useContext(ThemeContext);
+
+  const pages = [
+    { name: 'Schedule', to: '/schedule'},
+    { name: 'RSVP', to: '/rsvp' },
+    { name: 'Registry', to: '/registry' }
+  ];
+
+  return (
+    <AppBar position="relative">
+      <Toolbar>
+        <Typography
+          variant="h5"
+          component={Link}
+          to="/"
+          color="inherit"
+          sx={{ textDecoration: 'none' }}
+          >
+          Madison and Michael's Wedding
+        </Typography>
+        <Stack spacing={2} direction="row" sx={{ marginLeft: 'auto' }}>
+          {pages.map((page) => (
+            <Button component={Link} to={page.to} key={page.name} variant="contained">
+              {page.name}
+            </Button>
+          ))}
+          <IconButton variant="contained" color="inherit" onClick={switchColorMode}>
+            {theme.palette.mode === 'dark' ? <DarkModeIcon /> : <LightModeIcon />}
+          </IconButton>
+        </Stack>
+      </Toolbar>
+    </AppBar>
+  );
+}
+
+export default NavBar;
diff --git a/src/components/Rsvp.tsx b/src/components/Rsvp.tsx
index 881bf09..81f37fc 100644
--- a/src/components/Rsvp.tsx
+++ b/src/components/Rsvp.tsx
@@ -80,6 +80,7 @@ function Rsvp() {
             sx={{ maxWidth: 240 }}
             variant="contained">
             Add Additional Guests
+            {/* TODO: only allow guests we've selected; allow kids? */}
           </Button>
         </Grid>
         {guestList}
diff --git a/src/components/Schedule.tsx b/src/components/Schedule.tsx
index 2fd0ab0..002907a 100644
--- a/src/components/Schedule.tsx
+++ b/src/components/Schedule.tsx
@@ -1,4 +1,5 @@
 import Typography from '@mui/material/Typography';
+import Paper from '@mui/material/Paper';
 import Timeline from '@mui/lab/Timeline';
 import TimelineItem from '@mui/lab/TimelineItem';
 import TimelineSeparator from '@mui/lab/TimelineSeparator';
@@ -11,27 +12,32 @@ import TimelineOppositeContent, {
 
 function Schedule() {
   return (
-    <Timeline>
-      <TimelineItem>
-        <TimelineOppositeContent>
-          4:00 pm
-        </TimelineOppositeContent>
-        <TimelineSeparator>
-          <TimelineDot />
-          <TimelineConnector />
-        </TimelineSeparator>
-        <TimelineContent>Ceremony</TimelineContent>
-      </TimelineItem>
-      <TimelineItem>
-        <TimelineOppositeContent>
-          5:00 pm
-        </TimelineOppositeContent>
-        <TimelineSeparator>
-          <TimelineDot />
-        </TimelineSeparator>
-        <TimelineContent>Reception</TimelineContent>
-      </TimelineItem>
-    </Timeline>
+    <Paper>
+      <Typography variant="h6">
+        Location and attire
+      </Typography>
+      <Timeline>
+        <TimelineItem>
+          <TimelineOppositeContent>
+            4:00 pm
+          </TimelineOppositeContent>
+          <TimelineSeparator>
+            <TimelineDot />
+            <TimelineConnector />
+          </TimelineSeparator>
+          <TimelineContent>Ceremony</TimelineContent>
+        </TimelineItem>
+        <TimelineItem>
+          <TimelineOppositeContent>
+            5:00 pm
+          </TimelineOppositeContent>
+          <TimelineSeparator>
+            <TimelineDot />
+          </TimelineSeparator>
+          <TimelineContent>Reception</TimelineContent>
+        </TimelineItem>
+      </Timeline>
+    </Paper>
   );
 }
 
diff --git a/src/main.tsx b/src/main.tsx
index 5364a01..9f33481 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -3,7 +3,7 @@ import ReactDOM from 'react-dom/client';
 import { createBrowserRouter, RouterProvider } from 'react-router-dom';
 
 import App from './App';
-import Bar from './components/Bar';
+import NavBar from './components/NavBar';
 import Home from './components/Home';
 import Schedule from './components/Schedule';
 import Registry from './components/Registry';
-- 
cgit v1.2.3