feat(ui): course color picker (#382)

* fix: update CourseCellColorPicker.tsx background to white

* feat: add color picker to CalendarCourseCell component

* feat: add color picker functionality to update course colors

* fix: type issues with storybook components

* feat: add useColorPicker hook, isValidHexColor and updateCourseColors utilities

* refactor: color picker logic and UI components

* refactor: update useFlattenedCourseSchedule hook to include courseID property

* refactor: update storybook calendar components with updated props

* refactor: update color picker ui logic to account for position of cell

* fix: revert back to error handling for invalid rgb

* refactor: update jsdocs

* refactor: integrate ColorPickerContext into Calendar components and update props

* refactor: integrate ColorPickerContext into Calendar components and update related props

* refactor: change JSDocs comments and remove unused color inversion state

* refactor: update story components

* feat: add functionality for selecting secondary course colors

* refactor: enhance HexColorEditor to dynamically adjust tag icon color based on preview color

* refactor: simplify JSDoc comment in useColorPicker hook

* fix: revert Button component

* refactor: update CalendarCourseCell component positioning and styling

* fix: correct types in color.ts

* feat: add getDarkerShade function to compute darker shades of hex colors

* feat: add shadow to color picker button

* fix: update button size in ColorPatch component

* feat: implement debounced input for hex color editor and add useDebounce hook

* chore: utilize the logical and && operator instead of the ternary operator

* fix: imports and palette icon

* refactor: remove unused import

* fix: bug when course add fails with custom colors

* chore: run lint

* chore: run check-types

* feat: add HSL color type and conversion functions

* refactor: rename colorway to theme

* fix: hide color picker on screenshot

* fix: undo important syntax

* refactor: rename SomeFunction to DebouncedCallback

* refactor: remove inner function

* refactor: update return type to DebouncedCallback

* fix: adjust sizes for hash and palette button

* feat: create tests for hexToHSL and isValidHexColor

* refactor: update parameter type to use HexColor

* fix: increase size of palette button

* fix: update dependency array for hex code debounce

* fix: change colorPickerRef element ref

---------

Co-authored-by: doprz <52579214+doprz@users.noreply.github.com>

src/views/components/calendar/CalendarBottomBar.tsx

@@ -4,6 +4,7 @@ import { saveAsCal, saveCalAsPng } from '@views/components/calendar/utils';
 import { Button } from '@views/components/common/Button';
 import Divider from '@views/components/common/Divider';
 import Text from '@views/components/common/Text/Text';
+import { ColorPickerProvider } from '@views/contexts/ColorPickerContext';
 import type { CalendarGridCourse } from '@views/hooks/useFlattenedCourseSchedule';
 import clsx from 'clsx';
 import React from 'react';
@@ -41,19 +42,21 @@ export default function CalendarBottomBar({ courseCells, setCourse }: CalendarBo
                             —
                         </Text>
                         <div className='inline-flex gap-2.5'>
-                            {asyncCourseCells.map(block => {
-                                const { courseDeptAndInstr, status, colors, className } = block.componentProps;
-                                return (
-                                    <CalendarCourseBlock
-                                        courseDeptAndInstr={courseDeptAndInstr}
-                                        status={status}
-                                        colors={colors}
-                                        key={courseDeptAndInstr}
-                                        className={clsx(className, 'w-35! h-15!')}
-                                        onClick={() => setCourse(block.course)}
-                                    />
-                                );
-                            })}
+                            <ColorPickerProvider>
+                                {asyncCourseCells.map(block => {
+                                    const { courseDeptAndInstr, status, className } = block.componentProps;
+                                    return (
+                                        <CalendarCourseBlock
+                                            courseDeptAndInstr={courseDeptAndInstr}
+                                            status={status}
+                                            key={courseDeptAndInstr}
+                                            className={clsx(className, 'w-35! h-15!')}
+                                            onClick={() => setCourse(block.course)}
+                                            blockData={block}
+                                        />
+                                    );
+                                })}
+                            </ColorPickerProvider>
                         </div>
                     </>
                 )}