Conversation
There was a problem hiding this comment.
Code Review
This pull request implements a comprehensive UI theme update, transitioning the editor's visual style from a multi-color palette (yellow, blue, and primary-main) to a more unified grey and turquoise (primary) theme. Key changes include restyling the navbar, panels, buttons, and tabs to use consistent grey tokens, updating SVG icons to use currentColor, and unifying semantic colors for sprites, sounds, and stages. Feedback focuses on maintaining color consistency across interactive elements, specifically regarding hover states for history buttons and ensuring all background colors align with the new primary theme.
|
|
||
| const historyBtnClz = | ||
| 'h-full flex items-center justify-center border-none bg-transparent px-5 text-white outline-none disabled:cursor-not-allowed disabled:text-[#9de6ec] enabled:hover:cursor-pointer enabled:hover:bg-primary-600' | ||
| 'h-full flex items-center justify-center border-none bg-transparent px-5 text-inherit outline-none disabled:cursor-not-allowed disabled:text-grey-700 enabled:hover:cursor-pointer enabled:hover:text-grey-900' |
There was a problem hiding this comment.
The hover text color grey-900 is lighter than the base text-inherit (which resolves to grey-1000 from the navbar wrapper). This is inconsistent with other interactive elements in this PR (like the plus buttons or tab items) which darken on hover. Consider using a lighter base color like grey-800 or grey-900 and darkening to grey-1000 on hover.
'h-full flex items-center justify-center border-none bg-transparent px-5 text-grey-800 outline-none disabled:cursor-not-allowed disabled:text-grey-700 enabled:hover:cursor-pointer enabled:hover:text-grey-1000'
| v-radar="{ name: 'Stage overview', desc: 'Overview of the stage, click to view stage details' }" | ||
| class="relative h-14 w-14 cursor-pointer flex items-center justify-center rounded-sm bg-grey-300" | ||
| :class="active ? 'border-2 border-stage-main bg-blue-200 p-0' : 'p-0.5 hover:bg-grey-400'" | ||
| :class="active ? 'border-2 border-primary-main bg-blue-200 p-0' : 'p-0.5 hover:bg-grey-400'" |
There was a problem hiding this comment.
The background color bg-blue-200 should be updated to bg-primary-200 to align with the new turquoise-based theme and the changes made to semantic colors in colors.ts where stage now uses primary tokens.
:class="active ? 'border-2 border-primary-main bg-primary-200 p-0' : 'p-0.5 hover:bg-grey-400'"
close #2691.