Update theme

9 files changed, 159 insertions, 79 deletions

diff --git a/package-lock.json b/package-lock.json
index bb7ec6b..7d50e2f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,7 @@
         "@emotion/react": "^11.11.3",
         "@emotion/styled": "^11.11.0",
         "@fontsource/roboto": "^5.0.8",
+        "@mui/icons-material": "^5.15.10",
         "@mui/lab": "^5.0.0-alpha.165",
         "@mui/material": "^5.15.9",
         "react": "^18.2.0",
@@ -1199,6 +1200,31 @@
         "url": "https://opencollective.com/mui-org"
       }
     },
+    "node_modules/@mui/icons-material": {
+      "version": "5.15.10",
+      "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-5.15.10.tgz",
+      "integrity": "sha512-9cF8oUHZKo9oQ7EQ3pxPELaZuZVmphskU4OI6NiJNDVN7zcuvrEsuWjYo1Zh4fLiC39Nrvm30h/B51rcUjvSGA==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.9"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@mui/material": "^5.0.0",
+        "@types/react": "^17.0.0 || ^18.0.0",
+        "react": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@mui/lab": {
       "version": "5.0.0-alpha.165",
       "resolved": "https://registry.npmjs.org/@mui/lab/-/lab-5.0.0-alpha.165.tgz",
diff --git a/package.json b/package.json
index 11541ee..14b10ec 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
     "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",
     "@fontsource/roboto": "^5.0.8",
+    "@mui/icons-material": "^5.15.10",
     "@mui/lab": "^5.0.0-alpha.165",
     "@mui/material": "^5.15.9",
     "react": "^18.2.0",
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';