Dark mode

Client/src/components/calendar/aiChat/CalendarAIChatContainer.tsx

@@ -4,7 +4,7 @@ import { ChatContainer } from "@/components/chat";
 const CalendarAIChatContainer = () => {
   return (
     <>
-      <header className="sticky top-0 bg-slate-900 text-white p-1 z-40 border-b-2 border-zinc-800 dark:border-slate-700 shadow-md">
+      <header className="sticky top-0 bg-background text-white p-1 z-40 border-b-2 border-zinc-800 dark:border-slate-700 shadow-md">
         <div className="flex items-center justify-end">
           <NewChat />
         </div>

Client/src/components/calendar/buildSchedule/layout/LeftScheduleFooter.tsx

@@ -15,7 +15,7 @@ const LeftSectionFooter = ({
     <>
       <div className="border-t border-gray-200" />
 
-      <div className="sticky bottom-0 mx-4 bg-background/95 backdrop-blur flex gap-2 shadow-lg p-4 h-[20%]">
+      <div className="sticky bottom-0 mx-4 bg-card/95 backdrop-blur flex gap-2 shadow-lg p-4 h-[20%]">
         {/* Apply Filters button */}
         <Button
           type="submit"
@@ -27,7 +27,7 @@ const LeftSectionFooter = ({
         <Button
           onClick={onClick}
           variant="secondary"
-          className="w-full shadow-lg dark:bg-slate-500 dark:bg-opacity-50 dark:hover:bg-slate-700 dark:hover:bg-opacity-70"
+          className="w-full shadow-lg dark:bg-slate-500 dark:bg-opacity-50 dark:hover:bg-buttonHover dark:hover:bg-opacity-70"
         >
           {buttonText}
         </Button>

Client/src/components/calendar/buildSchedule/selectedSections/SectionsChosen.tsx

@@ -54,15 +54,15 @@ const SectionsChosen = () => {
     <div className="grid grid-cols-1 gap-2">
       {Object.entries(groupedSections).map(([courseId, professorGroups]) => (
         <Collapsible key={courseId} className="group/collapsible">
-          <div className="bg-white dark:bg-slate-900 rounded-md border border-gray-200 dark:border-slate-700">
+          <div className="bg-card dark:bg-background rounded-md border border-gray-200 dark:border-slate-700">
             <CollapsibleTrigger asChild>
-              <div className="bg-slate-800 flex justify-between items-center p-2 hover:bg-gray-50 dark:hover:bg-slate-600 transition-colors cursor-pointer rounded-md">
+              <div className="bg-card flex justify-between items-center p-2 hover:bg-gray-50 dark:hover:bg-slate-600 transition-colors cursor-pointer rounded-md">
                 <div className="flex items-center gap-3">
                   <ChevronRight className="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90" />
                   <h2 className="text-base font-semibold text-gray-800 dark:text-gray-200">
                     {courseId}
                   </h2>
-                  <span className="text-xs px-2 py-1 rounded-full bg-gray-100 dark:bg-slate-700 text-gray-600 dark:text-gray-300">
+                  <span className="text-xs px-2 py-1 rounded-full bg-gray-100 dark:bg-buttonHover text-gray-600 dark:text-gray-300">
                     {Object.values(professorGroups).flat().length} sections
                   </span>
                 </div>
@@ -80,7 +80,7 @@ const SectionsChosen = () => {
                     >
                       <div className=" border-gray-100 dark:border-slate-700 pt-2">
                         <CollapsibleTrigger asChild>
-                          <div className="flex justify-between items-center mb-2 cursor-pointer hover:bg-gray-50 dark:hover:bg-slate-800 px-2 py-1 rounded">
+                          <div className="flex justify-between items-center mb-2 cursor-pointer hover:bg-gray-50 dark:hover:bg-card px-2 py-1 rounded">
                             <h3 className="text-sm font-medium text-gray-500 dark:text-gray-400">
                               {professor
                                 .split(" ")
@@ -162,7 +162,7 @@ const SectionCard: React.FC<{ section: SelectedSection }> = ({ section }) => {
         {/* Days - Bubble Style */}
         <div className="flex items-center gap-2">
           <span className="text-xs text-gray-500 dark:text-gray-400">Days</span>
-          <span className="text-xs px-2 py-0.5 rounded-lg bg-gray-100 dark:bg-slate-700 text-gray-600 dark:text-gray-300">
+          <span className="text-xs px-2 py-0.5 rounded-lg bg-gray-100 dark:bg-buttonHover text-gray-600 dark:text-gray-300">
             {meetings?.[0]?.days || "N/A"}
           </span>
         </div>
@@ -175,13 +175,13 @@ const SectionCard: React.FC<{ section: SelectedSection }> = ({ section }) => {
               Time
             </span>
             <div className="flex items-center gap-1">
-              <span className="text-xs px-2 py-0.5 rounded-lg bg-gray-100 dark:bg-slate-700 text-gray-600 dark:text-gray-300">
+              <span className="text-xs px-2 py-0.5 rounded-lg bg-gray-100 dark:bg-buttonHover text-gray-600 dark:text-gray-300">
                 {startTime}
               </span>
               <span className="text-xs text-gray-500 dark:text-gray-400">
                 to
               </span>
-              <span className="text-xs px-2 py-0.5 rounded-lg bg-gray-100 dark:bg-slate-700 text-gray-600 dark:text-gray-300">
+              <span className="text-xs px-2 py-0.5 rounded-lg bg-gray-100 dark:bg-buttonHover text-gray-600 dark:text-gray-300">
                 {endTime}
               </span>
             </div>

Client/src/components/calendar/weeklyCalendar/currentCalendar/CalendarSectionInfo.tsx

@@ -51,7 +51,7 @@ const CalendarSectionInfo = () => {
   const instructorRatings = calendarSelectedSection.instructorsWithRatings?.[0];
 
   return (
-    <div className="w-full rounded-lg border border-slate-600 bg-slate-900 p-3 shadow-xl">
+    <div className="w-full rounded-lg border border-slate-600 bg-background p-3 shadow-xl">
       {/* Header Section */}
       <div className="mb-6 flex items-start justify-between">
         <div>
@@ -95,7 +95,7 @@ const CalendarSectionInfo = () => {
                     `https://polyratings.dev/professor/${instructorRatings.id}`,
                     "_blank"
                   )
-                }
+                } 
               >
                 (View Ratings)
               </Button>

Client/src/components/calendar/weeklyCalendar/currentCalendar/WeeklyCalendar.tsx

@@ -169,8 +169,8 @@ const WeeklyCalendar: React.FC<WeeklyCalendarProps> = ({
         border-slate-200
         dark:border-slate-700
         rounded-md
-        bg-white
-        dark:bg-slate-900
+        bg-card
+        dark:bg-background
         text-slate-900
         dark:text-slate-100
         custom-tr-height
@@ -197,7 +197,7 @@ const WeeklyCalendar: React.FC<WeeklyCalendarProps> = ({
               const days = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
               return days[args.date.getDay()];
             }}
-            dayHeaderClassNames="bg-gray-100 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 p-2 font-semibold text-center"
+            dayHeaderClassNames="bg-gray-100 dark:bg-card border border-slate-200 dark:border-slate-700 p-2 font-semibold text-center"
             slotLabelFormat={{
               hour: "numeric",
               minute: "2-digit",

Client/src/components/calendar/weeklyCalendar/incomplete/ScheduleBuilderQueryForm.tsx

@@ -238,7 +238,7 @@ const ScheduleBuilderQueryForm = () => {
         <div className="border-t border-gray-200 p-4" />
 
         {/* Sticky footer with Reset and Build */}
-        <div className="sticky bottom-0 mx-6 bg-background/95 backdrop-blur flex gap-2 shadow-lg">
+        <div className="sticky bottom-0 mx-6 bg-card/95 backdrop-blur flex gap-2 shadow-lg">
           {/* Reset button */}
           <Button
             type="button"

Client/src/components/chat/chatBody/AssistantSuggestedMessages.tsx

@@ -43,7 +43,7 @@ const AssistantSuggestedMessages = ({
           {suggestions?.map((message, index) => (
             <Button
               key={index}
-              className="p-4 text-md dark:bg-slate-800 hover:dark:bg-slate-700 dark:text-gray-200 rounded-2xl text-left h-full min-h-[120px] whitespace-normal break-words"
+              className="p-4 text-md dark:bg-card hover:dark:bg-buttonHover dark:text-gray-200 rounded-2xl text-left h-full min-h-[120px] whitespace-normal break-words"
               onClick={() => handleClick(message)}
             >
               {message}

Client/src/components/chat/chatBody/ChatContainer.tsx

@@ -57,8 +57,8 @@ const ChatContainer = () => {
   };
 
   return (
-    <div className="flex flex-col h-screen bg-slate-900">
-      <div className={`flex flex-col ${chatContainerHeight} bg-slate-900`}>
+    <div className="flex flex-col h-screen bg-background">
+      <div className={`flex flex-col ${chatContainerHeight} bg-background`}>
         {/* Only one flex child grows: our message list */}
         {isNewChat && !loading[currentChatId ?? ""] ? (
           <AssistantSuggestedMessages sendButtonRef={sendButtonRef} />

Client/src/components/chat/chatBody/MobileChatContainer.tsx

@@ -52,8 +52,8 @@ const MobileChatContainer = () => {
     return Math.abs(scrollHeight - clientHeight - scrollTop) < 20;
   };
   return (
-    <div className="flex flex-col h-screen bg-slate-900 ">
-      <div className={`flex flex-col h-[70%] bg-slate-900`}>
+    <div className="flex flex-col h-screen bg-background ">
+      <div className={`flex flex-col h-[70%] bg-background`}>
         {/* Only one flex child grows: our message list */}
         {isNewChat && !loading[currentChatId ?? ""] ? (
           <AssistantSuggestedMessages sendButtonRef={sendButtonRef} />

Client/src/components/chat/chatFooter/ChatInput.tsx

@@ -154,7 +154,7 @@ const ChatInput = ({
 
   return (
     <div
-      className="w-full mt-4 p-5 bg-slate-900 sticky bottom-0 border-t dark:border-slate-700"
+      className="w-full mt-4 p-5 bg-background sticky bottom-0 border-t dark:border-slate-700"
       style={{ paddingBottom: "env(safe-area-inset-bottom)" }}
     >
       {lockedChat ? (
@@ -192,7 +192,7 @@ const ChatInput = ({
             />
             {currentChatId && loading[currentChatId] ? (
               <Button
-                className="dark:bg-transparent hover:bg-gray-800 dark:hover:bg-slate-800 focus:ring-2 focus:ring-red-400 focus:outline-none transition-all duration-300 ease-in-out px-4 py-2 text-base text-white"
+                className="dark:bg-transparent hover:bg-gray-800 dark:hover:bg-card focus:ring-2 focus:ring-red-400 focus:outline-none transition-all duration-300 ease-in-out px-4 py-2 text-base text-white"
                 type="submit"
                 variant="outline"
                 ref={sendButtonRef}

Client/src/components/chat/chatHeader/ModeDropDown.tsx

@@ -112,7 +112,7 @@ export default function ModeDropDown({ onSelect }: ModeDropDownProps) {
             {currentModel.title}
           </NavigationMenuTrigger>
           <NavigationMenuContent className="w-[80vw]">
-            <ul className="grid p-6 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr] lg:auto-rows-min bg-white dark:bg-gray-900">
+            <ul className="grid p-6 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr] lg:auto-rows-min bg-card dark:bg-gray-900">
               <li className="row-span-1 mb-3 mr-3 border-b pb-3 lg:border-b-0 lg:border-r border-gray-200 dark:border-gray-700">
                 <div className="text-lg font-medium">{currentModel.title}</div>
                 <p className="text-sm leading-tight text-muted-foreground">
@@ -155,7 +155,7 @@ const ListItem = React.forwardRef<
     <button
       ref={ref}
       className={cn(
-        "block w-full select-none rounded-md p-3 leading-none no-underline outline-none transition-colors hover:dark:bg-slate-800 hover:text-white focus:dark:bg-slate-800 focus:text-white",
+        "block w-full select-none rounded-md p-3 leading-none no-underline outline-none transition-colors hover:dark:bg-card hover:text-white focus:dark:bg-card focus:text-white",
         className
       )}
       {...props}

Client/src/components/flowchart/currentFlowchart/FlowChart.tsx

@@ -116,8 +116,8 @@ const Flowchart = ({
             onClick={() => scrollToYear(index)}
             className={`cursor-pointer ${
               selectedYear === index
-                ? "dark:bg-slate-700 text-white"
-                : "text-white hover:dark:bg-slate-800"
+                ? "dark:bg-buttonHover text-white"
+                : "text-white hover:dark:bg-card"
             } ${isNarrowScreen ? "text-xs size-8 px-6" : "text-lg"}`}
           >
             Year {index + 1}
@@ -145,7 +145,7 @@ const Flowchart = ({
           <ScrollBar
             orientation="horizontal"
             data-state="visible"
-            className="bg-white h-4"
+            className="bg-card h-4"
           />
         </div>
       </ScrollArea>

Client/src/components/flowchart/flowchartLog/FlowchartLog.tsx

@@ -59,7 +59,7 @@ const FlowchartLog = ({ flowchart, onSelectFlowchart }: FlowchartLogProps) => {
             flowchart.primaryOption
               ? "border-yellow-600 border-2" // Primary flowchart style
               : "border-gray-600"
-          } bg-slate-800 rounded-md transition duration-200 ease-in-out transform hover:bg-slate-700 hover:scale-105 ${
+          } bg-card rounded-md transition duration-200 ease-in-out transform hover:bg-buttonHover hover:scale-105 ${
             flowchartId === flowchart.flowchartId ? "bg-slate-600" : ""
           }`}
         >

Client/src/components/flowchart/flowchartSidebar/SidebarFlowchart.tsx

@@ -149,7 +149,7 @@ export function SidebarFlowchart() {
     <Sidebar
       collapsible="icon-offcanvas"
       className={`
-      flex flex-col h-full ml-16 pl-2 dark:bg-slate-900
+      flex flex-col h-full ml-16 pl-2 dark:bg-background
       transition-all duration-300
       ${open ? "opacity-100" : "opacity-0 -translate-x-16"}
     `}
@@ -214,7 +214,7 @@ export function SidebarFlowchart() {
         </ScrollArea>
         <div className="border-b border-sidebar-border"></div>
 
-        <div className="sticky bottom-0 bg-white dark:bg-gray-800">
+        <div className="sticky bottom-0 bg-card dark:bg-gray-800">
           <CourseSearchbar />
         </div>
       </SidebarContent>

Client/src/components/flowchart/flowchartSidebar/courses/SidebarCourse.tsx

@@ -31,7 +31,7 @@ const SidebarCourse = ({ course }: { course: Course }) => {
           </Card>
         </TooltipTrigger>
         <TooltipContent>
-          <p className="p-4 text-md dark:bg-slate-800 hover:dark:bg-slate-700 dark:text-gray-200 rounded-2xl text-left max-h-[400px] whitespace-pre-wrap overflow-y-auto max-w-[400px]">
+          <p className="p-4 text-md dark:bg-card hover:dark:bg-buttonHover dark:text-gray-200 rounded-2xl text-left max-h-[400px] whitespace-pre-wrap overflow-y-auto max-w-[400px]">
             {course.desc || course.customDesc || "No Description"}
           </p>
         </TooltipContent>

Client/src/components/layout/CalendarPage/CalendarPageHeader.tsx

@@ -1,6 +1,6 @@
 const CalendarPageHeader = () => {
   return (
-    <header className="sticky top-0 bg-slate-900 text-white p-4 z-50 border-b-2 border-zinc-800 dark:border-slate-700 shadow-md">
+    <header className="sticky top-0 bg-background text-white p-4 z-50 border-b-2 border-zinc-800 dark:border-slate-700 shadow-md">
       <div className="flex items-center justify-center">
         <div className="text-2xl font-bold leading-tight text-center">
           Schedule Builder

Client/src/components/layout/CalendarPage/CalendarPageLayout.tsx

@@ -15,7 +15,7 @@ const CalendarPageLayout = ({ children }: SectionPageLayoutProps) => {
       <div className="flex">
         {isNarrowScreen ? null : <OuterIconSidebar />}
         <div
-          className={`bg-slate-900 text-white flex flex-col no-scroll w-full ${
+          className={`bg-background text-white flex flex-col no-scroll w-full ${
             isNarrowScreen ? "ml-0" : "ml-2"
           }`}
         >

Client/src/components/layout/ChatPage/ChatPageHeader.tsx

@@ -44,7 +44,7 @@ const ChatHeader = () => {
   };
 
   return (
-    <header className="sticky top-0 bg-slate-900 text-white p-4 z-40 border-b-2 border-zinc-800 dark:border-slate-700 shadow-md">
+    <header className="sticky top-0 bg-background text-white p-4 z-40 border-b-2 border-zinc-800 dark:border-slate-700 shadow-md">
       <div className="flex items-center justify-between">
         <Button variant="ghost" onClick={toggleSidebar}>
           <FiSidebar className="m-auto w-5 h-5" />

Client/src/components/layout/ChatPage/ChatPageLayout.tsx

@@ -7,7 +7,7 @@ const ChatPageLayout = ({ children }: { children: React.ReactNode }) => {
   return (
     <>
       <ChatPageSidebar />
-      <div className="bg-slate-800 text-white min-h-screen flex flex-col no-scroll w-full">
+      <div className="bg-card text-white min-h-screen flex flex-col no-scroll w-full">
         <ChatPageHeader />
         <div className="flex-1">{children}</div>
       </div>

Client/src/components/layout/ChatPage/MobileChatPageLayout.tsx

@@ -8,7 +8,7 @@ const ChatPageLayout = ({ children }: { children: React.ReactNode }) => {
     <>
       <ChatPageSidebar />
       <div
-        className="bg-slate-800 text-white min-h-screen flex flex-col w-full overflow-hidden overscroll-none touch-none"
+        className="bg-card text-white min-h-screen flex flex-col w-full overflow-hidden overscroll-none touch-none"
         style={{
           // Prevent default scrolling on the body
           position: "fixed",

Client/src/components/layout/FlowchartPage/FlowchartHeader.tsx

@@ -12,7 +12,7 @@ const FlowchartHeader = () => {
   const isNarrowScreen = useIsNarrowScreen();
 
   return (
-    <header className="sticky top-0 bg-slate-900 text-white p-1 z-50 border-b-2 dark:border-slate-700 shadow-md transition-all duration-300 ml-2">
+    <header className="sticky top-0 bg-background text-white p-1 z-50 border-b-2 dark:border-slate-700 shadow-md transition-all duration-300 ml-2">
       <div className="flex items-center justify-between relative w-full">
         <Button
           variant="ghost"

Client/src/components/layout/FlowchartPage/FlowchartLayout.tsx

@@ -19,7 +19,7 @@ const FlowchartLayout = ({ children }: { children: React.ReactNode }) => {
     <DragDropContextWrapper>
       <SidebarFlowchart />
       <div
-        className={`bg-slate-900 text-white min-h-screen flex flex-col overflow-hidden no-scroll w-full ${
+        className={`bg-background text-white min-h-screen flex flex-col overflow-hidden no-scroll w-full ${
           isNarrowScreen ? "mr-8" : "mr-16"
         }`}
       >

Client/src/components/layout/ProfilePage/ProfilePageHeader.tsx

@@ -1,6 +1,6 @@
 const ProfilePageHeader = () => {
   return (
-    <header className="sticky top-0 bg-slate-900 text-white p-4 z-50 border-b-2 border-zinc-800 dark:border-x-gray-500 shadow-md">
+    <header className="sticky top-0 bg-background text-white p-4 z-50 border-b-2 border-zinc-800 dark:border-x-gray-500 shadow-md">
       <div className="flex items-center justify-center">
         <h1 className="self-center text-lg font-bold">Edit Profile</h1>
       </div>

Client/src/components/layout/ProfilePage/ProfilePageLayout.tsx

@@ -23,7 +23,7 @@ const ProfilePageLayout = ({ children }: ProfilePageLayoutProps) => {
       <div className="flex">
         {isNarrowScreen ? null : <OuterIconSidebar />}
         <DragDropContextWrapper>
-          <div className="bg-slate-800 text-white min-h-screen flex flex-col no-scroll w-full oveflow-hidden">
+          <div className="bg-card text-white min-h-screen flex flex-col no-scroll w-full oveflow-hidden">
             {isNarrowScreen ? <MobileHeader /> : <ProfilePageHeader />}
             <ScrollArea className="overflow-y-auto">
               <div className="flex-1 h-[95vh]">{children}</div>

Client/src/components/layout/SectionPage/MobileSectionPageLayout.tsx

@@ -15,7 +15,7 @@ const MobileSectionPageLayout = ({
       className="
         flex flex-col 
         min-h-screen 
-        bg-slate-900 
+        bg-background 
         text-white 
         w-full 
         ml-0 

Client/src/components/layout/SectionPage/SectionPageHeader.tsx

@@ -1,6 +1,6 @@
 const SectionPageHeader = () => {
   return (
-    <header className="sticky top-0 bg-slate-900 text-white p-4 z-50 border-b-2 border-zinc-800 dark:border-slate-700 shadow-md">
+    <header className="sticky top-0 bg-background text-white p-4 z-50 border-b-2 border-zinc-800 dark:border-slate-700 shadow-md">
       <div className="flex items-center justify-center">
         <div className="text-2xl font-bold leading-tight text-center">
           Class Search

Client/src/components/layout/SectionPage/SectionPageLayout.tsx

@@ -20,7 +20,7 @@ const SectionPageLayout = ({ children }: SectionPageLayoutProps) => {
       <div className="flex">
         {isNarrowScreen ? null : <OuterIconSidebar />}
         <div
-          className={`bg-slate-900 text-white flex flex-col no-scroll w-full ${
+          className={`bg-background text-white flex flex-col no-scroll w-full ${
             isNarrowScreen ? "ml-0" : "ml-2"
           }`}
         >

Client/src/components/layout/splashPage/SplashFooter.tsx

@@ -8,7 +8,7 @@ const SplashFooter = () => {
   };
 
   return (
-    <footer className="bg-slate-900 text-white p-8 border-t-2 border-zinc-800 dark:border-x-gray-500">
+    <footer className="bg-background text-white p-8 border-t-2 border-zinc-800 dark:border-x-gray-500">
       <div className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-8">
         {/* Brand Section */}
         <div className="space-y-4">