feat: calendar-course-cell-color-picker (#157)

* feat: calendar-course-cell-color-picker done??

* fix: ensure hex code is lowercase

* fix: make hex codes lower case

* chore: convert px to rem in ColorPatch.tsx

* fix: add functionality to the invert colors button

* fix: some more lowercase stuff

* fix: remove hardcoded color patch hex codes, remove hardcoded pixel values

* chore: remove React.FC

* chore: modify docs

* fix: remove duplicate style

* fix: used name over size specified classes

* fix: grid over flex, elie feedback

* refactor: use color strings instead of indices

* refactor: remove console.log statements

src/stories/components/calendar/CourseCellColorPicker.stories.tsx

@@ -0,0 +1,28 @@
+import type { ThemeColor } from '@shared/util/themeColors';
+import type { Meta, StoryObj } from '@storybook/react';
+import CourseCellColorPicker from '@views/components/calendar/CalendarCourseCellColorPicker/CourseCellColorPicker';
+import React, { useState } from 'react';
+
+const meta = {
+    title: 'Components/Calendar/CourseCellColorPicker',
+    component: CourseCellColorPicker,
+} satisfies Meta<typeof CourseCellColorPicker>;
+
+export default meta;
+type Story = StoryObj<typeof CourseCellColorPicker>;
+
+function CourseCellColorPickerWithState() {
+    const [, setSelectedColor] = useState<ThemeColor | null>(null);
+    const [isInvertColorsToggled, setIsInvertColorsToggled] = useState<boolean>(false);
+    return (
+        <CourseCellColorPicker
+            setSelectedColor={setSelectedColor}
+            isInvertColorsToggled={isInvertColorsToggled}
+            setIsInvertColorsToggled={setIsInvertColorsToggled}
+        />
+    );
+}
+
+export const Default: Story = {
+    render: CourseCellColorPickerWithState,
+};