From 1324f5f2a5dcba40d44e392d75ff5966264e8d58 Mon Sep 17 00:00:00 2001
From: Michael Hunteman <michael@huntm.net>
Date: Fri, 26 Apr 2024 17:33:06 -0700
Subject: Update theme

---
 package.json                 |  2 +-
 src/ThemeContextProvider.tsx | 32 ++++++++++++++++++++---------
 src/components/Desktop.tsx   |  2 +-
 src/components/Mobile.tsx    |  2 +-
 src/components/RsvpForm.tsx  |  2 +-
 src/components/Schedule.tsx  | 48 ++++++++++++++++++++++++++++----------------
 src/main.css                 |  1 -
 7 files changed, 57 insertions(+), 32 deletions(-)

diff --git a/package.json b/package.json
index fb5ffcd..fac7b6b 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,7 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "bunx --bun vite",
+    "dev": "bunx --bun vite --host",
     "build": "tsc && vite build",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview"
diff --git a/src/ThemeContextProvider.tsx b/src/ThemeContextProvider.tsx
index 87b401a..6ae1430 100644
--- a/src/ThemeContextProvider.tsx
+++ b/src/ThemeContextProvider.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { ReactNode, createContext, useMemo, useState } from 'react';
 import { ThemeProvider, createTheme } from '@mui/material/styles';
 import useMediaQuery from '@mui/material/useMediaQuery';
+import type { PaletteMode } from '@mui/material';
 
 type ThemeContextType = {
   toggleColorMode: () => void;
@@ -22,18 +23,29 @@ function ThemeContextProvider({ children }: ThemeProviderProps) {
   );
 
   const toggleColorMode = () => {
-    setMode((prevMode) => (prevMode === 'light' ? 'dark' : 'light'));
+    setMode((prevMode: PaletteMode) =>
+      prevMode === 'light' ? 'dark' : 'light'
+    );
   };
 
-  const theme = useMemo(
-    () =>
-      createTheme({
-        palette: {
-          mode,
-        },
-      }),
-    [mode]
-  );
+  const getDesignTokens = (mode: PaletteMode) => ({
+    palette: {
+      mode,
+      ...(mode === 'light'
+        ? {
+            primary: {
+              main: '#007bff',
+            },
+          }
+        : {
+            primary: {
+              main: '#78bef8',
+            },
+          }),
+    },
+  });
+
+  const theme = useMemo(() => createTheme(getDesignTokens(mode)), [mode]);
 
   return (
     <ThemeContext.Provider value={{ toggleColorMode }}>
diff --git a/src/components/Desktop.tsx b/src/components/Desktop.tsx
index 72b583d..13de4ee 100644
--- a/src/components/Desktop.tsx
+++ b/src/components/Desktop.tsx
@@ -20,7 +20,7 @@ function Desktop() {
         </Button>
       ))}
       <IconButton color="inherit" onClick={toggleColorMode}>
-        {theme.palette.mode === 'dark' ? <DarkModeIcon /> : <LightModeIcon />}
+        {theme.palette.mode === 'dark' ? <LightModeIcon /> : <DarkModeIcon />}
       </IconButton>
     </div>
   );
diff --git a/src/components/Mobile.tsx b/src/components/Mobile.tsx
index 7d790e1..2e7b15c 100644
--- a/src/components/Mobile.tsx
+++ b/src/components/Mobile.tsx
@@ -25,7 +25,7 @@ function Mobile() {
   return (
     <>
       <IconButton color="inherit" onClick={toggleColorMode}>
-        {theme.palette.mode === 'dark' ? <DarkModeIcon /> : <LightModeIcon />}
+        {theme.palette.mode === 'dark' ? <LightModeIcon /> : <DarkModeIcon />}
       </IconButton>
       <IconButton
         color="inherit"
diff --git a/src/components/RsvpForm.tsx b/src/components/RsvpForm.tsx
index 9e957f8..99d3059 100644
--- a/src/components/RsvpForm.tsx
+++ b/src/components/RsvpForm.tsx
@@ -95,7 +95,7 @@ function RsvpForm() {
     >
       <Grid container spacing={2} sx={{ mt: 8 }}>
         <Grid item xs={12}>
-          <p style={{ textAlign: 'center' }}>
+          <p>
             Please RSVP for the wedding by March 10, 2025. The ceremony will
             commence at 3 pm on April 26 in Divine Shepherd. The reception will
             follow at 5 pm in A Venue on the Ridge.
diff --git a/src/components/Schedule.tsx b/src/components/Schedule.tsx
index 08b10e2..d941a18 100644
--- a/src/components/Schedule.tsx
+++ b/src/components/Schedule.tsx
@@ -1,20 +1,20 @@
 import React from 'react';
-import { Container, Paper } from '@mui/material';
-import PlaceIcon from '@mui/icons-material/Place';
+import { Container, Paper, Typography, useTheme } from '@mui/material';
 
 function Schedule() {
+  const theme = useTheme();
   return (
     <Container
       maxWidth="md"
-      style={{
-        top: '1800',
+      sx={{
         display: 'flex',
         justifyContent: 'center',
       }}
     >
       <Paper
         elevation={3}
-        style={{
+        sx={{
+          mt: 8,
           height: '50%',
           width: '100%',
           display: 'flex',
@@ -40,21 +40,36 @@ function Schedule() {
             }}
           >
             <div style={{ width: '35%' }}>
-              <h2>2:00 PM</h2>
+              <p>April 26, 2025</p>
             </div>
             <div style={{ width: '65%' }}>
-              <h2>Ceremony</h2>
-              <h3>
+              <Typography variant="h5">Wedding Schedule</Typography>
+            </div>
+          </div>
+          <hr style={{ width: '100%' }} />
+          <div
+            style={{
+              height: '100%',
+              width: '100%',
+              display: 'flex',
+              alignItems: 'center',
+            }}
+          >
+            <div style={{ width: '35%' }}>
+              <p>2:00 PM</p>
+            </div>
+            <div style={{ width: '65%' }}>
+              <Typography variant="h6">Ceremony</Typography>
+              <p>
                 Divine Shepherd
                 <br />
                 <a
                   href="https://maps.app.goo.gl/dGWvmjPiVjNGBVkZ9"
-                  style={{ color: 'inherit', textDecoration: 'none' }}
+                  style={{ color: theme.palette.primary.main }}
                 >
                   15005 Q St, Omaha, NE 68137
-                  <PlaceIcon />
                 </a>
-              </h3>
+              </p>
             </div>
           </div>
           <hr style={{ width: '100%' }} />
@@ -67,21 +82,20 @@ function Schedule() {
             }}
           >
             <div style={{ width: '35%' }}>
-              <h2>4:00 PM</h2>
+              <p>4:00 PM</p>
             </div>
             <div style={{ width: '65%' }}>
-              <h2>Reception</h2>
-              <h3>
+              <Typography variant="h6">Reception</Typography>
+              <p>
                 A Venue on the Ridge
                 <br />
                 <a
                   href="https://maps.app.goo.gl/35RRqxzQdq6E4eSMA"
-                  style={{ color: 'inherit', textDecoration: 'none' }}
+                  style={{ color: theme.palette.primary.main }}
                 >
                   20033 Elkhorn Ridge Dr, Elkhorn, NE 68022
-                  <PlaceIcon />
                 </a>
-              </h3>
+              </p>
             </div>
           </div>
         </div>
diff --git a/src/main.css b/src/main.css
index 59456cc..5cb7cd6 100644
--- a/src/main.css
+++ b/src/main.css
@@ -1,5 +1,4 @@
 #root, body {
   height: 100vh;
-  width: 100vw;
   margin: 0
 }
-- 
cgit v1.2.3