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

[Outreachy] Optimize the registry for dark and light mode #5395

Open
wants to merge 5 commits into
base: main
Choose a base branch
from

Conversation

SusanGithaigaN
Copy link

This PR resolves issue #5349 and adjusts the font size, color, and border color in light and dark modes to make the User Interface more visually appealing and to enhance component visibility.

Key Changes:

  • Changed the font color of the button text on the search form in light mode when hovered.
  • Bolded the text on the small telemetry badge to improve visibility in light mode.
  • Override the search box entry border styling on mobile devices in dark mode to make it more noticeable.
  • Reduced the font size of the entry badge on small screens to fit within the entry container.

Testing:

  • Verified that the styles have been correctly modified
  • Tested responsiveness and confirmed that the new styles work as expected across different screen sizes.

Demo

Optimize.the.registry.for.dark.and.light.mode.1.webm

@SusanGithaigaN SusanGithaigaN requested a review from a team as a code owner October 12, 2024 11:09
Copy link

linux-foundation-easycla bot commented Oct 12, 2024

CLA Signed

The committers listed above are authorized under a signed CLA.

nvm Outdated Show resolved Hide resolved
@svrnm
Copy link
Member

svrnm commented Oct 14, 2024

Looks like a good start, thank you!

A few more things:

  • There are a few elements with a colored border, that's almost not visible in dark mode (see "OpenFGA" for example)
  • the shadow drop effect for the elements is also almost invisible in dark mode
  • some of the colored borders look off in dark mode (e.g. "Logging Collector Exporter", which is deprecated, the red top & bottom is distinct different from left & right)

@svrnm svrnm added the outreachy Issues for Outreachy Participants label Oct 14, 2024
@svrnm svrnm changed the title Optimize the registry for dark and light mode [Outreachy] Optimize the registry for dark and light mode Oct 14, 2024
@SusanGithaigaN
Copy link
Author

  • Logging Collector Exporter

@svrnm, I've completed the first two tasks. Please explain the third issue.

some of the colored borders look off in dark mode (e.g. "Logging Collector Exporter", which is deprecated.

I'm not sure which borders need adjustment.

image

@svrnm
Copy link
Member

svrnm commented Oct 16, 2024

some of the colored borders look off in dark mode (e.g. "Logging Collector Exporter", which is deprecated.

they look good for me now. Maybe I used a display with a different color calibration. See nevermind 👍

can you run npm run fix:format locally to address the failing CI check. After uploading the applied fixes you should have all checks passing

@SusanGithaigaN
Copy link
Author

@svrnm I've run the checks, and everything should be resolved now. Please let me know if you notice anything else. If all is good, I’d be happy to pick another UX-related issue and start working on it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
outreachy Issues for Outreachy Participants
Projects
Status: No status
Development

Successfully merging this pull request may close these issues.

2 participants