Web 67 dark mode

.yarn/patches/@fullcalendar-daygrid-npm-6.1.8-3f45184389.patch

@@ -1,5 +1,5 @@
 diff --git a/internal.js b/internal.js
-index 26fee0cdcfd1d3da9ce40ae707a9dad54a3cbc99..f7be916bf4e694bb0f5047ee3b571401dc74c028 100644
+index 26fee0cdcfd1d3da9ce40ae707a9dad54a3cbc99..a0f838b36bc0875aa0ddd63e717dcfec382faa8b 100644
 --- a/internal.js
 +++ b/internal.js
 @@ -143,7 +143,6 @@ class TableCell extends DateComponent {
@@ -10,12 +10,8 @@ index 26fee0cdcfd1d3da9ce40ae707a9dad54a3cbc99..f7be916bf4e694bb0f5047ee3b571401
              !renderProps.isDisabled &&
                  (props.showDayNumber || hasCustomDayCellContent(options) || props.forceDayTop) ? (createElement("div", { className: "fc-daygrid-day-top" },
                  createElement(InnerContent, { elTag: "a", elClasses: [
-@@ -433,23 +432,41 @@ class TableRow extends DateComponent {
-         let mirrorSegsByCol = splitSegsByFirstCol(this.getMirrorSegs(), colCnt);
-         let { singleColPlacements, multiColPlacements, moreCnts, moreMarginTops } = computeFgSegPlacement(sortEventSegs(props.fgEventSegs, options.eventOrder), props.dayMaxEvents, props.dayMaxEventRows, options.eventOrderStrict, state.eventInstanceHeights, state.maxContentHeight, props.cells);
-         let isForcedInvisible = // TODO: messy way to compute this
--         (props.eventDrag && props.eventDrag.affectedInstances) ||
-+            (props.eventDrag && props.eventDrag.affectedInstances) ||
+@@ -436,21 +435,37 @@ class TableRow extends DateComponent {
+          (props.eventDrag && props.eventDrag.affectedInstances) ||
              (props.eventResize && props.eventResize.affectedInstances) ||
              {};
 -        return (createElement("tr", { ref: this.rootElRef, role: "row" },
@@ -32,6 +28,7 @@ index 26fee0cdcfd1d3da9ce40ae707a9dad54a3cbc99..f7be916bf4e694bb0f5047ee3b571401
 -                        this.renderFillSegs(businessHoursByCol[col], 'non-business'),
 -                        this.renderFillSegs(bgEventSegsByCol[col], 'bg-event'))), minHeight: props.cellMinHeight }));
 -            })));
+-    }
 +        /////////
 +        // debugger;
 +        let { dateEnv } = context
@@ -40,9 +37,7 @@ index 26fee0cdcfd1d3da9ce40ae707a9dad54a3cbc99..f7be916bf4e694bb0f5047ee3b571401
 +        let num = dateEnv.computeWeekNumber(date) // TODO: somehow use for formatting as well?
 +        let text = dateEnv.format(date, format)
 +        let renderProps = { num, text, date }
-+
 +        /////////
-+
 +        return [createElement(options.dayHeaders ? "tr" : "div", { ref: this.rootElRef, role: options.dayHeaders ? "row" : "rowgroup", style: options.dayHeaders ? undefined : { display: "contents", fontSize: "110%" }},
 +            (props.showWeekNumbers ? [createElement("td", {elClasses: ['fc-daygrid-day'], role: "gridcell", style: {fontWeight: 700, backgroundColor: !options.dayHeaders && "var(--fc-neutral-bg-color)", verticalAlign: options.dayHeaders && "middle", rotate: options.dayHeaders && "180deg", width: options.dayHeaders && "1.6em"}}, createElement("div", {style: {writingMode: options.dayHeaders && "vertical-rl", margin: options.dayHeaders ? ".6rem .1rem" : ".6rem", height: options.dayHeaders && "max-content"}}, options.weekNumberContent(renderProps)))] : []).concat(
 +                props.cells.map((cell, col) => {
@@ -63,24 +58,8 @@ index 26fee0cdcfd1d3da9ce40ae707a9dad54a3cbc99..f7be916bf4e694bb0f5047ee3b571401
 +            }, []).map((row, index) => {
 +                return options.dayHeaders ? row : createElement("tr", { key: index, role: "row" }, row);
 +            })
-+        ), !options.dayHeaders && createElement("br")];
-     }
++        ), !options.dayHeaders && createElement("div", {elClasses: ["fc-daygrid-ystv-spacer"]})];
++     }
      componentDidMount() {
          this.updateSizing(true);
-@@ -901,11 +918,11 @@ class TableView extends DateComponent {
-                 key: 'header',
-                 isSticky: stickyHeaderDates,
-                 chunks: [{
--                        key: 'main',
--                        elRef: this.headerElRef,
--                        tableClassName: 'fc-col-header',
--                        rowContent: headerRowContent,
--                    }],
-+                    key: 'main',
-+                    elRef: this.headerElRef,
-+                    tableClassName: 'fc-col-header',
-+                    rowContent: headerRowContent,
-+                }],
-             });
-         }
-         sections.push({
+         this.context.addResizeHandler(this.handleResize);

app/(authenticated)/calendar/[eventID]/SignupSheet.tsx

@@ -80,15 +80,15 @@ function SignupSheet({
         )}
         <table className="mt-4 border-collapse">
           <tbody
-            className={"divide-x-0 divide-y-2 divide-dashed divide-gray-200"}
+            className={"divide-x-0 divide-y-2 divide-dashed divide-gray-200 dark:divide-[--mantine-color-placeholder]"}
           >
             {sheet.crews
               .sort((a, b) => a.ordering - b.ordering)
               .map((crew, index) => (
                 <tr
                   key={crew.crew_id}
                   className={
-                    "divide-x-2 divide-y-0 divide-dashed divide-gray-200 text-sm font-semibold"
+                    "divide-x-2 divide-y-0 divide-dashed divide-gray-200 dark:divide-[--mantine-color-placeholder] text-sm font-semibold"
                   }
                 >
                   <td className="px-3">
@@ -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

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 />}
         >

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))

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,
@@ -29,16 +30,8 @@ export default async function AuthenticatedLayout({
             className="max-h-[4.5rem] w-auto py-2"
           />
         </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>
+        <div className="ml-auto space-x-1 h-14 w-14">
+          <UserMenu userAvatar={user.avatar} />
         </div>
       </nav>
       <div className="mx-2 md:mx-6">

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>

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}>

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={56}
+          height={56}
+          className="transition-all duration-50 max-h-14 max-w-14 rounded-[28px] hover:rounded-xl cursor-pointer border-solid border-0 hover:border-2 hover:border-slate-200"
+          aria-label="user menu"
+        />
+      </Menu.Target>
+      <Menu.Dropdown className="right-2 -ml-1.5 mt-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>
+  );
+}

components/YSTVCalendar.css

@@ -48,3 +48,37 @@
 .fc-view {
   --fc-today-bg-color: #3788d845;
 }
+
+.fc-daygrid-day-events-mobile-shrink.fc-dayGridMonth-view div[elClasses="fc-daygrid-ystv-spacer"] {
+  height: 3rem;
+}
+
+.fc-daygrid-day-events-mobile-shrink.fc-daygrid .fc-scrollgrid,
+.fc-daygrid-day-events-mobile-shrink.fc-daygrid td[role="presentation"] {
+  border: 0;
+}
+
+.fc-daygrid-day-events-mobile-shrink.fc-daygrid .fc-scrollgrid table {
+  border-style: inherit;
+}
+
+  /* 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),
+  .fc-dayGridMonth-view div[elClasses="fc-daygrid-ystv-spacer"] {
+    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;
+  }
+}

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;

features/calendar/crew_positions.ts

@@ -16,6 +16,6 @@ export function getAllNonCustomCrewPositions(): Promise<CrewPositionType[]> {
     },
     where: {
       is_custom: false,
-    }
+    },
   });
 }

postcss.config.js

@@ -1,5 +1,6 @@
 module.exports = {
   plugins: {
+    "tailwindcss/nesting": {},
     tailwindcss: {},
     autoprefixer: {},
     "postcss-preset-mantine": {},

tailwind.config.js

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

yarn.lock

@@ -2407,10 +2407,10 @@ __metadata:
 
 "@fullcalendar/daygrid@patch:@fullcalendar/daygrid@npm%3A6.1.8#./.yarn/patches/@fullcalendar-daygrid-npm-6.1.8-3f45184389.patch::locator=hypothetical-new-internal-site%40workspace%3A.":
   version: 6.1.8
-  resolution: "@fullcalendar/daygrid@patch:@fullcalendar/daygrid@npm%3A6.1.8#./.yarn/patches/@fullcalendar-daygrid-npm-6.1.8-3f45184389.patch::version=6.1.8&hash=eeec5d&locator=hypothetical-new-internal-site%40workspace%3A."
+  resolution: "@fullcalendar/daygrid@patch:@fullcalendar/daygrid@npm%3A6.1.8#./.yarn/patches/@fullcalendar-daygrid-npm-6.1.8-3f45184389.patch::version=6.1.8&hash=a8e1ec&locator=hypothetical-new-internal-site%40workspace%3A."
   peerDependencies:
     "@fullcalendar/core": ~6.1.8
-  checksum: 9b70e76b0ec96ef66daf3a6af1add86bf08ecc63fd70c4a2749af56aeb34539e325b5d48f8c3e3a3b737b571247ba252206ef1b364339290ebb6bd800ac4520e
+  checksum: cf8f4bc0046276b6eeff1567e1c5d95d89c13550211db85cab30284ca8c4e71c8eaeb62e8376708be724257ca62b71ba72c31522d7c4a10fece099abd5ddc0ce
   languageName: node
   linkType: hard