feat(ui): color picker final touches (#491)

* 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

* feat: add Roboto Mono font

* fix: update input class to use monospace font

* feat: add getLighterShade function

* chore: run prettier and lint

* feat: synchronize local hex code with hexCode prop changes

---------

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

src/views/components/calendar/CalendarCourseCellColorPicker/HexColorEditor.tsx

@@ -29,6 +29,12 @@ export default function HexColorEditor({ hexCode, setHexCode }: HexColorEditorPr
     const [localHexCode, setLocalHexCode] = React.useState(hexCode);
     const debouncedSetHexCode = useDebounce((value: string) => setHexCode(value), 500);
 
+    React.useEffect(() => {
+        if (hexCode !== localHexCode) {
+            setLocalHexCode(hexCode);
+        }
+    }, [hexCode]);
+
     React.useEffect(() => {
         debouncedSetHexCode(localHexCode);
 
@@ -48,7 +54,7 @@ export default function HexColorEditor({ hexCode, setHexCode }: HexColorEditorPr
                 <input
                     type='text'
                     maxLength={6}
-                    className='w-full border-none bg-transparent font-size-2.75 font-normal outline-none focus:outline-none'
+                    className='w-full border-none bg-transparent font-size-2.75 font-normal font-mono outline-none focus:outline-none'
                     value={localHexCode}
                     onChange={e => setLocalHexCode(e.target.value)}
                 />

src/views/hooks/useSchedules.ts

@@ -1,7 +1,7 @@
 import { UserScheduleStore } from '@shared/storage/UserScheduleStore';
 import type { HexColor } from '@shared/types/Color';
 import { UserSchedule } from '@shared/types/UserSchedule';
-import { getColorwayFromColor, getCourseColors, getDarkerShade } from '@shared/util/colors';
+import { getColorwayFromColor, getCourseColors, getDarkerShade, getLighterShade } from '@shared/util/colors';
 import { useEffect, useState } from 'react';
 
 let schedulesCache: UserSchedule[] = [];
@@ -150,7 +150,12 @@ export async function updateCourseColors(courseID: number, primaryColor: HexColo
 
         secondaryColor = colorFromWay;
     } catch (e) {
-        secondaryColor = getDarkerShade(primaryColor, 80);
+        secondaryColor = getDarkerShade(primaryColor, 20);
+
+        // if primaryColor is too dark, get lighter shade instead
+        if (secondaryColor === '#000000') {
+            secondaryColor = getLighterShade(primaryColor, 35);
+        }
     }
 
     updatedCourse.colors.primaryColor = primaryColor;

src/views/styles/fonts.module.scss

@@ -15,7 +15,15 @@
     font-style: normal;
 }
 
+@font-face {
+    font-family: 'Roboto Mono Local';
+    src: url('@public/fonts/roboto-mono.woff2') format('woff2');
+    font-display: swap;
+    font-style: normal;
+}
+
 @import url('https://fonts.googleapis.com/css2?family=Roboto+Flex:wght@100..1000&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap');
 
 $medium_size: 16px;