Change course colors, fix course overflow

app/calendar/page.tsx

@@ -8,23 +8,12 @@ import prisma from "../../lib/prisma";
 import { auth } from "../../lib/auth";
 import { getPlanCookie } from "../actions";
 import { BorderColor } from "@mui/icons-material";
-import { courseColors } from "../../components/primitives";
-
+import { generateColorFromName } from "../../components/primitives";
 export default async function CalendarPage() {
   async function getEvents() {
     let output: any = [];
     let planCookie: any = await getPlanCookie();
 
-    function generateColorFromName(name: string) {
-      let hash = 0;
-
-      for (let i = 0; i < name.length; i++) {
-        hash += name.charCodeAt(i);
-      }
-
-      return courseColors[hash % courseColors.length];
-    }
-
     let courses;
     if (planCookie) {
       let plan = await prisma.coursePlan.findUnique({

app/page.tsx

@@ -51,7 +51,7 @@ async function Home(props: any) {
             <div className="row-start-1">
               <Search />
             </div>
-            <div className="row-start-2 h-[62vh] overflow-scroll">
+            <div className="row-start-2 h-[62vh] overflow-y-scroll overflow-x-clip">
               {props.fullCourseList}
             </div>
           </div>

components/Calendar.tsx

@@ -15,7 +15,7 @@ export default function Calendar(props: any) {
     console.log(eventInfo);
     return (
       <Card
-        className=" fc-event-main-frame w-[100%] rounded-md hover:h-[20vh] z-0 hover:z-10 hover:transition-all duration-700 "
+        className="fc-event-main-frame w-[100%] rounded-md hover:h-[20vh] ease-in-out z-0 hover:z-10 hover:transition-all duration-700 "
         style={{ backgroundColor: eventInfo.event.extendedProps.daColor }}
       >
         {/*

components/CourseCard.tsx

@@ -11,7 +11,7 @@ import {
   Button,
 } from "@nextui-org/react";
 import { tv } from "tailwind-variants";
-import { courseColors } from "../components/primitives";
+import { generateColorFromName } from "../components/primitives";
 
 import { InstructorCard } from "./InstructorCard";
 import AddIcon from "@mui/icons-material/Add";
@@ -29,16 +29,6 @@ const {
   role,
 } = card();
 
-function generateColorFromName(name: string) {
-  let hash = 0;
-
-  for (let i = 0; i < name.length; i++) {
-    hash += name.charCodeAt(i);
-  }
-
-  return courseColors[hash % courseColors.length];
-}
-
 async function updatePlan(course: any) {
   console.log("updating");
   await axios

components/CreatePlan.tsx

@@ -37,7 +37,7 @@ import { useEffect, useState } from "react";
 import useSWR from "swr";
 import { setPlanCookie } from "../app/actions";
 import { useCookies } from "next-client-cookies";
-import { courseColors } from "../components/primitives";
+import { generateColorFromName } from "../components/primitives";
 export default function CreatePlan(props: any) {
   const cookies = useCookies();
   const router = useRouter();
@@ -117,16 +117,6 @@ export default function CreatePlan(props: any) {
     setPlanCookie(e.target.value);
   };
 
-  function generateColorFromName(name: string) {
-    let hash = 0;
-
-    for (let i = 0; i < name.length; i++) {
-      hash += name.charCodeAt(i);
-    }
-
-    return courseColors[hash % courseColors.length];
-  }
-
   useEffect(() => {
     // Update the document title using the browser API
     setSelectedCoursePlan([cookies.get("plan")]);

components/navbar.tsx

@@ -33,7 +33,6 @@ import InputIcon from "@mui/icons-material/Input";
 
 import { siteConfig } from "../config/site";
 import { ThemeSwitch } from "../components/theme-switch";
-import { SearchIcon } from "../components/icons";
 import { title } from "../components/primitives";
 
 import HomeIcon from "@mui/icons-material/Home";

components/primitives.ts

@@ -59,23 +59,26 @@ export const courseColors = [
   "#093145",
   "#107896",
   "#829356",
-
+  "#5A5A66",
+  "#4A6D7C",
   "#C2571A",
   "#9A2617",
+  "#201335",
   "#636363",
   "#087E8B",
   "#590925",
   "#034748",
   "#19381F",
   "#631D76",
   "#4B4E6D",
+  "#590004",
 ];
 
 export function generateColorFromName(name: string) {
   let hash = 0;
 
   for (let i = 0; i < name.length; i++) {
-    hash += name.charCodeAt(i);
+    hash += name.charCodeAt(i) * i;
   }
 
   return courseColors[hash % courseColors.length];

components/theme-switch.tsx

@@ -7,8 +7,8 @@ import { useTheme } from "next-themes";
 import { useIsSSR } from "@react-aria/ssr";
 import clsx from "clsx";
 
-import { SunFilledIcon, MoonFilledIcon } from "../components/icons";
-
+import Brightness4Icon from "@mui/icons-material/Brightness4";
+import BedtimeIcon from "@mui/icons-material/Bedtime";
 export interface ThemeSwitchProps {
   className?: string;
   classNames?: SwitchProps["classNames"];
@@ -70,11 +70,7 @@ export const ThemeSwitch: FC<ThemeSwitchProps> = ({
           ),
         })}
       >
-        {!isSelected || isSSR ? (
-          <SunFilledIcon size={22} />
-        ) : (
-          <MoonFilledIcon size={22} />
-        )}
+        {!isSelected || isSSR ? <Brightness4Icon /> : <BedtimeIcon />}
       </div>
     </Component>
   );