diff --git a/nsc-events-nextjs/app/create-event/page.tsx b/nsc-events-nextjs/app/create-event/page.tsx index 018aaf2..f9bdfda 100644 --- a/nsc-events-nextjs/app/create-event/page.tsx +++ b/nsc-events-nextjs/app/create-event/page.tsx @@ -121,7 +121,7 @@ const CreateEvent: React.FC = () => { {/* page title */} { textAlign={"center"} marginTop={"0.5rem"} marginBottom={"1rem"} - sx={{ color: "white" }} + sx={{ color: theme.palette.primary.contrastText }} > Add Event @@ -142,7 +142,7 @@ const CreateEvent: React.FC = () => { textAlign={"center"} marginTop={"0.5rem"} marginBottom={"1rem"} - sx={{ color: "red" }} + sx={{ color: theme.palette.error.main }} > REQUIRED FIELDS* @@ -153,7 +153,7 @@ const CreateEvent: React.FC = () => { display: "flex", justifyContent: "center", flexDirection: isMobile ? "column" : "row", - backgroundColor: "#114FA2", + backgroundColor: theme.palette.primary.dark, boxShadow: "3px 3px 5px 0px rgba(0,0,0,0.3)", width: "100%", borderRadius: 1, @@ -165,7 +165,7 @@ const CreateEvent: React.FC = () => { margin: isMobile ? 0 : 4, marginTop: isMobile ? 2 : 4, width: isMobile ? "100%" : "33%", - backgroundColor: mode === "light" ? "white" : "black", + backgroundColor: theme.palette.background.paper, boxShadow: "3px 3px 5px 0px rgba(0,0,0,0.3)", borderRadius: 1, }} @@ -185,7 +185,7 @@ const CreateEvent: React.FC = () => { InputLabelProps={{ style: textFieldStyle.label }} placeholder="Enter the title of the event" sx={{ - backgroundColor: mode === "light" ? "white" : "#f5f1f11a", + backgroundColor: theme.palette.background.default, }} /> @@ -202,7 +202,7 @@ const CreateEvent: React.FC = () => { InputLabelProps={{ style: textFieldStyle.label }} placeholder="Enter the host of the event" sx={{ - backgroundColor: mode === "light" ? "white" : "#f5f1f11a", + backgroundColor: theme.palette.background.default, }} /> @@ -219,7 +219,7 @@ const CreateEvent: React.FC = () => { InputLabelProps={{ style: textFieldStyle.label }} placeholder="Enter the registration of the event" sx={{ - backgroundColor: mode === "light" ? "white" : "#f5f1f11a", + backgroundColor: theme.palette.background.default, }} /> @@ -239,7 +239,7 @@ const CreateEvent: React.FC = () => { InputLabelProps={{ style: textFieldStyle.label }} placeholder="Enter the description of the event" sx={{ - backgroundColor: mode === "light" ? "white" : "#f5f1f11a", + backgroundColor: theme.palette.background.default, }} /> @@ -265,7 +265,7 @@ const CreateEvent: React.FC = () => { margin: isMobile ? 0 : 4, marginTop: isMobile ? 2 : 4, width: isMobile ? "100%" : "33%", - backgroundColor: mode === "light" ? "white" : "black", + backgroundColor: theme.palette.background.paper, boxShadow: "3px 3px 5px 0px rgba(0,0,0,0.3)", borderRadius: 1, }} @@ -273,7 +273,7 @@ const CreateEvent: React.FC = () => { {/* stack tag for vertical alignment */} { { /> { margin: isMobile ? 0 : 4, marginTop: isMobile ? 2 : 4, width: isMobile ? "100%" : "33%", - backgroundColor: mode === "light" ? "white" : "black", + backgroundColor: theme.palette.background.paper, boxShadow: "3px 3px 5px 0px rgba(0,0,0,0.3)", borderRadius: 1, }} @@ -342,7 +342,7 @@ const CreateEvent: React.FC = () => { sx={{ marginBottom: 2, width: "100%", - backgroundColor: mode === "light" ? "white" : "#f5f1f11a", + backgroundColor: theme.palette.background.default, }} > @@ -407,7 +407,7 @@ const CreateEvent: React.FC = () => { InputLabelProps={{ style: textFieldStyle.label }} placeholder="Enter the capacity of the event" sx={{ - backgroundColor: mode === "light" ? "white" : "#f5f1f11a", + backgroundColor: theme.palette.background.default, }} /> @@ -423,7 +423,7 @@ const CreateEvent: React.FC = () => { InputProps={{ style: textFieldStyle.input }} InputLabelProps={{ style: textFieldStyle.label }} sx={{ - backgroundColor: mode === "light" ? "white" : "#f5f1f11a", + backgroundColor: theme.palette.background.default, }} /> @@ -440,7 +440,7 @@ const CreateEvent: React.FC = () => { InputLabelProps={{ style: textFieldStyle.label }} placeholder="Enter the location of the event" sx={{ - backgroundColor: mode === "light" ? "white" : "#f5f1f11a", + backgroundColor: theme.palette.background.default, }} /> @@ -451,7 +451,7 @@ const CreateEvent: React.FC = () => { {/* Begining of tag selector section */} { InputLabelProps={{ style: textFieldStyle.label }} placeholder="Enter the tag of the event" sx={{ - backgroundColor: mode === "light" ? "white" : "black", + backgroundColor: theme.palette.background.paper, borderRadius: 1, }} // change border radius as needed /> @@ -492,8 +492,8 @@ const CreateEvent: React.FC = () => { style={{ textTransform: "none", margin: 10 }} sx={{ "&:hover": { - backgroundColor: "#114FA2", - color: "white", + backgroundColor: theme.palette.primary.dark, + color: theme.palette.primary.contrastText, }, }} > @@ -508,7 +508,7 @@ const CreateEvent: React.FC = () => { display: "flex", justifyContent: "center", flexDirection: isMobile ? "column" : "row", - backgroundColor: "#114FA2", + backgroundColor: theme.palette.primary.dark, boxShadow: "3px 3px 5px 0px rgba(0,0,0,0.3)", borderRadius: 1, }} @@ -519,7 +519,7 @@ const CreateEvent: React.FC = () => { margin: isMobile ? 0 : 4, marginTop: isMobile ? 2 : 4, width: isMobile ? "100%" : "33%", - backgroundColor: mode === "light" ? "white" : "black", + backgroundColor: theme.palette.background.paper, boxShadow: "3px 3px 5px 0px rgba(0,0,0,0.3)", borderRadius: 1, }} @@ -538,7 +538,7 @@ const CreateEvent: React.FC = () => { InputLabelProps={{ style: textFieldStyle.label }} placeholder="Enter the schedule of the event" sx={{ - backgroundColor: mode === "light" ? "white" : "#f5f1f11a", + backgroundColor: theme.palette.background.default, }} /> @@ -555,7 +555,7 @@ const CreateEvent: React.FC = () => { InputLabelProps={{ style: textFieldStyle.label }} placeholder="Enter the speaker(s) of the event" sx={{ - backgroundColor: mode === "light" ? "white" : "#f5f1f11a", + backgroundColor: theme.palette.background.default, }} /> @@ -572,7 +572,7 @@ const CreateEvent: React.FC = () => { InputLabelProps={{ style: textFieldStyle.label }} placeholder="Enter the prerequisites of the event" sx={{ - backgroundColor: mode === "light" ? "white" : "#f5f1f11a", + backgroundColor: theme.palette.background.default, }} /> @@ -589,7 +589,7 @@ const CreateEvent: React.FC = () => { InputLabelProps={{ style: textFieldStyle.label }} placeholder="Enter the cancellation policy of the event" sx={{ - backgroundColor: mode === "light" ? "white" : "#f5f1f11a", + backgroundColor: theme.palette.background.default, }} /> @@ -601,7 +601,7 @@ const CreateEvent: React.FC = () => { margin: isMobile ? 0 : 4, marginTop: isMobile ? 2 : 4, width: isMobile ? "100%" : "33%", - backgroundColor: mode === "light" ? "white" : "black", + backgroundColor: theme.palette.background.paper, boxShadow: "3px 3px 5px 0px rgba(0,0,0,0.3)", borderRadius: 1, }} @@ -620,7 +620,7 @@ const CreateEvent: React.FC = () => { InputLabelProps={{ style: textFieldStyle.label }} placeholder="Enter the contact of the event" sx={{ - backgroundColor: mode === "light" ? "white" : "#f5f1f11a", + backgroundColor: theme.palette.background.default, }} /> @@ -639,7 +639,7 @@ const CreateEvent: React.FC = () => { InputLabelProps={{ style: textFieldStyle.label }} placeholder="Enter the Facebook link of the event" sx={{ - backgroundColor: mode === "light" ? "white" : "#f5f1f11a", + backgroundColor: theme.palette.background.default, }} /> @@ -658,7 +658,7 @@ const CreateEvent: React.FC = () => { InputLabelProps={{ style: textFieldStyle.label }} placeholder="Enter the Twitter link of the event" sx={{ - backgroundColor: mode === "light" ? "white" : "#f5f1f11a", + backgroundColor: theme.palette.background.default, }} /> @@ -677,7 +677,7 @@ const CreateEvent: React.FC = () => { InputLabelProps={{ style: textFieldStyle.label }} placeholder="Enter the Instagram link of the event" sx={{ - backgroundColor: mode === "light" ? "white" : "#f5f1f11a", + backgroundColor: theme.palette.background.default, }} /> @@ -688,7 +688,7 @@ const CreateEvent: React.FC = () => { margin: isMobile ? 0 : 4, marginTop: isMobile ? 2 : 4, width: isMobile ? "100%" : "33%", - backgroundColor: mode === "light" ? "white" : "black", + backgroundColor: theme.palette.background.paper, boxShadow: "3px 3px 5px 0px rgba(0,0,0,0.3)", borderRadius: 1, }} @@ -709,7 +709,7 @@ const CreateEvent: React.FC = () => { InputLabelProps={{ style: textFieldStyle.label }} placeholder="Enter the hashtag of the event" sx={{ - backgroundColor: mode === "light" ? "white" : "#f5f1f11a", + backgroundColor: theme.palette.background.default, }} /> @@ -726,7 +726,7 @@ const CreateEvent: React.FC = () => { InputLabelProps={{ style: textFieldStyle.label }} placeholder="Enter the privacy of the event" sx={{ - backgroundColor: mode === "light" ? "white" : "#f5f1f11a", + backgroundColor: theme.palette.background.default, }} /> @@ -743,7 +743,7 @@ const CreateEvent: React.FC = () => { InputLabelProps={{ style: textFieldStyle.label }} placeholder="Enter the accessibility of the event" sx={{ - backgroundColor: mode === "light" ? "white" : "#f5f1f11a", + backgroundColor: theme.palette.background.default, }} /> @@ -759,7 +759,7 @@ const CreateEvent: React.FC = () => { InputProps={{ style: textFieldStyle.input }} InputLabelProps={{ style: textFieldStyle.label }} sx={{ - backgroundColor: mode === "light" ? "white" : "#f5f1f11a", + backgroundColor: theme.palette.background.default, }} /> @@ -777,8 +777,8 @@ const CreateEvent: React.FC = () => { sx={{ margin: 1, "&:hover": { - backgroundColor: "#114FA2", - color: "white", + backgroundColor: theme.palette.primary.dark, + color: theme.palette.primary.contrastText, }, }} > diff --git a/nsc-events-nextjs/app/event-detail/page.tsx b/nsc-events-nextjs/app/event-detail/page.tsx index c0bf09f..04602be 100644 --- a/nsc-events-nextjs/app/event-detail/page.tsx +++ b/nsc-events-nextjs/app/event-detail/page.tsx @@ -77,7 +77,10 @@ const EventDetail = () => { const { palette } = useTheme(); - const containerColor = palette.mode === "dark" ? "#333" : "#fff"; + // Use a slightly elevated surface in dark mode to stand out from the page background + const containerColor = palette.mode === "dark" + ? palette.grey[800] + : palette.background.paper; const theme = useTheme(); const isTablet = useMediaQuery(theme.breakpoints.between('sm', 'md')); const isMobile = useMediaQuery(theme.breakpoints.between('xs', 'sm')); @@ -569,8 +572,8 @@ const EventDetail = () => { )} {events.length > 1 && events.findIndex(e => e === event?.id) < events.length - 1 && ( )} @@ -747,7 +750,7 @@ const EventDetail = () => { autoHideDuration={1200} anchorOrigin={{ vertical: "bottom", horizontal: "center" }} > - + diff --git a/nsc-events-nextjs/components/ArchiveDialog.tsx b/nsc-events-nextjs/components/ArchiveDialog.tsx index 654bde3..bb96603 100644 --- a/nsc-events-nextjs/components/ArchiveDialog.tsx +++ b/nsc-events-nextjs/components/ArchiveDialog.tsx @@ -3,7 +3,7 @@ import DialogTitle from "@mui/material/DialogTitle"; import DialogContent from "@mui/material/DialogContent"; import DialogContentText from "@mui/material/DialogContentText"; import DialogActions from "@mui/material/DialogActions"; -import { Button, SnackbarContent } from "@mui/material"; +import { Button, SnackbarContent, useTheme } from "@mui/material"; import React, { useState } from "react"; import { useMutation, useQueryClient } from "@tanstack/react-query"; import { useRouter } from "next/navigation"; @@ -17,6 +17,7 @@ interface ArchiveDialogProps { } const ArchiveDialog = ({ isOpen, event, dialogToggle }: ArchiveDialogProps) => { + const theme = useTheme(); const router = useRouter(); const [snackbarMessage, setSnackbarMessage] = useState(""); @@ -103,7 +104,7 @@ const ArchiveDialog = ({ isOpen, event, dialogToggle }: ArchiveDialogProps) => { autoHideDuration={1200} anchorOrigin={{ vertical: "bottom", horizontal: "center" }} > - + ); diff --git a/nsc-events-nextjs/components/AttendDialog.tsx b/nsc-events-nextjs/components/AttendDialog.tsx index 51d13f5..a4b0cef 100644 --- a/nsc-events-nextjs/components/AttendDialog.tsx +++ b/nsc-events-nextjs/components/AttendDialog.tsx @@ -11,6 +11,7 @@ import { SnackbarContent, Tooltip, Typography, + useTheme, } from "@mui/material"; import DialogActions from "@mui/material/DialogActions"; import Snackbar from "@mui/material/Snackbar"; @@ -28,7 +29,7 @@ interface AttendDialogProps { } const AttendDialog = ({ isOpen, eventId, dialogToggle, onSuccess }: AttendDialogProps) => { - + const theme = useTheme(); const [checked, setChecked] = useState(false); const [snackbarMessage, setSnackbarMessage] = useState(""); const [heardFrom, setHeardFrom] = useState([]); // New state for "Heard From" @@ -263,7 +264,7 @@ const AttendDialog = ({ isOpen, eventId, dialogToggle, onSuccess }: AttendDialog > diff --git a/nsc-events-nextjs/components/CoverPhotoDialog.tsx b/nsc-events-nextjs/components/CoverPhotoDialog.tsx index 431a5fa..3669439 100644 --- a/nsc-events-nextjs/components/CoverPhotoDialog.tsx +++ b/nsc-events-nextjs/components/CoverPhotoDialog.tsx @@ -1,4 +1,4 @@ -import { Box, Button, Dialog, DialogActions, DialogContent, DialogTitle, SnackbarContent, Typography } from '@mui/material' +import { Box, Button, Dialog, DialogActions, DialogContent, DialogTitle, SnackbarContent, Typography, useTheme } from '@mui/material' import AddPhotoAlternateIcon from '@mui/icons-material/AddPhotoAlternate'; import React, { useState } from 'react' import { useMutation } from '@tanstack/react-query'; @@ -14,7 +14,7 @@ interface CoverPhotoDialogProps { } function CoverPhotoDialog({ isOpen, dialogToggle, eventId, setEvent }: CoverPhotoDialogProps) { - + const theme = useTheme(); const [selectedImage, setSelectedImage] = useState(undefined); const [selectedFile, setSelectedFile] = useState(undefined); const [snackbarMessage, setSnackbarMessage] = useState(""); @@ -147,7 +147,7 @@ function CoverPhotoDialog({ isOpen, dialogToggle, eventId, setEvent }: CoverPhot > diff --git a/nsc-events-nextjs/components/EditDialog.tsx b/nsc-events-nextjs/components/EditDialog.tsx index 82aea17..aac1259 100644 --- a/nsc-events-nextjs/components/EditDialog.tsx +++ b/nsc-events-nextjs/components/EditDialog.tsx @@ -4,7 +4,7 @@ import Dialog from "@mui/material/Dialog"; // NOTE: We specify the generic type for the pickers to resolve type errors import { DatePicker, LocalizationProvider, TimePicker } from "@mui/x-date-pickers"; import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFns"; -import { Box, Button, Stack, Typography } from "@mui/material"; +import { Box, Button, Stack, Typography, useTheme } from "@mui/material"; import TextField from "@mui/material/TextField"; import { textFieldStyle } from "@/components/InputFields"; import TagSelector from "@/components/TagSelector"; @@ -19,6 +19,7 @@ interface EditDialogProps { } const EditDialog = ({ isOpen, event, toggleEditDialog }: EditDialogProps) => { + const theme = useTheme(); const { handleDateChange, onStartTimeChange, @@ -87,7 +88,7 @@ const EditDialog = ({ isOpen, event, toggleEditDialog }: EditDialogProps) => { - + Edit Event @@ -340,13 +341,13 @@ const EditDialog = ({ isOpen, event, toggleEditDialog }: EditDialogProps) => { {/* Display non-nested errors */} {Object.entries(errors).map(([key, value]) => { if (typeof value === 'string' && value) { - return

{value}

; + return

{value}

; } return null; })} {/* Display nested social media errors */} {errors.eventSocialMedia && Object.entries(errors.eventSocialMedia).map(([nestedKey, nestedError]) => ( - nestedError ?

+ nestedError ?

{`${nestedKey}: ${nestedError}`}

: null ))} diff --git a/nsc-events-nextjs/components/LoginWindow.tsx b/nsc-events-nextjs/components/LoginWindow.tsx index f53d36b..94afb4b 100644 --- a/nsc-events-nextjs/components/LoginWindow.tsx +++ b/nsc-events-nextjs/components/LoginWindow.tsx @@ -172,7 +172,7 @@ const LoginWindow = () => { type="submit" fullWidth variant="contained" - sx={{ mt: 3, mb: 2, color: "black", backgroundColor: palette.secondary.light, fontFamily: "font-serif" }} + sx={{ mt: 3, mb: 2, color: palette.secondary.contrastText, backgroundColor: palette.secondary.light, fontFamily: "font-serif" }} > Login