fiftyone
fiftyone copied to clipboard
[WIP] style fixes and add header and sidebar bg token
What changes are proposed in this pull request?
This PR continuous theming refresh PR #2156 in ways listed below:
- Improve background customization of header
- Improve background customization of sidebar
- Fixes some style issues with sidebar
- TBD
How is this patch tested? If it is not, please explain why.
[WIP] As the changes in this PR are related to the UI of the app, it will be tested visually
Release Notes
Is this a user-facing change that should be mentioned in the release notes?
- [x] No. You can skip the rest of this section.
- [ ] Yes. Give a description of this change to be included in the release notes for FiftyOne users.
(Details in 1-2 sentences. You can just refer to another PR with a description if this PR is part of a larger change.)
What areas of FiftyOne does this PR affect?
- [ ] App: FiftyOne application changes
- [ ] Build: Build and test infrastructure changes
- [ ] Core: Core
fiftyone
Python library changes - [ ] Documentation: FiftyOne documentation changes
- [ ] Other
Dark mode:
Light mode:
@imanjra nice work! 🥇
Here's my reactions:
General
- Are you open/able to revert to the rounded components for the OSS App's actions menu (gear, tag, etc) and sidebar filters (N active filters, N fields checkmarks)? I think I prefer them and it doesn't bother me that they have different shape than some other
- From the light theme screenshot, the font size for the tooltip of the actions menu looks much bigger than other text such as text in filters sidebar (the second, darker tooltip from Flashlight is smaller than sidebar text, but that's not important to fix right now as that's different code)
- Don't use orange border for
Have a team?
button. Just use the default border color for the theme (my reasoning here is that it should help make light theme button look better when the background is lighter, per suggestion below) - What about putting the light/dark theme toggle to the right of
Have a team?
button, for consistency with other actions?
Light theme
- For buttons such as
+ add stage
andHave a team?
, I think a lighter (even pure white?) background for these buttons would look better - Increase the font weight for main headings like
Voxel51 > quickstart
? It looks too thin in light mode (but not in dark mode) compared to how Figma design looks (likely due to font quirks, but nonetheless) - Minor point: the sidebar looks pretty gray right now. Not sure exactly what to suggest, but perhaps the gray background used for fields like
ground_truth
could be made lighter?