diff options
| -rw-r--r-- | package.json | 2 | ||||
| -rw-r--r-- | src/ThemeContextProvider.tsx | 32 | ||||
| -rw-r--r-- | src/components/Desktop.tsx | 2 | ||||
| -rw-r--r-- | src/components/Mobile.tsx | 2 | ||||
| -rw-r--r-- | src/components/RsvpForm.tsx | 2 | ||||
| -rw-r--r-- | src/components/Schedule.tsx | 48 | ||||
| -rw-r--r-- | 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 } |