Merge pull request #16556 from bgashler1/bgashler1/configurationStylePolish

Preferences style polish

src/vs/workbench/parts/preferences/browser/media/preferences.css

@@ -4,7 +4,6 @@
  *--------------------------------------------------------------------------------------------*/
 
 .settings-header-widget {
-	display: flex;
 	border-bottom: 1px solid #efefef;
 }
 
@@ -13,7 +12,23 @@
 }
 
 .settings-header-widget > .settings-header-container {
-	margin: 8px 0px 12px 0;
+	margin-top: 8px;
+	padding-left: 28px;
+	padding-right: 32px;
+}
+
+.settings-header-widget > .settings-search-container {
+	padding-left: 28px;
+	padding-right: 32px;
+	padding-bottom: 11px;
+	padding-top: 11px;
+}
+
+.vs .settings-header-widget > .settings-search-container {
+	background: #efeff2;
+}
+.vs-dark .settings-header-widget > .settings-search-container {
+	background: #2d2d30;
 }
 
 .settings-header-widget > .settings-header-container > .settings-title-container {
@@ -21,30 +36,48 @@
 }
 
 .settings-header-widget > .settings-header-container > .settings-title-container > .settings-info-container {
-	color: rgba(170, 170, 170, 1);
-	font-style: italic;
 	white-space: pre-wrap;
 	margin-bottom: 8px;
+	font-size: 12px;
 }
 
-.settings-header-widget > .settings-header-container > .settings-title-container > .settings-info-container span {
-	padding-right: 6px;
+.vs .settings-header-widget > .settings-header-container > .settings-title-container > .settings-info-container {
+	color: #6f6f6f;
+}
+.vs-dark .settings-header-widget > .settings-header-container > .settings-title-container > .settings-info-container {
+	color: #bbbbbb;
+}
+.hc-black .settings-header-widget > .settings-header-container > .settings-title-container > .settings-info-container {
+	color: white;
 }
 
-.settings-header-widget > .settings-header-container > .settings-search-container > .settings-search-input {
+.settings-header-widget > .settings-header-container > .settings-title-container > .settings-info-container .title-label {
+	text-transform: uppercase;
+	font-weight: bold;
+}
+
+.settings-header-widget > .settings-search-container > .settings-search-input {
 	vertical-align: middle;
 }
 
-.settings-header-widget > .settings-header-container > .settings-search-container > .settings-search-input > .monaco-inputbox {
+.settings-header-widget > .settings-search-container > .settings-search-input > .monaco-inputbox {
 	height: 30px;
 }
 
-.vs .settings-header-widget > .settings-header-container > .settings-search-container > .settings-search-input > .monaco-inputbox {
+.vs .settings-header-widget > .settings-search-container > .settings-search-input > .monaco-inputbox {
 	border: 1px solid #ddd;
 }
 
-.settings-header-widget > .settings-header-container > .settings-search-container > .settings-search-input > .monaco-inputbox .input {
+.settings-header-widget > .settings-search-container > .settings-search-input > .monaco-inputbox .input {
 	font-size: 14px;
+	padding-left:30px;
+	background-image: url('search.svg');
+	background-repeat: no-repeat;
+	background-position: 8px 50%;
+}
+
+.settings-header-widget > .settings-search-container > .settings-search-input > .monaco-inputbox .input {
+	background-image: url('search_inverse.svg');
 }
 
 .monaco-editor .settings-group-title-widget {
@@ -54,6 +87,17 @@
 .monaco-editor .settings-group-title-widget .title-container {
 	width: 100%;
 	cursor: pointer;
+	font-weight: bold;
+}
+
+.vs .monaco-editor .settings-group-title-widget .title-container {
+	color: #6f6f6f;
+}
+.vs-dark .monaco-editor .settings-group-title-widget .title-container {
+	color: #bbbbbb;
+}
+.hc-black .monaco-editor .settings-group-title-widget .title-container {
+	color: white;
 }
 
 .monaco-editor .settings-group-title-widget .title-container > * {

src/vs/workbench/parts/preferences/browser/media/search.svg

+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><defs><style>.cls-1{fill:#f6f6f6;fill-opacity:0;}.cls-2{fill:none;}.cls-3{fill:#424242;}</style></defs><title>Search_16x</title><path id="canvas" class="cls-1" d="M16,16H0V0H16Z"/><path id="outline" class="cls-2" d="M11.11,0a5.9,5.9,0,0,1-1,11.71,5.69,5.69,0,0,1-1.91-.33L3.57,16H2.68L0,13.36V12.2L4.51,7.72A5.68,5.68,0,0,1,4.2,5.81,5.91,5.91,0,0,1,9.09,0h2"/><path id="iconBg" class="cls-3" d="M1.32,13.07l1.61,1.61L7.75,9.86a3.82,3.82,0,0,0,2.42.8,4.83,4.83,0,1,0-4.8-4.83,3.48,3.48,0,0,0,.78,2.42ZM6.44,5.83a3.7,3.7,0,0,1,3.72-3.76,3.75,3.75,0,1,1,0,7.51A3.7,3.7,0,0,1,6.44,5.83"/><path id="iconFg" class="cls-2" d="M6.44,5.83a3.7,3.7,0,0,1,3.72-3.76,3.75,3.75,0,1,1,0,7.51A3.7,3.7,0,0,1,6.44,5.83"/></svg>
\ No newline at end of file

src/vs/workbench/parts/preferences/browser/media/search_inverse.svg

+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><defs><style>.cls-1{fill:#2d2d30;fill-opacity:0;}.cls-2{fill:none;}.cls-3{fill:#c5c5c5;}</style></defs><title>Search_16x</title><path id="canvas" class="cls-1" d="M16,16H0V0H16Z"/><path id="outline" class="cls-2" d="M11.11,0a5.9,5.9,0,0,1-1,11.71,5.69,5.69,0,0,1-1.91-.33L3.57,16H2.68L0,13.36V12.2L4.51,7.72A5.68,5.68,0,0,1,4.2,5.81,5.91,5.91,0,0,1,9.09,0h2"/><path id="iconBg" class="cls-3" d="M1.32,13.07l1.61,1.61L7.75,9.86a3.82,3.82,0,0,0,2.42.8,4.83,4.83,0,1,0-4.8-4.83,3.48,3.48,0,0,0,.78,2.42ZM6.44,5.83a3.7,3.7,0,0,1,3.72-3.76,3.75,3.75,0,1,1,0,7.51A3.7,3.7,0,0,1,6.44,5.83"/><path id="iconFg" class="cls-2" d="M6.44,5.83a3.7,3.7,0,0,1,3.72-3.76,3.75,3.75,0,1,1,0,7.51A3.7,3.7,0,0,1,6.44,5.83"/></svg>
\ No newline at end of file

src/vs/workbench/parts/preferences/browser/preferencesWidgets.ts

@@ -89,7 +89,7 @@ export class SettingsGroupTitleWidget extends Widget implements IViewZone {
 
 	private layout(): void {
 		this.titleContainer.style.lineHeight = this.editor.getConfiguration().lineHeight + 3 + 'px';
-		this.titleContainer.style.fontSize = this.editor.getConfiguration().fontInfo.fontSize + 3 + 'px';
+		this.titleContainer.style.fontSize = this.editor.getConfiguration().fontInfo.fontSize + 'px';
 		const iconSize = this.getIconSize();
 		this.icon.style.height = `${iconSize}px`;
 		this.icon.style.width = `${iconSize}px`;
@@ -189,15 +189,14 @@ export class DefaultSettingsHeaderWidget extends Widget {
 	private create(parent: HTMLElement) {
 		this.domNode = DOM.append(parent, DOM.$('div.settings-header-widget'));
 		this.headerContainer = DOM.append(this.domNode, DOM.$('div.settings-header-container'));
-		this.headerContainer.style.paddingLeft = '28px';
-		this.headerContainer.style.paddingRight = '32px';
 		const titleContainer = DOM.append(this.headerContainer, DOM.$('div.settings-title-container'));
 		this.createInfoContainer(DOM.append(titleContainer, DOM.$('div.settings-info-container')));
-		this.createSearchContainer(DOM.append(this.headerContainer, DOM.$('div.settings-search-container')));
+		this.createSearchContainer(DOM.append(this.domNode, DOM.$('div.settings-search-container')));
 	}
 
 	private createInfoContainer(infoContainer: HTMLElement) {
-		DOM.append(infoContainer, DOM.$('span')).textContent = localize('defaultSettingsInfo', "Overwrite settings by placing them into your settings file.");
+		DOM.append(infoContainer, DOM.$('span.title-label')).textContent = localize('defaultSettingsTitle', "Default Settings");
+		DOM.append(infoContainer, DOM.$('span')).textContent = localize('defaultSettingsInfo', " - Overwrite these by placing them into your settings file");
 	}
 
 	private createSearchContainer(searchContainer: HTMLElement) {
@@ -220,7 +219,7 @@ export class DefaultSettingsHeaderWidget extends Widget {
 	}
 
 	public layout(dimension: Dimension): void {
-		this.inputBox.width = dimension.width - 65;
+		this.inputBox.width = dimension.width - 62;
 	}
 
 	private _onKeyUp(keyboardEvent: IKeyboardEvent): void {