Styling cleanup #4573
Merged
Styling cleanup #4573
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
casibbald
reviewed
Jan 19, 2025
Agree! I tend to default to a rebase merge - since most of my PRs contain a single commit. But there are exceptions - like this one. |
|
Any chance we can select a less blinding shade of white/gray for the centre panel in day
mode?
One almost needs sun glasses to use it.
…On Sun, 19 Jan 2025 at 12:47, Erik Godding Boye ***@***.***> wrote:
In this case let's not squash this PR so each of these is traceable
Agree! I tend to default to a rebase merge - since most of my PRs contain
a single commit. But there are exceptions - like this one.
—
Reply to this email directly, view it on GitHub
<#4573 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AAA6C37K3T65TLMDQ3YNOAT2LN7C3AVCNFSM6AAAAABVOR3HWOVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDMMBQHAYDKNZVGU>
.
You are receiving this because your review was requested.Message ID:
***@***.***>
|
casibbald
reviewed
Jan 19, 2025
mproffitt
force-pushed
the
styling-cleanup
branch
from
78aa85e to
6b19b10
Compare
|
Updated the description to include the latest commit references. I'd definitely prefer a rebase for this over a squash, then we can pick apart ones that may cause issues later. |
casibbald
approved these changes
Jan 19, 2025
In the original UI the thumb on the graph slider was centred on the slider itself. At some point, a change to one of the dependant libraries forced this slider out by 9 pixels causing it to look out of place and badly styled. This commit centres the thumb back on to the slider resulting in a cleaner look.
By default the graph is zoomed at 85%. This is really closely zoomed and seems too much for average viewing. By reducing the default zoom to 75%, more of the graph is initially visible whilst remaining legible on higher resolution monitors
The switch to Material UI 5 broke some of the styling on the sync controls. This commit cleans that up and sets a better disabled state for the `resume` button by setting the colour to be the same as for other sync control buttons rather than using the same colour as the enabled state.
The resume icon was offset inside the circle by 2 pixels causing it to look slightly out of place compared to other sync control icons.
When clicking on the User Icon in the top right, the menu appeared more towards the centre of the screen. This seemed out of place for where it was expected to be. This commit places it more underneath the profile icon, more inline with what you expect for a menu.
When switched from MUI 4 to 5, the Alert moved from `@mui/lab` to `@mui/material`. This resulted in errors being visible in the console relating to this, and poor future compatibility. By moving the import for Alert to `@mui/material` this improves compatibility with future changes to the material ui library. In addition to this, changes were made to the AlertList errors page to remove the duplication of the alert icon, and re-style the dark mode error state, relying more on functionality from the library rather than duplicating behaviour and adding redundant elements. - Set cleaner colors for the message and icon - Remove 'clusterName: ' if clusterName not set - Remove duplicate icon - this is set by MUI Alert and doesn't need to be in body of message
When the change to Material UI 5 was implemented, this resulted in a white background in dark mode on the sidebar when the YAML view drawer was opened. This commit modifies the styling on the drawer to improve the visual appearence of the drawer in dark mode.
When the search box is collapsed, it showed as a wrapper around the filter button that looked out of place and rather ugly. This changes the behaviour of how the search field is shown and hidden to better interact with the UI by setting it more to invisible when collapsed, and changing the transition from `ease-in-out` to `cubic bezier`. This comes across as more smooth in display and fits better with the theme.
In the sidebar, the hover state for links wasn't very clear and produced a very narrow background that was specific to the text location. This looked odd for wrapped text. This commit changes that to span the whole sidebar link to better highlight the link without looking out of place. A similar behaviour has been added for tabs in the subtab page
This commit re-introduces fixes for button and thumb hover states Previously these had a subtle but clear highlight state on hover. This change re-introduces hover states in both dark and light modes
mproffitt
force-pushed
the
styling-cleanup
branch
from
6b19b10 to
3b42285
Compare
This was referenced Jan 26, 2025
This was referenced Feb 4, 2025
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What changed?
This PR cleans up a number of stylistic issues I have noticed in the UI.
Each style change is a distinct commit on the PR to aid in isolation and be able to describe what each change is as part of its commit rather than trying to raise each one as a separate PR.
Why was this change made?
Whilst browsing the UI I have noticed a number of stylistic issues, particularly in Dark mode that in some cases are the result of the switch from Material UI 4 to Material UI 5.
6b19b10a6Button styling fixes2f4024ef1Link hover states for sidebar and tabs5c8c3ce4fSearch field showed as wrapper to filter button9121cd8a6Styling changes for light mode to make it less harsh54e909083YAML sidebar in dark moded9e5edb43Fix alerts import and styling44fdac8dfBetter placing for User details dropdown4e0db75fcBetter centring for the resume icon01c770cc1Clean up theming of sync controls98fead114Set default zoom level down to 75% from 85%49ff2db5fSet graph thumb to centre on the sliderEach of these commits contains additional information about why the change was made. Please see the commit log for details.
How did you validate the change?
Local testing, ensuring close compatibility with existing unit tests, clicking around in the UI
Release notes
N/A
Documentation Changes
N/A