Fixed Hex Value Visibility and Dynamic Color Name Display in Color Palette Component

[AradhyaDixit18]

Changes I Made to Fix Hex Value Visibility and Dynamic Color Name Display Issues :

1. Installed color-namer Package:

   • I installed the color-namer package to convert color hex codes to color names.

2. Updated Imports:

   • I imported the color-namer package in the ColorPaletteAtom component.

3. Utility Functions:

   • I created a utility function to determine the text color based on the brightness of the background color.
   • I created a utility function to get the color name from a hex value using the color-namer package.

4. State Management:

   • I added state variables to manage the selected color and its complementary text color.
   • I updated the state variable for the color name to display the name of the selected color.

5. UI Adjustments:

   • I removed the background color of the hex value TextField to ensure visibility.
   • I added a separate block to visually display the selected color instead of showing the color in the hex value field.
   • I ensured that the "Color Name" field displays the color name dynamically when a color is selected using the color picker.

6. Event Handlers:

   • I updated the reflectColorPickerChangeInUI function to use the new utility function to set the color name.
   • I modified the event handlers to handle changes and blur events appropriately for the color name and hex value fields.

Now it looks like this :