feat: course colors (#175)

* feat: course colors

* docs: fix typo in jsdoc

src/views/components/PopupMain.tsx

@@ -1,6 +1,5 @@
 import { background } from '@shared/messages';
 import { UserScheduleStore } from '@shared/storage/UserScheduleStore';
-import { tailwindColorways } from '@shared/util/storybook';
 import Divider from '@views/components/common/Divider/Divider';
 import ExtensionRoot from '@views/components/common/ExtensionRoot/ExtensionRoot';
 import List from '@views/components/common/List/List';
@@ -86,22 +85,19 @@ export default function PopupMain(): JSX.Element {
                 <div className='flex-1 self-stretch overflow-y-auto px-5'>
                     {activeSchedule?.courses?.length > 0 && (
                         <List
-                            draggables={activeSchedule.courses.map((course, i) => ({
-                                course,
-                                colors: tailwindColorways[i],
-                            }))}
+                            draggables={activeSchedule.courses}
                             onReordered={reordered => {
-                                activeSchedule.courses = reordered.map(c => c.course);
+                                activeSchedule.courses = reordered;
                                 replaceSchedule(getActiveSchedule(), activeSchedule);
                             }}
-                            itemKey={e => e.course.uniqueId}
+                            itemKey={e => e.uniqueId}
                             gap={10}
                         >
-                            {({ course, colors }, handleProps) => (
+                            {(course, handleProps) => (
                                 <PopupCourseBlock
                                     key={course.uniqueId}
                                     course={course}
-                                    colors={colors}
+                                    colors={course.colors}
                                     dragHandleProps={handleProps}
                                 />
                             )}

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>