ystv · archessmn · Oct 7, 2023 · Oct 7, 2023 · Oct 8, 2023 · Oct 9, 2023
diff --git a/app/(authenticated)/calendar/[eventID]/SignupSheet.tsx b/app/(authenticated)/calendar/[eventID]/SignupSheet.tsx
@@ -111,7 +111,7 @@ function SignupSheet({
                         variant={"light"}
                         fullWidth
                         className={
-                          "!h-auto min-h-[var(--button-height)] !select-text"
+                          "!h-auto min-h-[var(--button-height)] !select-text dark:data-[disabled='true']:!bg-[--mantine-color-gray-filled] dark:data-[disabled='true']:text-[#888]"
                         }
                         justify={"left"}
                         disabled={readOnly}
@@ -126,10 +126,9 @@ function SignupSheet({
                         fullWidth
                         component={"div"}
                         className={
-                          "!flex !h-auto min-h-[var(--button-height)] !cursor-default !select-text items-center !text-left active:!transform-none"
+                          "!flex !h-auto min-h-[var(--button-height)] !cursor-default !select-text items-center !text-left !text-[--mantine-color-default-color] active:!transform-none"
                         }
                         justify={"left"}
-                        color={"black"}
                         disabled={readOnly}
                       >
                         {crew.users

diff --git a/app/(authenticated)/calendar/[eventID]/page.tsx b/app/(authenticated)/calendar/[eventID]/page.tsx
@@ -130,7 +130,7 @@ export default async function EventPage({
       {event.is_tentative && (
         <Alert
           variant="light"
-          color="grey"
+          className="!bg-[#f3f3f4] !text-[--mantine-color-default-color] dark:!bg-[--mantine-color-gray-filled]"
           title="Tentative Event"
           icon={<TbInfoCircle />}
         >

diff --git a/app/(authenticated)/calendar/[eventID]/schema.ts b/app/(authenticated)/calendar/[eventID]/schema.ts
@@ -17,7 +17,8 @@ export const CrewSchema = z.object({
   ordering: z.number(),
   locked: z.boolean().default(false),
   user_id: z
-    .string().or(z.number())
+    .string()
+    .or(z.number())
     .nullable()
     .transform((v) => (v === "" ? null : v))
     .pipe(z.coerce.number().nullable().default(null))

diff --git a/app/(authenticated)/layout.tsx b/app/(authenticated)/layout.tsx
@@ -5,6 +5,7 @@ import { UserProvider } from "@/components/UserContext";
 import { mustGetCurrentUser } from "@/lib/auth/server";
 import YSTVBreadcrumbs from "@/components/Breadcrumbs";
 import * as Sentry from "@sentry/nextjs";
+import { UserMenu } from "@/components/UserMenu";
 
 export default async function AuthenticatedLayout({
   children,
@@ -30,15 +31,7 @@ export default async function AuthenticatedLayout({
           />
         </Link>
         <div className="ml-auto space-x-1">
-          <Link href="/user/me">
-            <Image
-              src={user.avatar}
-              alt=""
-              width={96}
-              height={96}
-              className="max-h-[4.5rem] w-auto rounded-full py-2"
-            />
-          </Link>
+          <UserMenu userAvatar={user.avatar} />
         </div>
       </nav>
       <div className="mx-2 md:mx-6">

diff --git a/app/(authenticated)/user/[id]/page.tsx b/app/(authenticated)/user/[id]/page.tsx
@@ -40,9 +40,9 @@ export default async function UserPage({ params }: { params: { id: string } }) {
         <input
           disabled
           className="w-96"
-          value={`${
-            process.env.PUBLIC_URL
-          }/iCal/${await Calendar.encodeUserID(user.user_id)}`}
+          value={`${process.env.PUBLIC_URL}/iCal/${await Calendar.encodeUserID(
+            user.user_id,
+          )}`}
         />
       </p>
     </div>

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -33,7 +33,7 @@ export default async function RootLayout({
         <ColorSchemeScript />
       </head>
       <body className={inter.className}>
-        <MantineProvider theme={theme}>
+        <MantineProvider theme={theme} defaultColorScheme="light">
           <ModalsProvider>
             <PublicURLProvider value={process.env.PUBLIC_URL!}>
               <DebugModeProvider value={debugMode}>

diff --git a/components/UserMenu.tsx b/components/UserMenu.tsx
@@ -0,0 +1,72 @@
+"use client";
+
+import Image from "next/image";
+import {
+  Box,
+  Center,
+  Menu,
+  SegmentedControl,
+  useMantineColorScheme,
+  VisuallyHidden,
+} from "@mantine/core";
+import { LuLaptop, LuMoon, LuSun } from "react-icons/lu";
+
+export function UserMenu({ userAvatar }: { userAvatar: string }) {
+  const { setColorScheme, colorScheme } = useMantineColorScheme();
+
+  return (
+    <Menu closeOnItemClick={false}>
+      <Menu.Target>
+        <Image
+          src={userAvatar}
+          alt=""
+          width={96}
+          height={96}
+          className="max-h-[4.5rem] w-auto rounded-full py-2"
+          aria-label="user menu"
+        />
+      </Menu.Target>
+      <Menu.Dropdown className="right-2 -ml-1.5 mr-2 min-w-[150px]">
+        <Menu.Item component="a" href="/user/me">
+          Profile
+        </Menu.Item>
+        <Menu.Divider />
+        <Menu.Label>Theme</Menu.Label>
+        <SegmentedControl
+          value={colorScheme}
+          onChange={setColorScheme}
+          className="min-w-full"
+          data={[
+            {
+              value: "light",
+              label: (
+                <Center>
+                  <LuSun className="scale-150" aria-label="light mode" />
+                  <VisuallyHidden>Light Mode</VisuallyHidden>
+                </Center>
+              ),
+            },
+            {
+              value: "auto",
+              label: (
+                <Center>
+                  <LuLaptop className="scale-150" aria-label="auto mode" />
+                  <VisuallyHidden>Auto Mode</VisuallyHidden>
+                </Center>
+              ),
+            },
+            {
+              value: "dark",
+              label: (
+                <Center>
+                  <LuMoon className="scale-150" aria-label="dark mode" />
+                  <VisuallyHidden>Dark Mode</VisuallyHidden>
+                </Center>
+              ),
+            },
+          ]}
+        />
+      </Menu.Dropdown>
+    </Menu>
+  );
+}
diff --git a/components/YSTVCalendar.css b/components/YSTVCalendar.css
@@ -48,3 +48,28 @@
 .fc-view {
   --fc-today-bg-color: #3788d845;
 }
+
+/* Removes empty week separators on mobile month view */
+tbody[role="presentation"] > br {
+  display: none;
+}
+
+/* Any theming inside this will only apply to dark color scheme. */
+:is([data-mantine-color-scheme="dark"]) {
+  tbody[role="presentation"] > div > tr:not(:first-child) {
+    background-color: var(--mantine-color-body);
+  }
+
+  th.fc-col-header-cell > div,
+  .fc-list-day > th,
+  thead > tr[role="row"]:nth-child(1),
+  .fc-list-day-cushion,
+  .fc-daygrid-body,
+  tbody[role="presentation"] > div > tr:first-child > td {
+    background-color: var(--mantine-color-default) !important;
+  }
+
+  tr.fc-event:hover {
+    background-color: #000 !important;
+  }
+}
diff --git a/components/YSTVCalendar.tsx b/components/YSTVCalendar.tsx
@@ -29,7 +29,7 @@ function getUoYWeekName(date: Date) {
     if (!didLogAcademicYearError) {
       Sentry.captureException(new Error("Failed to load academicYears"), {
         extra: {
-          academicYears
+          academicYears,
         },
       });
       didLogAcademicYearError = true;

diff --git a/features/calendar/crew_positions.ts b/features/calendar/crew_positions.ts
@@ -16,6 +16,6 @@ export function getAllNonCustomCrewPositions(): Promise<CrewPositionType[]> {
     },
     where: {
       is_custom: false,
-    }
+    },
   });
 }
diff --git a/postcss.config.js b/postcss.config.js
@@ -1,5 +1,6 @@
 module.exports = {
   plugins: {
+    "tailwindcss/nesting": {},
     tailwindcss: {},
     autoprefixer: {},
     "postcss-preset-mantine": {},

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -46,4 +46,5 @@ module.exports = {
     require("tailwindcss-animate"),
     mantineVariantsPlugin,
   ],
+  darkMode: ["class", '[data-mantine-color-scheme="dark"]'],
 };