Completed Dark Mode Visual

frontend/src/app/create/page.tsx

@@ -15,9 +15,9 @@ export default function Page({ searchParams }: Props) {
   return (
     <div
       className="min-h-screen bg-cover bg-fixed bg-bottom bg-no-repeat"
-      style={{
-        backgroundImage: `url(${background.src})`,
-      }}
+      // style={{
+      //   backgroundImage: `url(${background.src})`,
+      // }}
     >
       <Navbar />
       <main className="flex flex-col gap-8 px-4 pb-4 pt-8 xl:px-24">

frontend/src/app/not-found.tsx

@@ -6,7 +6,7 @@ import Link from "next/link";
 
 export default function NotFound() {
   return (
-    <div className="flex h-screen w-full flex-col items-center justify-center gap-10 text-center">
+    <div className="flex h-screen w-full flex-col items-center justify-center gap-10 text-center font-bold">
       <h1 className="block text-[4rem]">404 Page Not Found</h1>
 
       <Link href="/">

frontend/src/app/page.tsx

@@ -54,7 +54,7 @@ export default function Home() {
               </div>
               {/* Ready and Start Now Button */}
               <div className="flex w-full min-w-[350px] max-w-lg -translate-y-0 items-center justify-center text-xl font-bold md:-translate-y-5 xl:-translate-y-3 xl:text-2xl 2xl:text-3xl">
-                <p className="-mr-8 w-1/2 cursor-default rounded-l-full bg-[#F8E6EA] bg-dusty-pink px-6 py-4 text-left text-neutral-600/40 sm:py-5">
+                <p className="-mr-8 w-1/2 cursor-default rounded-l-full bg-[#F8E6EA] bg-dusty-pink px-6 py-4 text-left text-neutral-600/40 dark:bg-[#969696] dark:text-white sm:py-5">
                   Ready?
                 </p>
                 <Link

frontend/src/app/plans/[id]/page.tsx

@@ -16,9 +16,9 @@ export default function SchedulePage({ params }: Props) {
   return (
     <div
       className="relative -mb-[3.625rem] -mt-[3.625rem] min-h-screen bg-cover bg-fixed bg-bottom bg-no-repeat pt-2"
-      style={{
-        backgroundImage: `url(${background.src})`,
-      }}
+      // style={{
+      //   backgroundImage: `url(${background.src})`,
+      // }}
     >
       {/* Schedule display container */}
       <div className="flex flex-grow flex-row overflow-y-auto pt-32">

frontend/src/app/plans/page.tsx

@@ -41,7 +41,7 @@ export default function MyPlans() {
   };
 
   return (
-    <div className="min-h-screen bg-barely-pink">
+    <div className="min-h-screen">
       <Navbar />
 
       <div className="z-1 mb-0 ml-[10%] mr-auto mt-20 flex h-[8vh] w-[25%] overflow-y-auto rounded-t-lg border-l-2 border-r-2 border-t-2 border-black bg-red-700">
@@ -52,7 +52,7 @@ export default function MyPlans() {
 
       {savedPlans.length === 0 && (
         // if savedPlans array is empty: direct user to the schedule builder
-        <div className="z-1 mb-10 ml-auto mr-auto mt-0 flex h-[85vh] w-4/5 flex-col flex-nowrap items-center overflow-y-auto rounded-xl rounded-tl-none border-2 border-black bg-white">
+        <div className="z-1 mb-10 ml-auto mr-auto mt-0 flex h-[85vh] w-4/5 flex-col flex-nowrap items-center overflow-y-auto rounded-xl rounded-tl-none border-2 border-black bg-white dark:bg-dm-mid-gray">
           <div className="m-auto flex flex-col items-center justify-center">
             <h1 className="text-3xl font-bold">
               You don&apos;t have any saved plans yet.{" "}
@@ -66,29 +66,33 @@ export default function MyPlans() {
         </div>
       )}
 
-      <div className="z-1 mb-10 ml-auto mr-auto mt-0 flex h-[85vh] w-4/5 flex-col flex-nowrap items-center gap-6 overflow-y-auto rounded-xl rounded-tl-none border-2 border-black bg-white py-10">
-        {savedPlans
-          .toSorted((a, b) => (a.pinned !== b.pinned ? (a.pinned ? -1 : 1) : 0))
-          .map((plan) => (
-            <motion.div
-              layout
-              key={plan.id}
-              transition={{
-                type: "spring",
-                damping: 20,
-                stiffness: 120,
-                duration: 100,
-              }}
-              className="relative"
-            >
-              <SavedPlan
-                plan={plan}
-                onPin={() => pinPlan(plan.id)}
-                onDelete={() => confirmDeletePlan(plan.title)}
-              />
-            </motion.div>
-          ))}
-      </div>
+      {savedPlans.length !== 0 && (
+        <div className="z-1 mb-10 ml-auto mr-auto mt-0 flex h-[85vh] w-4/5 flex-col flex-nowrap items-center gap-6 overflow-y-auto rounded-xl rounded-tl-none border-2 border-black bg-white py-10 dark:bg-dm-mid-gray">
+          {savedPlans
+            .toSorted((a, b) =>
+              a.pinned !== b.pinned ? (a.pinned ? -1 : 1) : 0,
+            )
+            .map((plan) => (
+              <motion.div
+                layout
+                key={plan.id}
+                transition={{
+                  type: "spring",
+                  damping: 20,
+                  stiffness: 120,
+                  duration: 100,
+                }}
+                className="relative"
+              >
+                <SavedPlan
+                  plan={plan}
+                  onPin={() => pinPlan(plan.id)}
+                  onDelete={() => confirmDeletePlan(plan.title)}
+                />
+              </motion.div>
+            ))}
+        </div>
+      )}
 
       {planToDelete && (
         <DeletePlan

frontend/src/components/Filters.tsx

@@ -69,7 +69,7 @@ export default function Filters() {
   const [maxCreditHours, setMaxCreditHours] = useState<number>(18);
 
   return (
-    <section className="flex flex-col gap-6 border-4 border-dusty-pink bg-barely-pink px-4 py-6 sm:gap-9 sm:px-8 sm:py-9">
+    <section className="flex flex-col gap-6 border-4 border-dusty-pink bg-white px-4 py-6 dark:border-dm-light-gray dark:bg-[#525252] sm:gap-9 sm:px-8 sm:py-9">
       <h1 className="w-full text-center text-xl font-bold sm:text-2xl lg:text-left">
         Filters
       </h1>
@@ -104,9 +104,9 @@ export default function Filters() {
         </label>
 
         <div className="contents grid-cols-subgrid items-center lg:col-span-2 lg:grid">
-          <label className="col-span-full flex items-center justify-center gap-4 border-b-2 border-pebble-gray/40 pb-4 text-neutral-700 hover:text-black sm:pb-6 lg:col-start-2 lg:justify-start lg:border-none lg:pb-0">
+          <label className="col-span-full flex items-center justify-center gap-4 border-b-2 border-pebble-gray/40 pb-4 text-neutral-700 hover:text-black dark:text-neutral-300 dark:hover:text-white sm:pb-6 lg:col-start-2 lg:justify-start lg:border-none lg:pb-0">
             <input
-              className="form-checkbox size-6 rounded-md border-2 border-limestone text-bulldog-red hover:border-pebble-gray focus:ring-bulldog-red"
+              className="form-checkbox size-6 rounded-md border-2 border-limestone text-bulldog-red dark:form-checkbox hover:border-pebble-gray focus:ring-bulldog-red dark:size-6 dark:rounded-md dark:border-2 dark:border-[#a9999c] dark:bg-[#c7c7c7] dark:text-bulldog-red dark:hover:border-white dark:focus:ring-bulldog-red"
               name="walking"
               type="checkbox"
             />
@@ -140,9 +140,9 @@ export default function Filters() {
         </label>
 
         <div className="contents grid-cols-subgrid items-center lg:col-span-2 lg:grid">
-          <label className="col-span-full flex items-center justify-center gap-4 border-b-2 border-pebble-gray/40 pb-4 text-neutral-700 hover:text-black sm:pb-6 lg:col-start-2 lg:justify-start lg:border-none lg:pb-0">
+          <label className="col-span-full flex items-center justify-center gap-4 border-b-2 border-pebble-gray/40 pb-4 text-neutral-700 hover:text-black dark:text-neutral-300 dark:hover:text-white sm:pb-6 lg:col-start-2 lg:justify-start lg:border-none lg:pb-0">
             <input
-              className="form-checkbox size-6 rounded-md border-2 border-limestone text-bulldog-red hover:border-pebble-gray focus:ring-bulldog-red"
+              className="form-checkbox size-6 rounded-md border-2 border-limestone text-bulldog-red dark:form-checkbox hover:border-pebble-gray focus:ring-bulldog-red dark:size-6 dark:rounded-md dark:border-2 dark:border-[#a9999c] dark:bg-[#c7c7c7] dark:text-bulldog-red dark:hover:border-white dark:focus:ring-bulldog-red"
               name="showFilledClasses"
               type="checkbox"
             />
@@ -155,7 +155,7 @@ export default function Filters() {
         <label className="col-span-2 grid grid-cols-subgrid items-center">
           <span className="pl-3 text-right font-bold">Min Credit Hours</span>
           <input
-            className="flex w-full items-center gap-6 rounded-md border-2 border-limestone bg-white px-3 py-1.5 transition-[box-shadow,border-color] disabled:cursor-not-allowed disabled:opacity-60 [&:not(:disabled):hover]:border-pebble-gray [&:not(:disabled):hover]:shadow-sm"
+            className="flex w-full items-center gap-6 rounded-md border-2 border-limestone bg-white px-3 py-1.5 transition-[box-shadow,border-color] disabled:cursor-not-allowed disabled:opacity-60 dark:border-[#a9999c] dark:bg-[#c7c7c7] dark:text-[#525252] [&:not(:disabled):hover]:border-pebble-gray [&:not(:disabled):hover]:shadow-sm dark:[&:not(:disabled):hover]:border-white dark:[&:not(:disabled):hover]:shadow-sm"
             min={1}
             max={maxCreditHours - 1}
             name="minCreditHours"
@@ -169,7 +169,7 @@ export default function Filters() {
         <label className="col-span-2 grid grid-cols-subgrid items-center">
           <span className="pl-3 text-right font-bold">Max Credit Hours</span>
           <input
-            className="flex w-full items-center gap-6 rounded-md border-2 border-limestone bg-white px-3 py-1.5 transition-[box-shadow,border-color] disabled:cursor-not-allowed disabled:opacity-60 [&:not(:disabled):hover]:border-pebble-gray [&:not(:disabled):hover]:shadow-sm"
+            className="flex w-full items-center gap-6 rounded-md border-2 border-limestone bg-white px-3 py-1.5 transition-[box-shadow,border-color] disabled:cursor-not-allowed disabled:opacity-60 dark:border-[#a9999c] dark:bg-[#c7c7c7] dark:text-[#525252] [&:not(:disabled):hover]:border-pebble-gray [&:not(:disabled):hover]:shadow-sm dark:[&:not(:disabled):hover]:border-white dark:[&:not(:disabled):hover]:shadow-sm"
             min={minCreditHours + 1}
             max={18}
             name="maxCreditHours"

frontend/src/components/courses/AddCourses.tsx

@@ -136,28 +136,28 @@ export function AddCourses({ onAddCourse, searchParams }: Props) {
         <Link
           href={subjectView.href}
           data-active={state.view === "subject"}
-          className="w-1/3 rounded-bl-none rounded-br-none rounded-tl-lg rounded-tr-lg bg-dusty-pink px-4 py-2 text-left font-bold capitalize text-[#CFBEBE] duration-150 data-[active=true]:bg-bulldog-red data-[active=true]:text-white"
+          className="w-1/3 rounded-bl-none rounded-br-none rounded-tl-lg rounded-tr-lg bg-dusty-pink px-4 py-2 text-left font-bold capitalize text-[#CFBEBE] duration-150 data-[active=true]:bg-bulldog-red data-[active=true]:text-white dark:bg-[#bbbbbb] dark:text-neutral-600 dark:data-[active=true]:bg-bulldog-red dark:data-[active=true]:text-white"
         >
           By Subject
         </Link>
         <Link
           href={instructorView.href}
           data-active={state.view === "instructor"}
-          className="w-1/3 rounded-bl-none rounded-br-none rounded-tl-lg rounded-tr-lg bg-dusty-pink px-4 py-2 text-left font-bold capitalize text-[#CFBEBE] duration-150 data-[active=true]:bg-bulldog-red data-[active=true]:text-white"
+          className="w-1/3 rounded-bl-none rounded-br-none rounded-tl-lg rounded-tr-lg bg-dusty-pink px-4 py-2 text-left font-bold capitalize text-[#CFBEBE] duration-150 data-[active=true]:bg-bulldog-red data-[active=true]:text-white dark:bg-[#bbbbbb] dark:text-neutral-600 dark:data-[active=true]:bg-bulldog-red dark:data-[active=true]:text-white"
         >
           By Instructor
         </Link>
         <Link
           href={crnView.href}
           data-active={state.view === "crn"}
-          className="w-1/3 rounded-bl-none rounded-br-none rounded-tl-lg rounded-tr-lg bg-dusty-pink px-4 py-2 text-left font-bold capitalize text-[#CFBEBE] duration-150 data-[active=true]:bg-bulldog-red data-[active=true]:text-white"
+          className="w-1/3 rounded-bl-none rounded-br-none rounded-tl-lg rounded-tr-lg bg-dusty-pink px-4 py-2 text-left font-bold capitalize text-[#CFBEBE] duration-150 data-[active=true]:bg-bulldog-red data-[active=true]:text-white dark:bg-[#bbbbbb] dark:text-neutral-600 dark:data-[active=true]:bg-bulldog-red dark:data-[active=true]:text-white"
         >
           By CRN
         </Link>
       </nav>
 
       <form
-        className="flex flex-col gap-16 border-4 border-dusty-pink bg-barely-pink px-8 py-10"
+        className="flex flex-col gap-16 border-4 border-t-0 border-dusty-pink bg-white px-8 py-10 dark:border-dm-light-gray dark:bg-[#535353]"
         onSubmit={handleSubmit}
       >
         {state.view === "subject" && <SearchBySubject {...subjectView} />}

frontend/src/components/courses/CourseDisplay.tsx

@@ -44,7 +44,7 @@ export default function CourseDisplay({ searchParams }: Props) {
         </h1>
         <div className="relative">
           {/* Container for course list */}
-          <div className="no-scrollbar relative flex flex-1 flex-col overflow-x-hidden overflow-y-scroll scroll-smooth border-4 border-dusty-pink bg-white py-4">
+          <div className="no-scrollbar relative flex flex-1 flex-col overflow-x-hidden overflow-y-scroll scroll-smooth border-4 border-dusty-pink bg-white py-4 dark:border-dm-light-gray dark:bg-[#525252]">
             {/*Course item */}
             {courses.map((course) => (
               <RegisteredClass
@@ -57,7 +57,7 @@ export default function CourseDisplay({ searchParams }: Props) {
             ))}
           </div>
           {/* Styling div to add spacing and hold down arrow notification in case there is more items */}
-          <div className="absolute bottom-0 left-0 flex h-6 w-full justify-center border-4 border-t-0 border-dusty-pink bg-white">
+          <div className="absolute bottom-0 left-0 flex h-6 w-full justify-center border-4 border-t-0 border-dusty-pink bg-white dark:border-dm-light-gray dark:bg-[#525252]">
             {courses.length > 5 && (
               <PiCaretDownBold className="size-30 h-auto w-auto animate-bounce" />
             )}

frontend/src/components/courses/RegisteredClass.tsx

@@ -26,7 +26,7 @@ const RegisteredClass = ({
 
   return (
     <article
-      className={`flex min-w-60 bg-white py-1 pl-8 duration-100 ease-out hover:translate-x-1 hover:brightness-95 ${removeElement ? "opacity-0" : ""}`}
+      className={`flex min-w-60 bg-white py-1 pl-8 duration-100 ease-out hover:translate-x-1 hover:brightness-95 dark:bg-[#525252] dark:hover:brightness-90 ${removeElement ? "opacity-0" : ""}`}
     >
       <RemoveElementButton height={20} width={20} onClick={removeAnimation} />
       <div className="overflow-hidden text-ellipsis">

frontend/src/components/saved-plans/SavedPlan.tsx

@@ -39,7 +39,7 @@ export default function SavedPlan({ plan, onPin, onDelete }: PlanDisplayProps) {
 
   return (
     <div
-      className="relative z-10 flex w-[70vw] cursor-pointer flex-row items-center gap-4 rounded-xl border-b-8 border-red-700 bg-white px-7 py-4 ring-2 ring-black hover:mt-1 hover:border-b-4 hover:border-red-700 hover:bg-neutral-100 [&:active:not(:has(input:hover,button:hover))]:border-b-0 [&:active:not(:has(input:hover,button:hover))]:border-t-4"
+      className="relative z-10 flex w-[70vw] cursor-pointer flex-row items-center gap-4 rounded-xl border-b-8 border-red-700 bg-white px-7 py-4 ring-2 ring-black hover:mt-1 hover:border-b-4 hover:border-red-700 hover:bg-neutral-100 dark:bg-[#262525] [&:active:not(:has(input:hover,button:hover))]:border-b-0 [&:active:not(:has(input:hover,button:hover))]:border-t-4"
       onClick={goToPlan}
       role="link"
     >
@@ -48,12 +48,14 @@ export default function SavedPlan({ plan, onPin, onDelete }: PlanDisplayProps) {
         src="/images/blackpaw.svg"
         width={64}
         height={64}
-        className="size-8"
+        className="size-8 dark:invert"
         alt="black paw"
       />
 
       {/* Plan title */}
-      <h2 className="flex-1 text-2xl font-bold text-black">{plan.title}</h2>
+      <h2 className="flex-1 text-2xl font-bold text-black dark:text-white">
+        {plan.title}
+      </h2>
 
       {/* Pin button (gives a saved plan priority over others*/}
       <button type="button" className="cursor-default" onClick={handlePin}>