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>
This commit is contained in:
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user