added dark mode 🌙

package.json

@@ -25,6 +25,7 @@
     "mapbox-gl": "3.2.0",
     "next": "14.1.3",
     "next-auth": "4.24.7",
+    "next-themes": "0.3.0",
     "postcss": "8.4.36",
     "prop-types": "15.8.1",
     "rc-slider": "10.5.0",

src/app/(home)/HomepageBanner.tsx

@@ -1,32 +1,52 @@
 'use client';
 
-import React from 'react';
+import React, { useMemo } from 'react';
 import Image from 'next/image';
 import { Parallax, ParallaxProvider } from 'react-scroll-parallax';
+import classNames from 'classnames';
+import { useTheme } from 'next-themes';
 
-export const HomepageBanner = () => (
-    <ParallaxProvider>
-        <div className="relative h-screen overflow-hidden">
-            <Parallax speed={-30}>
-                <div className="h-screen">
-                    <Image
-                        className="-z-10 object-cover"
-                        src="/img/homepage-bg.jpg"
-                        alt="Homepage banner background"
-                        fill
-                    />
+export const HomepageBanner = () => {
+    const { resolvedTheme } = useTheme();
+
+    const src = useMemo(() => {
+        switch (resolvedTheme) {
+            case 'light': return '/img/homepage-bg.jpg';
+            case 'dark': return '/img/homepage-bg-dark.jpg';
+            // Empty image for hydration step
+            default: return 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';
+        }
+    }, [resolvedTheme]);
+
+    return (
+        <ParallaxProvider>
+            <div className="relative h-screen overflow-hidden">
+                <Parallax speed={-50}>
+                    <div className="relative h-screen">
+                        <Image
+                            className="-z-10 object-cover"
+                            src={src}
+                            alt="Homepage banner background"
+                            fill
+                        />
+                    </div>
+                </Parallax>
+                <div
+                    className={classNames(
+                        'absolute top-0 flex h-screen w-screen flex-col items-center justify-center backdrop-blur-sm',
+                        'mix-blend-overlay dark:mix-blend-normal',
+                    )}
+                >
+                    <h2 className="mb-5 text-3xl font-medium text-white">
+                        From longhorns to space ships, we've got it all!
+                    </h2>
+                    <h1 className="text-center text-8xl font-semibold text-white">
+                        Welcome to
+                        <br />
+                        Houston
+                    </h1>
                 </div>
-            </Parallax>
-            <div className="absolute top-0 flex h-screen w-screen flex-col items-center justify-center mix-blend-overlay backdrop-blur-sm">
-                <h2 className="mb-5 text-3xl font-medium text-white">
-                    From longhorns to space ships, we've got it all!
-                </h2>
-                <h1 className="text-center text-8xl font-semibold text-white">
-                    Welcome to
-                    <br />
-                    Houston
-                </h1>
             </div>
-        </div>
-    </ParallaxProvider>
-);
+        </ParallaxProvider>
+    );
+};

src/app/admin/announcements/AnnouncementsTable.tsx

@@ -3,7 +3,7 @@
 import React, { useState } from 'react';
 import DataTable from 'react-data-table-component';
 import { format } from 'date-fns-tz';
-import { LuEye, LuX } from 'react-icons/lu';
+import { LuX } from 'react-icons/lu';
 import { AnnouncementModal } from '@/components/AnnouncementModal';
 import { ClientPortal } from '@/components/ClientPortal';
 import { dataTableStyle } from '@/utils/dataTableStyle';
@@ -27,6 +27,11 @@ export const AnnouncementsTable: React.FC<AnnouncementsTableProps> = ({ data })
                 pagination
                 paginationPerPage={10}
                 paginationRowsPerPageOptions={[10, 15, 20, 25]}
+                pointerOnHover
+                onRowClicked={(row) => {
+                    setCurrentAnnouncement(row);
+                    setShowAnnouncement(true);
+                }}
                 customStyles={dataTableStyle}
                 columns={[
                     {
@@ -39,23 +44,6 @@ export const AnnouncementsTable: React.FC<AnnouncementsTableProps> = ({ data })
                         format: (row) => format(new Date(row.posted), 'MMM d, y @ HH:mm zzz'),
                         maxWidth: '300px',
                     },
-                    {
-                        name: 'View',
-                        button: true,
-                        cell: (row) => (
-                            <button
-                                type="button"
-                                onClick={() => {
-                                    setCurrentAnnouncement(row);
-                                    setShowAnnouncement(true);
-                                }}
-                                aria-label="View Announcement"
-                            >
-                                <LuEye size={20} className="text-gray-900" />
-                            </button>
-                        ),
-                        width: '60px',
-                    },
                     {
                         name: 'Delete',
                         button: true,
@@ -68,10 +56,10 @@ export const AnnouncementsTable: React.FC<AnnouncementsTableProps> = ({ data })
                                 }}
                                 aria-label="Delete Announcement"
                             >
-                                <LuX size={20} className="text-gray-900" />
+                                <LuX size={20} />
                             </button>
                         ),
-                        width: '60px',
+                        width: '65px',
                     },
                 ]}
             />

src/app/admin/announcements/DeleteAnnouncementModal.tsx

@@ -44,7 +44,7 @@ export const DeleteAnnouncementModal: React.FC<DeleteAnnouncementModalProps> = (
             </p>
 
             <div className="flex justify-end gap-3">
-                <Button className="bg-slate-300 shadow-slate-300/25" onClick={close}>
+                <Button color="gray-300" onClick={close}>
                     Cancel
                 </Button>
                 <Button type="submit" onClick={cancelSession} disabled={isSubmitting}>

src/app/admin/announcements/NewAnnouncementModal.tsx

@@ -72,7 +72,7 @@ export const NewAnnouncementModal: React.FC<ModalProps> = ({ show, close }) => {
                 </div>
 
                 <div className="flex justify-end gap-3">
-                    <Button className="bg-slate-300 shadow-slate-300/25" onClick={close}>
+                    <Button color="gray-300" onClick={close}>
                         Close
                     </Button>
                     <Button type="submit" disabled={isSubmitting}>

src/app/admin/audit/LogEntryTable.tsx

@@ -1,13 +1,12 @@
 import React from 'react';
 import DataTable from 'react-data-table-component';
 import { format } from 'date-fns-tz';
-import classNames from 'classnames';
 import { CgSpinner } from 'react-icons/cg';
-import { Badge } from '@/components/Badge';
+import { Badge, type BadgeColor } from '@/components/Badge';
 import { dataTableStyle } from '@/utils/dataTableStyle';
 import { type LogEntry, LogEntryAction } from '@/types/admin';
 
-const LOG_ACTION_COLORS = ['!bg-green-400', '!bg-sky-500', '!bg-red-400'];
+const LOG_ACTION_COLORS: BadgeColor[] = ['green-500', 'sky-500', 'red-400'];
 
 const LOG_ACTION_TEXT = ['created', 'updated', 'deleted'];
 
@@ -19,7 +18,7 @@ const ExpandedLogEntryRow: React.FC<ExpandedLogEntryRowProps> = ({ data }) => (
     <div className="py-5 pl-16">
         <table className="w-full table-fixed">
             <thead>
-                <tr className="border-b-2">
+                <tr className="border-b-2 border-b-gray-200 dark:border-b-zinc-600">
                     <th align="right" className="w-44 px-2 py-1">Field</th>
                     {data.action !== LogEntryAction.Create && (
                         <th align="left" className="px-2 py-1">Previous Value</th>
@@ -31,17 +30,20 @@ const ExpandedLogEntryRow: React.FC<ExpandedLogEntryRowProps> = ({ data }) => (
             </thead>
             <tbody>
                 {Object.entries(data.changes).map(([field, change]) => (
-                    <tr key={field} className="odd:bg-white">
-                        <td align="right" className="px-2 py-1">
+                    <tr
+                        key={field}
+                        className="border-b border-b-gray-200 last:border-b-0 odd:bg-gray-200/25 dark:border-b-zinc-700 dark:odd:bg-zinc-600/25"
+                    >
+                        <td align="right" className="py-1 pr-2">
                             <code className="text-sm">{field}</code>
                         </td>
                         {data.action !== LogEntryAction.Create && (
-                            <td align="left" className="px-2 py-1">
+                            <td align="left" className="py-1 pl-2">
                                 <code className="break-words text-sm">{change[0]}</code>
                             </td>
                         )}
                         {data.action !== LogEntryAction.Delete && (
-                            <td align="left" className="px-2 py-1">
+                            <td align="left" className="py-1 pl-2">
                                 <code className="break-words text-sm">{change[1]}</code>
                             </td>
                         )}
@@ -67,7 +69,7 @@ export const LogEntryTable: React.FC<LogEntryTableProps> = ({ loading, data, tot
         progressPending={loading}
         progressComponent={(
             <div className="flex justify-center">
-                <CgSpinner className="animate-spin text-darkblue" size={50} />
+                <CgSpinner className="animate-spin text-sky-500" size={50} />
             </div>
         )}
         pagination
@@ -89,7 +91,7 @@ export const LogEntryTable: React.FC<LogEntryTableProps> = ({ loading, data, tot
                     <p>
                         {row.content_type} <b>{row.object_id} &mdash; {row.object_repr}</b> was
                         {' '}
-                        <Badge small className={classNames('!inline max-w-fit', LOG_ACTION_COLORS[row.action])}>
+                        <Badge small color={LOG_ACTION_COLORS[row.action]} className="!inline max-w-fit">
                             {LOG_ACTION_TEXT[row.action]}
                         </Badge>
                         {' '}

src/app/admin/loa/CancelLoaModal.tsx

@@ -49,7 +49,7 @@ export const CancelLoaModal: React.FC<CancelLoaModalProps> = ({ loa, show, close
             </p>
 
             <div className="flex justify-end gap-3">
-                <Button className="bg-slate-300 shadow-slate-300/25" onClick={close}>
+                <Button color="gray-300" onClick={close}>
                     Cancel
                 </Button>
                 <Button type="submit" onClick={cancelSession} disabled={isSubmitting}>

src/app/admin/loa/LoaTable.tsx

@@ -29,7 +29,7 @@ export const LoaTable: React.FC<PendingRequestsTableProps> = ({ data }) => {
                 columns={[
                     {
                         cell: (loa) => <ProfilePicture user={loa.user} size={30} />,
-                        width: '40px',
+                        width: '45px',
                         compact: true,
                         right: true,
                     },

src/app/admin/purge/PurgeModal.tsx

@@ -75,7 +75,7 @@ export const PurgeModal: React.FC<PurgeModalProps> = ({ users, show, close }) =>
                 />
 
                 <div className="flex justify-end gap-3">
-                    <Button className="bg-slate-300 shadow-slate-300/25" onClick={close}>
+                    <Button color="gray-300" onClick={close}>
                         Cancel
                     </Button>
                     <Button type="submit" disabled={isSubmitting}>

src/app/admin/purge/PurgeTable.tsx

@@ -57,7 +57,8 @@ export const PurgeView: React.FC<PurgeViewProps> = ({ data }) => {
                             Only Show Selected
                         </Button>
                         <Button
-                            className="!bg-red-400 !text-sm !shadow-red-400/25"
+                            color="red-400"
+                            className="text-sm"
                             onClick={() => setShowPurgeModal(true)}
                         >
                             <LuUserX size={17} />
@@ -69,7 +70,7 @@ export const PurgeView: React.FC<PurgeViewProps> = ({ data }) => {
                 columns={[
                     {
                         cell: (user) => <ProfilePicture user={user} size={30} />,
-                        width: '30px',
+                        width: '45px',
                         compact: true,
                         right: true,
                     },

src/app/admin/queue/ApproveRequestModal.tsx

@@ -44,10 +44,10 @@ export const ApproveRequestModal: React.FC<AcceptRequestModalProps> = ({ title,
             <p className="mb-5">{confirmation}</p>
 
             <div className="flex justify-end gap-3">
-                <Button className="bg-slate-300 shadow-slate-300/25" onClick={close}>
+                <Button color="gray-300" onClick={close}>
                     Cancel
                 </Button>
-                <Button className="!bg-green-500 !shadow-green-500/25" onClick={putRequest} disabled={isSubmitting}>
+                <Button color="green-500" onClick={putRequest} disabled={isSubmitting}>
                     Approve
                 </Button>
             </div>

src/app/admin/queue/RejectRequestModal.tsx

@@ -64,10 +64,10 @@ export const RejectRequestModal: React.FC<RejectRequestModalProps> = ({ title, c
                 />
 
                 <div className="flex justify-end gap-3">
-                    <Button className="bg-slate-300 shadow-slate-300/25" onClick={close}>
+                    <Button color="gray-300" onClick={close}>
                         Cancel
                     </Button>
-                    <Button className="!bg-red-400 !shadow-red-400/25" type="submit" disabled={isSubmitting}>
+                    <Button color="red-400" type="submit" disabled={isSubmitting}>
                         Reject
                     </Button>
                 </div>

src/app/admin/scores/UserSelectInput.tsx

@@ -37,7 +37,7 @@ export const UserSelectInput: React.FC<UserSelectInputProps> = ({ options }) =>
             />
             {loading && (
                 <div className="mt-10 flex justify-center">
-                    <CgSpinner className="animate-spin text-darkblue" size={50} />
+                    <CgSpinner className="animate-spin text-sky-500" size={50} />
                 </div>
             )}
         </>

src/app/dashboard/loa/CancelLoaModal.tsx

@@ -49,7 +49,7 @@ export const CancelLoaModal: React.FC<CancelLoaModalProps> = ({ loa, show, close
             </p>
 
             <div className="flex justify-end gap-3">
-                <Button className="bg-slate-300 shadow-slate-300/25" onClick={close}>
+                <Button color="gray-300" onClick={close}>
                     Cancel
                 </Button>
                 <Button type="submit" onClick={cancelSession} disabled={isSubmitting}>

src/app/dashboard/loa/RequestLoaModal.tsx

@@ -84,7 +84,7 @@ export const RequestLoaModal: React.FC<RequestLOAModalProps> = ({ start, end, sh
                 />
 
                 <div className="flex justify-end gap-3">
-                    <Button className="bg-slate-300 shadow-slate-300/25" onClick={close}>
+                    <Button color="gray-300" onClick={close}>
                         Cancel
                     </Button>
                     <Button type="submit" disabled={isSubmitting}>

src/app/events/AddPositionsModal.tsx

@@ -1,7 +1,6 @@
 import React, { useCallback, useEffect } from 'react';
 import { useRouter } from 'next/navigation';
 import { zodResolver } from '@hookform/resolvers/zod';
-import classNames from 'classnames';
 import { type SubmitHandler, useFieldArray, useForm } from 'react-hook-form';
 import { LuMinusCircle, LuPlus } from 'react-icons/lu';
 import { Button } from '@/components/Button';
@@ -75,10 +74,8 @@ export const AddPositionsModal: React.FC<AddPositionsModalProps> = ({ addPositio
                     {fields.map((item, i) => (
                         <div key={item.id} className="grid grid-cols-11 items-start gap-3">
                             <Button
-                                className={classNames('mt-2.5', {
-                                    '!text-gray-400': fields.length < 2,
-                                    '!text-red-500': fields.length >= 2,
-                                })}
+                                color={fields.length < 2 ? 'gray-300' : 'red-400'}
+                                className="mt-2.5"
                                 variant="tertiary"
                                 onClick={() => remove(i)}
                                 disabled={fields.length < 2}
@@ -109,7 +106,7 @@ export const AddPositionsModal: React.FC<AddPositionsModalProps> = ({ addPositio
                     Add Another Position
                 </Button>
                 <div className="flex justify-end gap-3">
-                    <Button className="bg-slate-300 shadow-slate-300/25" onClick={close}>
+                    <Button color="gray-300" onClick={close}>
                         Close
                     </Button>
                     <Button type="submit" disabled={isSubmitting}>

src/app/events/[id]/EventPositions.tsx

@@ -21,8 +21,8 @@ const EventShiftInfo: React.FC<EventShiftInfoProps> = async ({ index, preventSig
         <Popover
             className={classNames(
                 'grow basis-0 min-w-0 px-1.5',
-                'border-r-2 border-neutral-100 first:rounded-l-md last:rounded-r-md last:border-r-0',
-                { 'bg-green-400': shift.user, 'bg-gray-200': !shift.user },
+                'border-r-2 border-neutral-100 first:rounded-l-md last:rounded-r-md last:border-r-0 dark:border-zinc-850',
+                { 'bg-green-500': shift.user, 'bg-gray-200 dark:bg-zinc-700': !shift.user },
             )}
             title={(
                 <span className="whitespace-nowrap">

src/app/events/[id]/edit/DeleteEventModal.tsx

@@ -41,10 +41,10 @@ export const DeleteEventModal: React.FC<DeleteEventModalProps> = ({ event, show,
             <p className="mb-3">Are you sure you would like to delete <b>{event.name}</b>?</p>
 
             <div className="flex justify-end gap-3">
-                <Button className="bg-slate-300 shadow-slate-300/25" onClick={close}>
+                <Button color="gray-300" onClick={close}>
                     Cancel
                 </Button>
-                <Button className="!bg-red-400 !shadow-red-400/25" type="submit" onClick={deleteEvent} disabled={isSubmitting}>
+                <Button color="red-400" type="submit" onClick={deleteEvent} disabled={isSubmitting}>
                     Delete
                 </Button>
             </div>

src/app/events/[id]/edit/EditEventForm.tsx

@@ -125,13 +125,13 @@ export const EditEventForm: React.FC<EditEventFormProps> = ({ event }) => {
 
             <div className="flex gap-3">
                 <Link href={`/events/${event.id}`}>
-                    <Button className="bg-slate-300 shadow-slate-300/25">Return to Event</Button>
+                    <Button color="gray-300">Return to Event</Button>
                 </Link>
                 <Button type="submit" disabled={isSubmitting}>
                     Save
                 </Button>
                 <DeleteEventButton event={event} />
-                <Button className="ml-auto !bg-indigo-400 !shadow-indigo-400/25" onClick={putRequest}>
+                <Button color="indigo-400" className="ml-auto" onClick={putRequest}>
                     <FaDiscord />
                     Post Event Positions
                 </Button>