opentelemetry.io
opentelemetry.io copied to clipboard
open-telemetry
✅ [Outreachy] Optimize the registry for dark and light mode
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
The committers listed above are authorized under a signed CLA.
- :white_check_mark: login: SusanGithaigaN / name: Susan Githaiga (eb1d4727e386d5748a2a21e3d82b7c38de68339a, ee8b037db06a2cf764ead226c8fa41a9949e93b9, e5575cd1afdb015ffef4e7363e02c4e140588b41, 9d20bc24b1df38b0ba1539c7cd66fe72f64d7830, 87cfce1639aaf206f9f22cd30a94cae202dc148f, a9fb3aaf32cb841d12d1e08d82fba878f94fa78f, 92617b2b8d3fdfe50f36adf561ec37f56f55c712, 3568b88488a0075084f757769a8c1cd8837009dd, 58eaa35b3d3fefdd43821c4922c252db269f4ce9, ca8c92eb463d7b82add6c1d1d0d45e124dea1dfd, 96e965bc71f436ea4646d93934e3c94aad5c722d, 0ae0af12ca8b587d26b25591135dcced67d14316, 3e42ba939d1d73f795e5164745207b2185370162, 677e2810a2d1e62f424cfd9d177ba384bbe3f547, 6e48495be0bf70add45c41afb3cb01bba2541558, 5fd9a6c1ea269b783e57456ccfd5aed717d51f10, 1d80164af07fe6b7b01d0fcaac2a1efe5273bc10, 411b1bf99b8f41c10d32de9dd0617c5e131444f0)
![linux-foundation-easycla[bot] avatar](https://avatars.githubusercontent.com/in/17893?v=4 "Published by a pub.dev verified publisher"){kind=small}
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)
- 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.
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
@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.
Thank you @SusanGithaigaN ! This looks really good, I consider this as done! After the outreachy application phase we will take another look and see if we can merge this PR.
Thank you @SusanGithaigaN ! This looks really good, I consider this as done! After the outreachy application phase we will take another look and see if we can merge this PR.
Thank you
@SusanGithaigaN are you still interested in working on this to move it towards being merged into the project?