Light colors for hover

ScottyLabs · Dec 1, 2024 · 8d3e48e · 8d3e48e
1 parent facf42d
commit 8d3e48e
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 20 deletions.
diff --git a/apps/frontend/src/app/constants.ts b/apps/frontend/src/app/constants.ts
@@ -139,17 +139,29 @@ export const STALE_TIME = 1000 * 60 * 60 * 24; // 1 day
 
 export const CAL_VIEW = "cal";
 export const SCHED_VIEW = "sched";
-const CALENDAR_COLORS = [
-  "#FFB3BA", // Light Red
-  "#FFDFBA", // Light Orange
-  "#FFFFBA", // Light Yellow
-  "#BAFFC9", // Light Green
-  "#BAE1FF", // Light Blue
-  "#D4BAFF", // Light Purple
-  "#FFC4E1", // Light Pink
-  "#C4E1FF", // Light Sky Blue
-  "#E1FFC4", // Light Lime
-  "#FFF4BA"  // Light Cream
+
+export const CALENDAR_COLORS = [
+  "#FFB3BA", // Red
+  "#FFDFBA", // Orange
+  "#FFFFBA", // Yellow
+  "#BAFFC9", // Green
+  "#BAE1FF", // Blue
+  "#D4BAFF", // Purple
+  "#FFC4E1", // Pink
+  "#C4E1FF", // Sky Blue
+  "#E1FFC4", // Lime
+  "#FFF4BA"  // Cream
 ];
 
-export const GET_CALENDAR_COLOR = (i: number) => CALENDAR_COLORS[i % CALENDAR_COLORS.length] || "";
+export const CALENDAR_COLORS_LIGHT = [
+  "#FFE1E3", // Light Red
+  "#FFF2E3", // Light Orange
+  "#FFFFE3", // Light Yellow
+  "#E3FFE9", // Light Green
+  "#E3F3FF", // Light Blue
+  "#EEE3FF", // Light Purple
+  "#FFE7F3", // Light Pink
+  "#E7F3FF", // Light Sky Blue
+  "#F3FFE7", // Light Lime
+  "#FFFBE3"  // Light Cream
+];
diff --git a/apps/frontend/src/app/userSchedules.ts b/apps/frontend/src/app/userSchedules.ts
@@ -1,9 +1,8 @@
 import { createSlice, PayloadAction } from "@reduxjs/toolkit";
-import { addToSet, removeFromSet, sessionToString } from "./utils";
+import { addToSet, getCalendarColor, removeFromSet, sessionToString } from "./utils";
 import { Session } from "./types";
 import { v4 as uuidv4 } from "uuid";
 import { RootState } from "./store";
-import { GET_CALENDAR_COLOR } from "~/app/constants";
 
 export interface CourseSessions {
   [courseID: string]: {
@@ -49,7 +48,7 @@ const getNewUserSchedule = (courseIDs: string[], id: string) : UserSchedule => {
       semester: "",
     },
     courseSessions: courseIDs.reduce((acc: CourseSessions, courseID, i: number) => {
-      acc[courseID] = {Lecture: "", Section: "", Color: GET_CALENDAR_COLOR(i)};
+      acc[courseID] = {Lecture: "", Section: "", Color: getCalendarColor(i)};
       return acc;
     }, {}),
     numColors: courseIDs.length,
@@ -77,7 +76,7 @@ export const userSchedulesSlice = createSlice({
         state.saved[state.active].selected,
         action.payload
       );
-      state.saved[state.active].courseSessions[action.payload] = {Lecture: "", Section: "", Color: GET_CALENDAR_COLOR(state.saved[state.active].numColors)};
+      state.saved[state.active].courseSessions[action.payload] = {Lecture: "", Section: "", Color: getCalendarColor(state.saved[state.active].numColors)};
       state.saved[state.active].numColors += 1;
     },
     removeCourseFromActiveSchedule: (state, action: PayloadAction<string>) => {

diff --git a/apps/frontend/src/app/utils.tsx b/apps/frontend/src/app/utils.tsx
@@ -2,7 +2,7 @@ import reactStringReplace from "react-string-replace";
 import Link from "~/components/Link";
 import { FCE, Schedule, Session, Time } from "./types";
 import { AggregateFCEsOptions, filterFCEs } from "./fce";
-import { DEPARTMENT_MAP_NAME, DEPARTMENT_MAP_SHORTNAME } from "./constants";
+import { DEPARTMENT_MAP_NAME, DEPARTMENT_MAP_SHORTNAME, CALENDAR_COLORS, CALENDAR_COLORS_LIGHT } from "./constants";
 import namecase from "namecase";
 
 export const courseIdRegex = /([0-9]{2}-?[0-9]{3})/g;
@@ -272,3 +272,10 @@ export function parseUnits(units: string): number {
   }
   return 0.0;
 }
+
+export const getCalendarColor = (i: number) => CALENDAR_COLORS[i % CALENDAR_COLORS.length] || "";
+
+export const getCalendarColorLight = (color: string) => {
+  const index = CALENDAR_COLORS.indexOf(color);
+  return CALENDAR_COLORS_LIGHT[index];
+}
diff --git a/apps/frontend/src/components/ScheduleCalendar.tsx b/apps/frontend/src/components/ScheduleCalendar.tsx
@@ -8,7 +8,7 @@ import style from "react-big-calendar/lib/css/react-big-calendar.css";
 import moment from "moment";
 import { useAppSelector } from "~/app/hooks";
 import { Course, Time } from "~/app/types";
-import { sessionToString } from "~/app/utils";
+import {getCalendarColorLight, sessionToString} from "~/app/utils";
 import {
   CourseSessions, HoverSession,
   selectCourseSessionsInActiveSchedule,
@@ -155,7 +155,7 @@ const getEvents = (CourseDetails: Course[], selectedSemester: string, selectedSe
     const hoverSection = selectedCourse?.schedules?.find(sched => sessionToString(sched) === selectedSemester)
       ?.sections.find(section => section.name === hoverSession["Section"]);
 
-    const hoverColor = "#9CA3AF";
+    const hoverColor = getCalendarColorLight(`${selectedSessions[courseID]?.Color}`) || "";
     if (hoverLecture)
       events.push(...getTimes(courseID, hoverLecture.name || "Lecture", hoverLecture.times, hoverColor));
 

diff --git a/apps/frontend/src/components/SectionSelector.tsx b/apps/frontend/src/components/SectionSelector.tsx
@@ -163,7 +163,7 @@ const SectionSelector = ({ courseIDs }: { courseIDs: string[] }) => {
                         className={({active}) => {
                           return classNames(
                             "flex relative justify-center cursor-pointer select-none focus:outline-none",
-                            "hover:bg-gray-50 py-1",
+                            "hover:bg-gray-200 py-1",
                             i === 0 ? "rounded-l-md pl-1" : "",
                             i === sessions.length - 1 ? "rounded-r-md pr-1" : "",
                             active ? "bg-indigo-600 text-gray-600" : "text-gray-900"