style: light mode

also round off the calendar
swat-sccs · Nov 19, 2024 · 4aa5b03 · 4aa5b03
1 parent 043bb0c
commit 4aa5b03
Show file tree

Hide file tree

Showing 10 changed files with 103 additions and 65 deletions.
diff --git a/components/Calendar.tsx b/components/Calendar.tsx
@@ -26,8 +26,7 @@ export default function Calendar({
   function renderEventContent(eventInfo: EventContentArg) {
     return (
       <Card
-        className="fc-event-main-frame w-[100%] rounded-md group min-h-0 hover:min-h-28 ease-in-out px-1 z-0 hover:z-10 hover:transition-all duration-700 "
-        style={{ backgroundColor: eventInfo.event.extendedProps.daColor }}
+        className={`fc-event-main-frame w-[100%] rounded-md group min-h-0 hover:min-h-28 ease-in-out px-1 z-0 hover:z-10 hover:transition-all duration-700 text-white ${eventInfo.event.extendedProps.daColor}`}
       >
         <b className="font-sans text-[10px] font-normal">
           {eventInfo.timeText} {"|"} {eventInfo.event.extendedProps.room}
@@ -46,21 +45,23 @@ export default function Calendar({
   }
 
   return (
-    <FullCalendar
-      expandRows
-      allDaySlot={false}
-      dayHeaderContent={dayHeaderContent}
-      editable={false}
-      eventContent={renderEventContent}
-      events={events}
-      headerToolbar={false}
-      height="100%"
-      initialView="timeGridWeek"
-      plugins={[timeGridPlugin]}
-      slotDuration="01:00:00"
-      slotMaxTime={endTime}
-      slotMinTime={startTime}
-      weekends={false}
-    />
+    <div className="bg-primary dark:bg-transparent w-full h-full rounded-lg">
+      <FullCalendar
+        expandRows
+        allDaySlot={false}
+        dayHeaderContent={dayHeaderContent}
+        editable={false}
+        eventContent={renderEventContent}
+        events={events}
+        headerToolbar={false}
+        height="100%"
+        initialView="timeGridWeek"
+        plugins={[timeGridPlugin]}
+        slotDuration="01:00:00"
+        slotMaxTime={endTime}
+        slotMinTime={startTime}
+        weekends={false}
+      />
+    </div>
   );
 }
diff --git a/components/CourseCard.tsx b/components/CourseCard.tsx
@@ -56,7 +56,9 @@ export default function CourseCard(props: any) {
           className="flex w-6 h-6 lg:w-8 lg:h-8 rounded-md justify-center items-center"
           style={{ backgroundColor: color_mappings[index] }}
         >
-          <p className="font-bold text-sm lg:text-base text-white">{item[0]}</p>
+          <p className="font-bold text-sm lg:text-base text-black dark:text-white">
+            {item[0]}
+          </p>
         </div>
       );
     }
@@ -80,10 +82,7 @@ export default function CourseCard(props: any) {
 
   return (
     <Card key={props.course.id} isHoverable className={base()} shadow="sm">
-      <div
-        className="absolute top-0 left-0 h-full w-2"
-        style={{ backgroundColor: color }}
-      />
+      <div className={`absolute top-0 left-0 h-full w-2 ${color}`} />
       <CardHeader className="pl-6" onClick={() => updatePlan(props.course)}>
         <div className="flex items-center flex-row justify-between w-full">
           <div className="flex flex-col">
@@ -124,12 +123,12 @@ export default function CourseCard(props: any) {
         <div className="flex justify-between flex-row gap-3">
           <div className="gap-4 basis-1/2">
             {props.course.facultyMeet.meetingTimes.room ? (
-              <div className="bg-[#2C2C33] py-1 px-2 lg:py-2 lg:px-3 w-auto max-w-64 rounded-md">
+              <div className="bg-background_layer shadow-md py-1 px-2 lg:py-2 lg:px-3 w-auto max-w-64 rounded-md">
                 <div className="font-semibold text-sm lg:text-lg text-white">
                   {props.course.facultyMeet.meetingTimes.buildingDescription}{" "}
                   {props.course.facultyMeet.meetingTimes.room}
                 </div>
-                <div className="text-sm lg:text-base">
+                <div className="text-sm lg:text-base text-white">
                   {props.course.facultyMeet.meetingTimes ? (
                     <div className="mt-1">
                       <div className="font-normal">
@@ -157,8 +156,8 @@ export default function CourseCard(props: any) {
                 </div>
               </div>
             ) : (
-              <div className="bg-[#2C2C33] py-2 px-3 w-auto max-w-64 rounded-md">
-                <p className="text-sm lg:text-base">
+              <div className="bg-background_layer shadow-md py-2 px-3 w-auto max-w-64 rounded-md">
+                <p className="text-sm lg:text-base text-white">
                   Contact your Professor for additional details.
                 </p>
               </div>

diff --git a/components/CreatePlan.tsx b/components/CreatePlan.tsx
@@ -138,10 +138,7 @@ export default function CreatePlan(props: any) {
               // onClick={() => removeCourseFromPlan(selectedCoursePlan, course)}
             >
               <div
-                className={`absolute top-0 left-0 h-full w-2 rounded-full`}
-                style={{
-                  backgroundColor: generateColorFromName(course.subject),
-                }}
+                className={`absolute top-0 left-0 h-full w-2 rounded-full ${generateColorFromName(course.subject)}`}
               />
 
               <CardHeader className="justify-between">

diff --git a/components/PlanCard.tsx b/components/PlanCard.tsx
@@ -13,10 +13,7 @@ export default function PlanCard(props: any) {
       shadow="sm"
     >
       <div
-        className={`absolute top-0 left-0 h-full w-2 rounded-full`}
-        style={{
-          backgroundColor: generateColorFromName(props.course.subject),
-        }}
+        className={`absolute top-0 left-0 h-full w-2 rounded-full ${generateColorFromName(props.course.subject)}`}
       />
 
       <CardHeader className="justify-between ">
@@ -31,7 +28,7 @@ export default function PlanCard(props: any) {
             onClick={() =>
             removeCourseFromPlan(props.selectedCoursePlan[0], props.course)
           }
-            
+
             */
         >
           X

diff --git a/components/Search.tsx b/components/Search.tsx
@@ -142,6 +142,9 @@ export default function Search(props: any) {
       <Input
         isClearable
         className="col-span-9 lg:col-span-3"
+        classNames={{
+          inputWrapper: ["border-primary", "border-[0.5px]"],
+        }}
         defaultValue={searchParams.get("query")?.toString()}
         label="Search"
         labelPlacement="inside"

diff --git a/components/navbar.tsx b/components/navbar.tsx
@@ -58,6 +58,9 @@ export const Navbar = (props: any) => {
   return (
     <div className="bg-background_navbar h-auto">
       <NextUINavbar
+        classNames={{
+          toggleIcon: ["text-white"],
+        }}
         className="bg-inherit lg:py-2"
         maxWidth="full"
         position="sticky"
@@ -73,7 +76,7 @@ export const Navbar = (props: any) => {
               <span className={title({ size: "sm", color: "logo" })}>
                 SCCS&nbsp;
               </span>
-              <span className={title({ size: "xs" })}>
+              <span className={title({ size: "xs" }) + " text-white"}>
                 Course Planner&nbsp;
               </span>
             </NextLink>
@@ -114,8 +117,11 @@ export const Navbar = (props: any) => {
             {status === "authenticated" ? (
               <Dropdown>
                 <DropdownTrigger>
-                  <Button variant="bordered">
-                    <AccountCircleIcon />
+                  <Button
+                    variant="bordered"
+                    className="text-primary border-primary"
+                  >
+                    <AccountCircleIcon className="fill-primary" />
                     {session.user?.name || "Account"}
                   </Button>
                 </DropdownTrigger>
@@ -133,8 +139,9 @@ export const Navbar = (props: any) => {
               <Button
                 variant="bordered"
                 onClick={() => signIn("keycloak", { callbackUrl: "/" })}
+                className="border-primary"
               >
-                <InputIcon /> Log In
+                <InputIcon className="fill-white text-primary" /> Log In
               </Button>
             )}
           </NavbarItem>
@@ -169,7 +176,7 @@ export const Navbar = (props: any) => {
               <Dropdown>
                 <DropdownTrigger>
                   <Button variant="bordered">
-                    <AccountCircleIcon />
+                    <AccountCircleIcon className="fill-white" />
                     {session.user?.name || "Account"}
                   </Button>
                 </DropdownTrigger>
@@ -188,7 +195,7 @@ export const Navbar = (props: any) => {
                 variant="bordered"
                 onClick={() => signIn("keycloak", { callbackUrl: "/" })}
               >
-                <InputIcon /> Log In
+                <InputIcon className="fill-white text-primary" /> Log In
               </Button>
             )}
           </NavbarItem>

diff --git a/components/primitives.ts b/components/primitives.ts
@@ -56,22 +56,22 @@ export const subtitle = tv({
 });
 
 export const courseColors = [
-  "hsl(0deg 60% 35%)",
-  "hsl(21.17deg 60% 35%)",
-  "hsl(42.34deg 60% 35%)",
-  "hsl(63.51deg 60% 35%)",
-  "hsl(84.68deg 60% 35%)",
-  "hsl(105.85deg 60% 35%)",
-  "hsl(127.02deg 60% 35%)",
-  "hsl(148.19deg 60% 35%)",
-  "hsl(169.36deg 60% 35%)",
-  "hsl(190.53deg 60% 35%)",
-  "hsl(211.70deg 60% 35%)",
-  "hsl(232.87deg 60% 35%)",
-  "hsl(254.04deg 60% 35%)",
-  "hsl(275.21deg 60% 35%)",
-  "hsl(296.38deg 60% 35%)",
-  "hsl(317.55deg 60% 35%)",
+  "bg-[color:hsl(0deg_60%_50%)] dark:bg-[color:hsl(0deg_60%_35%)]",
+  "bg-[color:hsl(21.17deg_60%_50%)] dark:bg-[color:hsl(21.17deg_60%_35%)]",
+  "bg-[color:hsl(42.34deg_60%_50%)] dark:bg-[color:hsl(42.34deg_60%_35%)]",
+  "bg-[color:hsl(63.51deg_60%_50%)] dark:bg-[color:hsl(63.51deg_60%_35%)]",
+  "bg-[color:hsl(84.68deg_60%_50%)] dark:bg-[color:hsl(84.68deg_60%_35%)]",
+  "bg-[color:hsl(105.85deg_60%_50%)] dark:bg-[color:hsl(105.85deg_60%_35%)]",
+  "bg-[color:hsl(127.02deg_60%_50%)] dark:bg-[color:hsl(127.02deg_60%_35%)]",
+  "bg-[color:hsl(148.19deg_60%_50%)] dark:bg-[color:hsl(148.19deg_60%_35%)]",
+  "bg-[color:hsl(169.36deg_60%_50%)] dark:bg-[color:hsl(169.36deg_60%_35%)]",
+  "bg-[color:hsl(190.53deg_60%_50%)] dark:bg-[color:hsl(190.53deg_60%_35%)]",
+  "bg-[color:hsl(211.70deg_60%_50%)] dark:bg-[color:hsl(211.70deg_60%_35%)]",
+  "bg-[color:hsl(232.87deg_60%_50%)] dark:bg-[color:hsl(232.87deg_60%_35%)]",
+  "bg-[color:hsl(254.04deg_60%_50%)] dark:bg-[color:hsl(254.04deg_60%_35%)]",
+  "bg-[color:hsl(275.21deg_60%_50%)] dark:bg-[color:hsl(275.21deg_60%_35%)]",
+  "bg-[color:hsl(296.38deg_60%_50%)] dark:bg-[color:hsl(296.38deg_60%_35%)]",
+  "bg-[color:hsl(317.55deg_60%_50%)] dark:bg-[color:hsl(317.55deg_60%_35%)]",
 ];
 
 export function generateColorFromName(name: string) {
@@ -81,5 +81,8 @@ export function generateColorFromName(name: string) {
     hash += name.charCodeAt(i) * i;
   }
 
+  console.log("generated:");
+  console.log(courseColors[hash % courseColors.length]);
+
   return courseColors[hash % courseColors.length];
 }
diff --git a/components/theme-switch.tsx b/components/theme-switch.tsx
@@ -43,7 +43,7 @@ export const ThemeSwitch: FC<ThemeSwitchProps> = ({
         className: clsx(
           "px-px transition-opacity hover:opacity-80 cursor-pointer",
           className,
-          classNames?.base,
+          classNames?.base
         ),
       })}
     >
@@ -65,11 +65,15 @@ export const ThemeSwitch: FC<ThemeSwitchProps> = ({
               "px-0",
               "mx-0",
             ],
-            classNames?.wrapper,
+            classNames?.wrapper
           ),
         })}
       >
-        {!isSelected || isSSR ? <Brightness4Icon /> : <BedtimeIcon />}
+        {!isSelected || isSSR ? (
+          <Brightness4Icon className="fill-primary" />
+        ) : (
+          <BedtimeIcon className="fill-primary" />
+        )}
       </div>
     </Component>
   );

diff --git a/styles/globals.css b/styles/globals.css
@@ -40,6 +40,11 @@
 .fc-col-header {
   background-color: #151d2b;
   font-family: var(--font-sans);
+  border-radius: 0.5rem 0.5rem 0px 0px;
+}
+
+.fc {
+  border-radius: 0.5rem;
 }
 
 .fc-event-main-frame {
@@ -50,8 +55,15 @@
   text-overflow: ellipsis;
 }
 
-h2 {
-  font-size: 1.1em;
+.fc-theme-standard .fc-scrollgrid {
+  border-radius: 0.5rem;
+}
+
+.fc-theme-standard td {
+  border-radius: 0rem 0rem 0.5rem 0.5rem;
+}
+.fc-theme-standard th {
+  border-radius: 0.5rem 0.5rem 0rem 0rem;
 }
 
 .smallFont {

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -24,19 +24,34 @@ module.exports = {
   plugins: [
     nextui({
       themes: {
-        light: {},
+        light: {
+          colors: {
+            background: "#E5E7EB",
+            background_navbar: "#31425E",
+            background_layer: "#31425E",
+            foreground: "#000000",
+            light_foreground: "#F1F1F1",
+            primary: {
+              DEFAULT: "#9FADBC",
+              foreground: "#314f25E",
+            },
+            secondary: "#F46523",
+            focus: "#F46523",
+          },
+        },
         dark: {
           colors: {
             background: "#0C1019",
             background_navbar: "#151D2B",
+            background_layer: "#2C2C33",
             foreground: "#D9D9D9",
             light_foreground: "#181C25",
             primary: {
               DEFAULT: "#9FADBC",
               foreground: "#1D2125",
             },
             secondary: "#F46523",
-            focus: "#BEF264",
+            focus: "#F46523",
           },
         },
       },