fix(ui): unify modal titlebar styles and improve dark mode adaptation - #36
Merged
Conversation
- Add CSS variables for dialog-shadow, status-bar colors, overlay colors - Add dark mode overrides for all newly added variables - Fix generic dialog: add background, color, overflow-y, remove hardcoded padding - Add unified .modal-titlebar / .modal-close-btn / .modal-title pattern - Apply unified pattern to all 5 modals (Create Worktree, LLM Settings, Import Worktree, Start Instance, Resource Monitor) - Remove parallel .monitor-titlebar/.monitor-close-btn/.monitor-title - Convert #connection-overlay inline styles to CSS class with variables - Fix JS hardcoded error color in Import Worktree modal - Fix .wt-item.active box-shadow to use CSS variable - Fix .wt-action-btn:hover to use var(--hover-bg) - Fix #status-bar hardcoded colors - Fix button.primary hardcoded border - Fix .tab .tab:hover .tab.active CSS nesting indentation - Add 2px thin horizontal scrollbar for #tabs-container - Add overflow-y: hidden to prevent vertical scrollbar flash - Fix .tab-rename-input undefined --bg-primary variable
This file contains hidden or 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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
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.
Summary
This PR improves UI dark/light mode adaptation and unifies modal dialog styling across the entire application.
Dark/Light Mode Fixes
background: var(--main-bg)andcolor: var(--text-primary)to genericdialogrule#status-barused hardcodedrgba(0,0,0,0.5)and#ccc--status-bar-bg/--status-bar-textvariables with dark mode overrides.wt-action-btn:hoverused hardcodedrgba(0,0,0,0.1)(invisible in dark mode)var(--hover-bg).wt-item.activebox-shadow usedrgba(0,0,0,0.05)(negligible in dark mode)var(--shadow)with dark mode overridebutton.primaryborder usedrgba(27,31,35,0.15)var(--button-border)#connection-overlayinline styles with hardcoded colors--overlay-bg/--overlay-textvariables.conn-subused--text-secondaryon dark overlay (low contrast)--overlay-text#cb2431in Import Worktree modalvar(--danger-text)UI Design Improvements
.modal-titlebar/.modal-close-btn/.modal-titlepattern to all 5 modals#modal-monitorpreviously used.monitor-titlebar/.monitor-close-btn/.monitor-title— now unified.tab:hover/.tab.activeindentation fix.tab.drag-overrule, now properly independentScrollbar Fixes
overflow-y: hiddento#tabs-containerto eliminate unwanted vertical scrollbar::-webkit-scrollbarwith 2px thin horizontal scrollbar stylingNew CSS Variables
Added in
:rootwith dark mode overrides:--shadow,--dialog-shadow,--status-bar-bg,--status-bar-text,--overlay-bg,--overlay-textFiles Changed
internal/ui/static/index.html(1 file, +272/-156 lines)Testing