feat: course colors (#175)

* feat: course colors

* docs: fix typo in jsdoc

src/views/components/calendar/CalendarCourseBlock/CalendarCourseMeeting.tsx

@@ -12,8 +12,6 @@ export interface CalendarCourseMeetingProps {
     course: Course;
     /* index into course meeting array to display */
     meetingIdx?: number;
-    /** The background color for the course. */
-    color: string;
     /** The icon to display on the right side of the course. This is optional. */
     rightIcon?: React.ReactNode;
 }
@@ -22,12 +20,11 @@ export interface CalendarCourseMeetingProps {
  * `CalendarCourseMeeting` is a functional component that displays a course meeting.
  *
  * @example
- * <CalendarCourseMeeting course={course} meeting={meeting} color="red" rightIcon={<Icon />} />
+ * <CalendarCourseMeeting course={course} meeting={meeting} rightIcon={<Icon />} />
  */
 export default function CalendarCourseMeeting({
     course,
     meetingIdx,
-    color,
     rightIcon,
 }: CalendarCourseMeetingProps): JSX.Element {
     let meeting: CourseMeeting | null = meetingIdx !== undefined ? course.schedule.meetings[meetingIdx] : null;

src/views/components/calendar/CalendarGrid/CalendarGrid.tsx

@@ -1,5 +1,4 @@
 import type { Course } from '@shared/types/Course';
-import { getCourseColors } from '@shared/util/colors';
 import CalendarCourseCell from '@views/components/calendar/CalendarCourseCell/CalendarCourseCell';
 import Text from '@views/components/common/Text/Text';
 import type { CalendarGridCourse } from '@views/hooks/useFlattenedCourseSchedule';
@@ -120,11 +119,8 @@ function AccountForCourseConflicts({ courseCells, setCourse }: AccountForCourseC
         });
     });
 
-    //  Part of TODO: block.course is definitely a course object
-    //  console.log(courseCells);
-
     return courseCells.map((block, i) => {
-        const { courseDeptAndInstr, timeAndLocation, status, colors } = courseCells[i].componentProps;
+        const { courseDeptAndInstr, timeAndLocation, status } = courseCells[i].componentProps;
 
         return (
             <div
@@ -141,8 +137,7 @@ function AccountForCourseConflicts({ courseCells, setCourse }: AccountForCourseC
                     courseDeptAndInstr={courseDeptAndInstr}
                     timeAndLocation={timeAndLocation}
                     status={status}
-                    //  TODO: Change to block.componentProps.colors when colors are integrated to the rest of the project
-                    colors={getCourseColors('emerald', 500) /*  block.componentProps.colors */}
+                    colors={block.course.colors}
                     onClick={() => setCourse(block.course)}
                 />
             </div>