diff --git a/src/app/layout.jsx b/src/app/layout.jsx index e43bcd74..58af6ed9 100644 --- a/src/app/layout.jsx +++ b/src/app/layout.jsx @@ -58,7 +58,7 @@ export const metadata = { export default async function RootLayout({ children }) { // get the nonce and use it - const nonce = headers().get("x-nonce") || " "; + const nonce = headers().get('x-nonce') || ""; // fetch currently logged in user const { data: { userMeta, userProfile } = {} } = await getClient().query( @@ -78,6 +78,15 @@ export default async function RootLayout({ children }) { return ( + diff --git a/src/app/profile/[id]/page.jsx b/src/app/profile/[id]/page.jsx index 007e725b..ecb8137a 100644 --- a/src/app/profile/[id]/page.jsx +++ b/src/app/profile/[id]/page.jsx @@ -23,7 +23,7 @@ export async function generateMetadata({ params }) { userInput: { uid: id, }, - }, + } ); const user = { ...userMeta, ...userProfile }; @@ -55,7 +55,7 @@ export default async function Profile({ params }) { userInput: { uid: id, }, - }, + } ); const user = { ...userMeta, ...userProfile }; @@ -64,7 +64,7 @@ export default async function Profile({ params }) { if (user?.role === "club") { const { data: { club: targetClub } = {} } = await getClient().query( GET_CLUB, - { clubInput: { cid: user.uid } }, + { clubInput: { cid: user.uid } } ); club = targetClub; } @@ -81,7 +81,7 @@ export default async function Profile({ params }) { // get list of memberRoles.roles along with member.cid memberships = memberRoles.reduce( (cv, m) => cv.concat(m.roles.map((r) => ({ ...r, cid: m.cid }))), - [], + [] ); if (memberships?.length === 0 && currentUser?.uid !== user.uid) { @@ -99,7 +99,7 @@ export default async function Profile({ params }) { {!["club", "cc"].includes(user?.role) && (currentUser?.role === "cc" || (memberships?.length !== 0 && currentUser?.uid === user?.uid)) ? ( - + ) : null} diff --git a/src/components/ActionPalette.jsx b/src/components/ActionPalette.jsx index dad9d5d0..41891d33 100644 --- a/src/components/ActionPalette.jsx +++ b/src/components/ActionPalette.jsx @@ -5,6 +5,7 @@ export default function ActionPalette({ right = [], leftProps = [], rightProps = [], + rightJustifyMobile = "center", }) { return ( @@ -38,7 +39,7 @@ export default function ActionPalette({ xs={12} md={6} spacing={1} - justifyContent={{ xs: "center", md: "flex-end" }} + justifyContent={{ xs: rightJustifyMobile, md: "flex-end" }} alignItems="center" my={0.5} > diff --git a/src/components/Layout.jsx b/src/components/Layout.jsx index 612f6830..0b15c8df 100644 --- a/src/components/Layout.jsx +++ b/src/components/Layout.jsx @@ -21,14 +21,16 @@ import { bgBlur } from "utils/cssStyles"; import Logo from "components/Logo"; import Icon from "components/Icon"; import { DrawerItem, DrawerDropdown } from "components/DrawerItem"; +import { useMode } from "contexts/ModeContext"; import Footer from "components/Footer"; import AccountPopover from "components/profile/AccountPopover"; import ScrollbarWrapper from "components/ScrollbarWrapper"; import { useAuth } from "components/AuthProvider"; +import { ModeSwitch } from "components/ModeSwitch"; // define top bar width const BAR_HEIGHT_MOBILE = 64; -const BAR_HEIGHT_DESKTOP = 92; +const BAR_HEIGHT_DESKTOP = 85; // define navigation drawer width const DRAWER_WIDTH = 280; @@ -39,6 +41,12 @@ export const BUG_REPORT_URL = function Bar({ onOpenDrawer }) { const theme = useTheme(); + const { isDark, setMode } = useMode(); // Accessing isDark and setMode from ModeContext + + const handleChange = () => { + // handleupdate(); + setMode(!isDark); // Toggle the mode + }; return ( + diff --git a/src/components/profile/AccountPopover.jsx b/src/components/profile/AccountPopover.jsx index b067fc1f..f3d5fb80 100644 --- a/src/components/profile/AccountPopover.jsx +++ b/src/components/profile/AccountPopover.jsx @@ -2,15 +2,22 @@ import React from "react"; import { + Box, + Button, + Fade, IconButton, Avatar, - Popover, + Popper, MenuItem, Divider, Stack, Typography, + Tooltip, + ClickAwayListener, } from "@mui/material"; -import { alpha } from "@mui/material/styles"; +import { useTheme, alpha } from "@mui/material/styles"; + +import LoginLogo from "components/svg/login.svg"; import Image from "next/image"; import Link from "next/link"; @@ -18,28 +25,22 @@ import Icon from "components/Icon"; import { getFile } from "utils/files"; import { login, logout } from "utils/auth"; import { useAuth } from "components/AuthProvider"; -import { useMode, useMode2 } from "contexts/ModeContext"; -import { ModeSwitch } from "components/ModeSwitch"; +import { useMode2 } from "contexts/ModeContext"; import { usePathname } from "next/navigation"; export default function AccountPopover() { const pathname = usePathname(); const { user, isAuthenticated } = useAuth(); - const { isDark, setMode } = useMode(); // Accessing isDark and setMode from ModeContext - const { isiframe, setIsiframe } = useMode2(); - const [open, setOpen] = React.useState(null); - - const handleChange = () => { - // handleupdate(); - setMode(!isDark); // Toggle the mode - }; + const { isiframe } = useMode2(); + const [open, setOpen] = React.useState(false); + const theme = useTheme(); - const handleOpen = (event) => { - setOpen(event.currentTarget); + const handleToggle = (event) => { + setOpen((prev) => (prev ? null : event.currentTarget)); }; - const handleClose = () => { - setOpen(null); + const handleClickAway = () => { + setOpen(false); }; const AUTHENTICATED_MENU_OPTIONS = [ @@ -50,171 +51,178 @@ export default function AccountPopover() { }, ]; - const COMMON_MENU_OPTIONS = []; - - return ( - <> - {!isiframe && ( - - alpha(theme.palette.background.neutral, 0.5), - }, - }), - ...(!open && { - // "&:after": { - "&:before": { - zIndex: 1, - content: "''", - width: "100%", - height: "100%", - borderRadius: "50%", - position: "absolute", + if (isiframe) return null; + + if (!isAuthenticated) { + return ( + + + + + + ); + } - + alpha(theme.palette.background.neutral, 0.5), }, - }, + }), + ...(!open && { + // "&:after": { + "&:before": { + content: "''", + width: "100%", + height: "100%", + borderRadius: "50%", + bgcolor: (theme) => alpha(theme.palette.background.neutral, 0.1), + }, + // }, + }), }} > - - - {/* {" "} */} - {/* Pass current isDark value and handleChange function to ModeSwitch component */} - {isAuthenticated ? ( - <> - - - {`${user?.firstName} ${user?.lastName}`} - - - {user?.email} - - - - {[...AUTHENTICATED_MENU_OPTIONS, ...COMMON_MENU_OPTIONS].length > - 0 ? ( - <> - - - - {[...AUTHENTICATED_MENU_OPTIONS, ...COMMON_MENU_OPTIONS].map( - (option) => ( - - - {option.label} - - ), - )} - - - ) : null} - - - - logout(pathname)} sx={{ m: 1 }}> - Logout - - - ) : ( - <> - {COMMON_MENU_OPTIONS.length > 0 ? ( - <> - - {COMMON_MENU_OPTIONS.map((option) => ( - + {user?.img ? ( + {user?.firstName} + ) : user?.firstName ? ( + `${user?.firstName?.[0]}${ + user?.lastName === "" ? "" : user?.lastName?.[0] + }` + ) : null} + + + + {open && ( + + + {({ TransitionProps }) => ( + + + + + {`${user?.firstName} ${user?.lastName}`} + + - - {option.label} - - ))} - - - - - ) : null} - - login(pathname)} sx={{ m: 1 }}> - Login - - - )} - + {user?.email} + + + + {[...AUTHENTICATED_MENU_OPTIONS].length > 0 ? ( + <> + + + + {[...AUTHENTICATED_MENU_OPTIONS].map((option) => ( + + + + {option.label} + + + ))} + + + ) : null} + + + + logout(pathname)} + sx={{ m: 1, ml: 0 }} + > + Logout + + + + )} + + + )} ); } diff --git a/src/components/profile/UserForm.jsx b/src/components/profile/UserForm.jsx index ca18950a..6983a221 100644 --- a/src/components/profile/UserForm.jsx +++ b/src/components/profile/UserForm.jsx @@ -78,7 +78,7 @@ export default function UserForm({ defaultValues = {}, action = "log" }) { data.img = await uploadImageFile( formData.img[0], `profile_${defaultValues.uid}`, - profile_warnSizeMB, + profile_warnSizeMB ); } else { data.img = null; diff --git a/src/components/svg/login.svg b/src/components/svg/login.svg new file mode 100644 index 00000000..d74c89af --- /dev/null +++ b/src/components/svg/login.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + \ No newline at end of file diff --git a/src/contexts/ModeContext.jsx b/src/contexts/ModeContext.jsx index d14995d8..905216f2 100644 --- a/src/contexts/ModeContext.jsx +++ b/src/contexts/ModeContext.jsx @@ -1,5 +1,6 @@ // ModeContext.js "use client"; + import React, { createContext, useState, useContext, useEffect } from "react"; import { CircularProgress } from "@mui/material"; import useMediaQuery from "@mui/material/useMediaQuery";