From 8d3e48ec8da99386c07c2f0e70aeb85126d8db2f Mon Sep 17 00:00:00 2001 From: Xavier Lien Date: Sun, 1 Dec 2024 16:35:38 -0500 Subject: [PATCH] Light colors for hover --- apps/frontend/src/app/constants.ts | 36 ++++++++++++------- apps/frontend/src/app/userSchedules.ts | 7 ++-- apps/frontend/src/app/utils.tsx | 9 ++++- .../src/components/ScheduleCalendar.tsx | 4 +-- .../src/components/SectionSelector.tsx | 2 +- 5 files changed, 38 insertions(+), 20 deletions(-) diff --git a/apps/frontend/src/app/constants.ts b/apps/frontend/src/app/constants.ts index 7481f7e5..48241aea 100644 --- 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] || ""; \ No newline at end of file +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 +]; \ No newline at end of file diff --git a/apps/frontend/src/app/userSchedules.ts b/apps/frontend/src/app/userSchedules.ts index bcd04f9e..34db77ea 100644 --- 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) => { diff --git a/apps/frontend/src/app/utils.tsx b/apps/frontend/src/app/utils.tsx index bf3c666a..e6a93b99 100644 --- 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]; +} \ No newline at end of file diff --git a/apps/frontend/src/components/ScheduleCalendar.tsx b/apps/frontend/src/components/ScheduleCalendar.tsx index 17b1183c..eb744d89 100644 --- 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 index bbcb4390..c9d30690 100644 --- 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"