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 :

[linux-foundation-easycla]

• ✅login: AradhyaDixit18 / (1b43e82)

The committers listed above are authorized under a signed CLA.

[netlify]

✅ Deploy Preview for dapper-ganache-45a60b ready!

Name	Link
🔨 Latest commit	1b43e82
🔍 Latest deploy log	https://app.netlify.com/sites/dapper-ganache-45a60b/deploys/66804a834ecd5300081b1f34
😎 Deploy Preview	https://deploy-preview-947--dapper-ganache-45a60b.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[AradhyaDixit18]

@aaronreed708 sir please review this.

[aaronreed708]

Please read my comments in #946. Also, please be aware that PRs should be made against finos:dev, not finos:main. We make changes to dev, test them out, then promote them to main when we are ready to release them.