Update CSS styles for improved UI consistency and adjust checkbox appearance (#8476)

Co-authored-by: mrleemurray <lee.murray@microsoft.com>

Author: mrleemurray

webviews/activityBarView/index.css

@@ -10,7 +10,7 @@ body {
 textarea {
 	min-height: 80px;
 	max-height: 500px;
-	border-radius: 2px;
+	border-radius: 4px;
 }
 
 .form-actions {

webviews/common/common.css

@@ -25,9 +25,9 @@ button,
 input[type='submit'] {
 	color: var(--vscode-button-foreground);
 	font-family: var(--vscode-font-family);
-	border-radius: 2px;
+	border-radius: 4px;
 	border: 1px solid transparent;
-	padding: 4px 12px;
+	padding: 3px 12px;
 	font-size: 13px;
 	line-height: 18px;
 	white-space: nowrap;
@@ -40,11 +40,11 @@ input[type='submit'] {
 }
 
 input.select-left {
-	border-radius: 2px 0 0 2px;
+	border-radius: 4px 0 0 4px;
 }
 
 button.select-right {
-	border-radius: 0 2px 2px 0;
+	border-radius: 0 4px 4px 0;
 	width: 24px;
 	position: relative;
 }
@@ -96,7 +96,7 @@ input[type='text'] {
 	background-color: var(--vscode-input-background);
 	color: var(--vscode-input-foreground);
 	font-family: var(--vscode-font-family);
-	border-radius: 2px;
+	border-radius: 4px;
 }
 
 textarea::placeholder,
@@ -108,7 +108,7 @@ select {
 	display: block;
 	box-sizing: border-box;
 	padding: 4px 8px;
-	border-radius: 2px;
+	border-radius: 4px;
 	font-size: 13px;
 	border: 1px solid var(--vscode-dropdown-border);
 	background-color: var(--vscode-dropdown-background);
@@ -117,15 +117,64 @@ select {
 
 textarea:focus,
 input[type='text']:focus,
-input[type='checkbox']:focus,
 select:focus {
 	outline: 1px solid var(--vscode-focusBorder);
 }
 
 input[type='checkbox'] {
+	appearance: none;
+	-webkit-appearance: none;
+	-moz-appearance: none;
+	width: 18px;
+	height: 18px;
+	min-width: 18px;
+	min-height: 18px;
+	flex-shrink: 0;
+	margin: 0;
+	border: 1px solid var(--vscode-checkbox-border);
+	background-color: var(--vscode-checkbox-background);
+	border-radius: 3px;
+	cursor: pointer;
+	outline: none;
+}
+
+input[type='checkbox']:checked {
+	background-color: var(--vscode-checkbox-selectBackground, var(--vscode-checkbox-background));
+}
+
+.checkbox-wrapper {
+	position: relative;
+	display: flex;
+	align-items: center;
+}
+
+.checkbox-wrapper::after {
+	content: '';
+	position: absolute;
+	top: 1px;
+	left: 6px;
+	width: 5px;
+	height: 10px;
+	border: solid var(--vscode-checkbox-foreground);
+	border-width: 0 1px 1px 0;
+	transform: rotate(45deg);
+	pointer-events: none;
+	opacity: 0;
+}
+
+.checkbox-wrapper:has(input:checked)::after {
+	opacity: 1;
+}
+
+input[type='checkbox']:focus {
+	outline: 1px solid var(--vscode-focusBorder);
 	outline-offset: 1px;
 }
 
+input[type='checkbox']:not(:checked):hover {
+	background-color: var(--vscode-inputOption-hoverBackground);
+}
+
 .vscode-high-contrast input[type='checkbox'] {
 	outline: 1px solid var(--vscode-contrastBorder);
 }
@@ -283,9 +332,9 @@ body img.avatar {
 #status-checks .automerge-section {
 	align-items: center;
 	padding: 16px;
-	background: var(--vscode-editorHoverWidget-background);
-	border-bottom-left-radius: 3px;
-	border-bottom-right-radius: 3px;
+	background: var(--vscode-panel-background);
+	border-bottom-left-radius: 6px;
+	border-bottom-right-radius: 6px;
 }
 
 .automerge-section .merge-select-container {
@@ -371,7 +420,7 @@ body img.avatar {
 }
 
 button.split-left {
-	border-radius: 2px 0 0 2px;
+	border-radius: 4px 0 0 4px;
 	flex-grow: 1;
 	overflow: hidden;
 	white-space: nowrap;
@@ -407,7 +456,7 @@ button.split-left {
 }
 
 button.split-right {
-	border-radius: 0 2px 2px 0;
+	border-radius: 0 4px 4px 0;
 	cursor: pointer;
 	width: 24px;
 	position: relative;

webviews/components/automergeSelect.tsx

@@ -48,7 +48,7 @@ export const AutoMerge = ({
 
 	return (
 		<div className="automerge-section">
-			<div className="automerge-checkbox-wrapper">
+			<div className="automerge-checkbox-wrapper checkbox-wrapper">
 				<input
 					id="automerge-checkbox"
 					type="checkbox"

webviews/createPullRequestViewNew/index.css

@@ -181,17 +181,21 @@ textarea {
 }
 
 .validation-error {
-	padding: 5px;
+	padding: 3px 5px;
 	border: 1px solid var(--vscode-inputValidation-errorBorder);
 	background-color: var(--vscode-inputValidation-errorBackground);
 	color: var(--vscode-inputValidation-errorForeground);
+	border-radius: 4px;
+	margin-top: 4px
 }
 
 .validation-warning {
-	padding: 5px;
+	padding: 3px 5px;
 	border: 1px solid var(--vscode-inputValidation-warningBorder);
 	background-color: var(--vscode-inputValidation-warningBackground);
 	color: var(--vscode-inputValidation-warningForeground);
+	border-radius: 4px;
+	margin-top: 4px
 }
 
 .below-input-error {

webviews/editorWebview/index.css

@@ -172,17 +172,17 @@ body .comment-container .review-comment-header {
 	padding: 8px 16px;
 	color: var(--vscode-foreground);
 	align-items: center;
-	background: var(--vscode-editorWidget-background);
-	border-top-left-radius: 3px;
-	border-top-right-radius: 3px;
+	background: var(--vscode-panel-background);
+	border-top-left-radius: 6px;
+	border-top-right-radius: 6px;
 	overflow: hidden;
 	text-overflow: ellipsis;
 	white-space: nowrap;
 }
 
 .review-comment-header.no-details {
-	border-bottom-left-radius: 3px;
-	border-bottom-right-radius: 3px;
+	border-bottom-left-radius: 0px;
+	border-bottom-right-radius: 0px;
 }
 
 .description-header {
@@ -249,9 +249,9 @@ body .comment-container .review-comment-header {
 }
 
 .status-item:first-of-type {
-	background: var(--vscode-editorWidget-background);
-	border-top-left-radius: 3px;
-	border-top-right-radius: 3px;
+	background: var(--vscode-panel-background);
+	border-top-left-radius: 6px;
+	border-top-right-radius: 6px;
 }
 
 .status-item,
@@ -315,9 +315,9 @@ button.input-box {
 .merge-queue-container,
 .ready-for-review-container {
 	padding: 16px;
-	background-color: var(--vscode-editorWidget-background);
-	border-bottom-left-radius: 3px;
-	border-bottom-right-radius: 3px;
+	background-color: var(--vscode-panel-background);
+	border-bottom-left-radius: 6px;
+	border-bottom-right-radius: 6px;
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
@@ -344,7 +344,7 @@ button.input-box {
 
 #status-checks {
 	border: 1px solid var(--vscode-editorHoverWidget-border);
-	border-radius: 4px;
+	border-radius: 6px;
 }
 
 #status-checks .label {
@@ -378,9 +378,9 @@ button.input-box {
 #status-checks .merge-select-container {
 	display: flex;
 	align-items: center;
-	background-color: var(--vscode-editorWidget-background);
-	border-bottom-left-radius: 3px;
-	border-bottom-right-radius: 3px;
+	background-color: var(--vscode-panel-background);
+	border-bottom-left-radius: 6px;
+	border-bottom-right-radius: 6px;
 }
 
 #status-checks .merge-select-container>* {
@@ -434,7 +434,7 @@ body .diff .diffPath {
 .comment-container form,
 #merge-comment-form {
 	padding: 16px;
-	background-color: var(--vscode-editorWidget-background);
+	background-color: var(--vscode-panel-background);
 }
 
 body .comment-container .comment-body,
@@ -827,7 +827,7 @@ button.secondary.change-base {
 	display: flex;
 	margin: 0;
 	align-items: center;
-	border-radius: 4px;
+	border-radius: 6px;
 	border: 1px solid var(--vscode-editorHoverWidget-border);
 }
 
@@ -851,8 +851,8 @@ button.secondary.change-base {
 	padding: 16px;
 	background-color: var(--vscode-editorHoverWidget-background);
 	border-top: 1px solid var(--vscode-editorHoverWidget-border);
-	border-bottom-left-radius: 3px;
-	border-bottom-right-radius: 3px;
+	border-bottom-left-radius: 6px;
+	border-bottom-right-radius: 6px;
 }
 
 .review-comment-container .review-comment .review-comment-header {
@@ -1104,7 +1104,7 @@ code {
 .comment-body pre:not(.hljs),
 .comment-body pre.hljs code>div {
 	padding: 16px;
-	border-radius: 3px;
+	border-radius: 6px;
 	overflow: auto;
 }
 
@@ -1209,9 +1209,9 @@ code {
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
-	background: var(--vscode-editorWidget-background);
-	border-top-left-radius: 3px;
-	border-top-right-radius: 3px;
+	background: var(--vscode-panel-background);
+	border-top-left-radius: 6px;
+	border-top-right-radius: 6px;
 }
 
 .resolved-container .diffPath:hover {
@@ -1417,14 +1417,14 @@ code {
 }
 
 .comment-body .Box-header {
-	background-color: var(--vscode-editorWidget-background);
+	background-color: var(--vscode-panel-background);
 	color: var(--vscode-disabledForeground);
 	border-bottom-style: solid;
 	border-bottom-width: 1px;
 	padding: 8px 16px;
 	border-bottom-color: var(--vscode-editorHoverWidget-border);
-	border-top-left-radius: 3px;
-	border-top-right-radius: 3px;
+	border-top-left-radius: 6px;
+	border-top-right-radius: 6px;
 }
 
 .comment-body .blob-num {