Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

AradhyaDixit18
Copy link

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 :

Screenshot 2024-06-29 at 11 18 59 PM

Copy link

linux-foundation-easycla bot commented Jun 29, 2024

CLA Signed

  • ✅login: AradhyaDixit18 / (1b43e82)

The committers listed above are authorized under a signed CLA.

Copy link

netlify bot commented Jun 29, 2024

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...

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
Copy link
Author

@aaronreed708 sir please review this.

Copy link
Contributor

@aaronreed708 aaronreed708 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants