Profile: put dark mode outside and simplify login (#133)

* Profile: put dark mode outside and simplify login * Profile: change popover to popper * ThemePalette: resolve conflicts * Revert back the changes of a different PR (#132) * File formatted * Updated the Login button for non-authenticated users * Updated the Account Popper * DarkMode: change default page from script tag to style tag * Added custom (non-MUI) loader to ModeContext, as MUI loader having issues with setting some styles before ThemRegistry cache is initialised * Add back MUI circularloader * Move edit button on profile to right side in mobile view --------- Co-authored-by: Bhav Beri <[email protected]>
Clubs-Council-IIITH · Dec 22, 2024 · 335bbac · 335bbac
1 parent 29ddece
commit 335bbac
Show file tree

Hide file tree

Showing 8 changed files with 229 additions and 184 deletions.
diff --git 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 (
     <html lang="en">
       <body className={fontClass}>
+      <style>
+          {`
+            @media (prefers-color-scheme: dark) {
+              body {
+                background-color: #1e1e1e;
+              }
+            }
+          `}
+        </style>
         <ModeProvider>
           <ThemeRegistry nonce={nonce}>
             <Progressbar />

diff --git 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)) ? (
-        <ActionPalette right={[EditUser]} />
+        <ActionPalette right={[EditUser]} rightJustifyMobile="flex-end" />
       ) : null}
       <Grid container spacing={2} mt={4}>
         <Grid item xs={12}>

diff --git a/src/components/ActionPalette.jsx b/src/components/ActionPalette.jsx
@@ -5,6 +5,7 @@ export default function ActionPalette({
   right = [],
   leftProps = [],
   rightProps = [],
+  rightJustifyMobile = "center",
 }) {
   return (
     <Box width="100%">
@@ -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
@@ -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 (
     <AppBar
@@ -76,13 +84,17 @@ function Bar({ onOpenDrawer }) {
         <Stack
           direction="row"
           spacing={{
-            xs: 0.5,
-            sm: 1,
+            xs: 1,
+            sm: 1.5,
           }}
           sx={{
             alignItems: "center",
           }}
         >
+          <ModeSwitch
+            checked={isDark}
+            onChange={handleChange}
+          />
           <AccountPopover />
         </Stack>
       </Toolbar>