Update CSS styles for improved UI consistency#8476
Conversation
There was a problem hiding this comment.
Pull request overview
This pull request updates CSS styles across multiple webview files to improve visual consistency in the UI. The changes standardize border-radius values and background colors throughout the application.
Changes:
- Standardized border-radius values:
2px → 4pxfor buttons/inputs,3px → 6pxfor panels/containers, and4px → 6pxfor status checks - Updated background colors from
editorWidget-backgroundtopanel-backgroundfor better consistency - Implemented custom checkbox styling with a checkmark indicator using CSS pseudo-elements and the
:has()selector
Reviewed changes
Copilot reviewed 5 out of 5 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| webviews/editorWebview/index.css | Updated border-radius (3px→6px, 4px→6px) and background colors for review comments, status items, merge containers, code blocks, and Box headers |
| webviews/createPullRequestViewNew/index.css | Added border-radius and margin-top styling to validation error/warning messages with updated padding |
| webviews/components/automergeSelect.tsx | Added checkbox-wrapper class to enable custom checkbox styling |
| webviews/common/common.css | Updated button/input border-radius (2px→4px), implemented custom checkbox appearance with checkmark, and updated automerge section styling |
| webviews/activityBarView/index.css | Updated textarea border-radius from 2px to 4px |
| background-color: var(--vscode-inputValidation-errorBackground); | ||
| color: var(--vscode-inputValidation-errorForeground); | ||
| border-radius: 4px; | ||
| margin-top: 4px |
There was a problem hiding this comment.
Missing semicolon at the end of the margin-top property. This should be "margin-top: 4px;" to ensure valid CSS syntax.
| background-color: var(--vscode-inputValidation-warningBackground); | ||
| color: var(--vscode-inputValidation-warningForeground); | ||
| border-radius: 4px; | ||
| margin-top: 4px |
There was a problem hiding this comment.
Missing semicolon at the end of the margin-top property. This should be "margin-top: 4px;" to ensure valid CSS syntax.
| .checkbox-wrapper:has(input:checked)::after { | ||
| opacity: 1; |
There was a problem hiding this comment.
The :has() pseudo-class has limited browser support and may not work in older versions of VS Code's embedded browser (Electron). Consider using JavaScript to toggle a class on the wrapper when the checkbox is checked, or test thoroughly to ensure this works in the minimum supported VS Code version. If VS Code's Electron version supports :has(), this should be fine, but it's worth verifying.
| @@ -851,8 +851,8 @@ button.secondary.change-base { | |||
| padding: 16px; | |||
| background-color: var(--vscode-editorHoverWidget-background); | |||
There was a problem hiding this comment.
This element still uses var(--vscode-editorHoverWidget-background) while most other similar elements in the PR were updated to use var(--vscode-panel-background) for consistency. The border-radius was updated on this line's rule set, but the background color was not. Consider whether this should also be changed to var(--vscode-panel-background) for consistency with the other changes in this PR (e.g., lines 175, 252, 318, 335, 381, 437, 1212, 1420).
| background-color: var(--vscode-editorHoverWidget-background); | |
| background-color: var(--vscode-panel-background); |
Enhance the user interface by updating CSS styles for consistency, including adjustments to checkbox appearance and border-radius values across various components. This improves the overall visual coherence of the application.