Update theme

4 files changed, 81 insertions, 60 deletions

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