Dashboard style updates to match mockups (#9857)

* widget formatting

* tab panel style

* breadcrumb padding

* dark theme colors

* Addressing comments

* move colors to theme.ts

* update properties widget colors

* update color names

src/sql/base/browser/ui/breadcrumb/breadcrumb.component.ts

@@ -16,7 +16,7 @@ import { subscriptionToDisposable } from 'sql/base/browser/lifecycle';
 @Component({
 	selector: 'breadcrumb',
 	template: `
-				<span style="display: flex; flex-flow: row; align-items: center; margin: 10px">
+				<span class="breadcrumb-container">
 					<ng-template ngFor let-item let-first="first" let-last="last" [ngForOf]="menuItems">
 						<span style="padding: 5px; display: flex; align-items: center">
 							<span *ngIf="item.icon" class="codicon" style="display: inline-block; margin-right: 5px" [ngClass]="item.icon"></span>

src/sql/base/browser/ui/breadcrumb/media/breadcrumb.css

@@ -30,3 +30,11 @@ breadcrumb .chevron-right.codicon {
 breadcrumb .router-link {
 	cursor: pointer;
 }
+
+breadcrumb .breadcrumb-container {
+	display: flex;
+	flex-flow: row;
+	align-items: center;
+	margin: 10px;
+	margin-left: 19px
+}

src/sql/base/browser/ui/panel/media/panel.css

@@ -58,7 +58,7 @@ panel {
 }
 
 .tabbedPanel.vertical .tabList .tab .tabLabel {
-	font-size: 12px;
+	font-size: 13px;
 	padding-bottom: 0px;
 	font-weight: normal;
 }
@@ -80,6 +80,7 @@ panel {
 	display: block;
 	min-width: 150px;
 	line-height: 35px;
+	padding-left: 22px;
 }
 
 .tabbedPanel .tabList .tab .tabIcon.codicon {
@@ -152,13 +153,13 @@ panel {
 }
 
 .tabbedPanel .tab-group-header {
-	font-weight: bold;
+	font-weight: 600;
-	margin: 15px 5px 3px 5px;
+	font-size: 14px;
-	line-height: 35px;
+	margin: 15px 24px 3px 24px;
+	line-height: 20px;
 	height: 35px;
 	border-style: solid;
 	border-width: 0 0 1px 0;
-	border-color: rgb(214, 214, 214);
 }
 
 .tabbedPanel .vertical-tab-action-container {

src/sql/workbench/contrib/dashboard/browser/contents/dashboardWidgetWrapper.css

@@ -19,6 +19,9 @@ dashboard-widget-wrapper .widgetHeader {
 	display: flex;
 	flex: 0 0;
 	padding: 3px 0 3px 0;
+	font-weight: 600;
+	font-size: 14px;
+	line-height: 20px;
 }
 
 dashboard-widget-wrapper .icon {

src/sql/workbench/contrib/dashboard/browser/core/dashboardPanelStyles.ts

@@ -6,22 +6,20 @@
 import 'vs/css!./dashboardPanel';
 import { registerThemingParticipant, IColorTheme, ICssStyleCollector } from 'vs/platform/theme/common/themeService';
 import {
-	TAB_ACTIVE_BACKGROUND, TAB_ACTIVE_FOREGROUND, TAB_INACTIVE_BACKGROUND,
+	TAB_ACTIVE_BACKGROUND, TAB_INACTIVE_BACKGROUND,
-	TAB_INACTIVE_FOREGROUND, EDITOR_GROUP_HEADER_TABS_BACKGROUND, TAB_BORDER, EDITOR_GROUP_BORDER, DASHBOARD_TAB_ACTIVE_BACKGROUND, DASHBOARD_BORDER
+	TAB_INACTIVE_FOREGROUND, EDITOR_GROUP_HEADER_TABS_BACKGROUND, TAB_BORDER, EDITOR_GROUP_BORDER, VERTICAL_TAB_ACTIVE_BACKGROUND, DASHBOARD_BORDER, DASHBOARD_WIDGET_SUBTEXT, TAB_LABEL, TAB_GROUP_HEADER, DASHBOARD_WIDGET_TITLE, DASHBOARD_PROPERTIES_NAME
 } from 'vs/workbench/common/theme';
 import { activeContrastBorder } from 'vs/platform/theme/common/colorRegistry';
 
 registerThemingParticipant((theme: IColorTheme, collector: ICssStyleCollector) => {
 	// Title Active
 	const tabActiveBackground = theme.getColor(TAB_ACTIVE_BACKGROUND);
-	const tabActiveForeground = theme.getColor(TAB_ACTIVE_FOREGROUND);
+	const tabActiveBackgroundVertical = theme.getColor(VERTICAL_TAB_ACTIVE_BACKGROUND);
-	let tabActiveBackgroundVertical = theme.getColor(DASHBOARD_TAB_ACTIVE_BACKGROUND);
 
-	if (tabActiveBackground || tabActiveForeground) {
+	if (tabActiveBackground) {
 		collector.addRule(`
 			panel.dashboard-panel > .tabbedPanel > .title .tabList .tab:hover .tabLabel,
 			panel.dashboard-panel > .tabbedPanel > .title .tabList .tab .tabLabel.active {
-				color: ${tabActiveForeground};
 				border-bottom: 0px solid;
 			}
 
@@ -68,6 +66,26 @@ registerThemingParticipant((theme: IColorTheme, collector: ICssStyleCollector) =
 		`);
 	}
 
+	// tab label
+	const tabLabelColor = theme.getColor(TAB_LABEL);
+	if (tabLabelColor) {
+		collector.addRule(`.tabbedPanel.vertical > .title .tabList .tabLabel {
+			color: ${tabLabelColor}
+		}`);
+
+		collector.addRule(`properties-widget .propertiesValue {
+			color: ${tabLabelColor}
+		}`);
+	}
+
+	// tab group header
+	const tabGroupHeader = theme.getColor(TAB_GROUP_HEADER);
+	if (tabGroupHeader) {
+		collector.addRule(`.tabbedPanel .tab-group-header {
+			border-color: ${tabGroupHeader};
+		}`);
+	}
+
 	// Panel title background
 	const panelTitleBackground = theme.getColor(EDITOR_GROUP_HEADER_TABS_BACKGROUND);
 	if (panelTitleBackground) {
@@ -125,4 +143,28 @@ registerThemingParticipant((theme: IColorTheme, collector: ICssStyleCollector) =
 			border-right-color: ${sideBorder};
 		}`);
 	}
+
+	// widget title
+	const widgetTitle = theme.getColor(DASHBOARD_WIDGET_TITLE);
+	if (widgetTitle) {
+		collector.addRule(`dashboard-widget-wrapper .header {
+			color: ${widgetTitle};
+		}`);
+	}
+
+	// widget subtext
+	const subText = theme.getColor(DASHBOARD_WIDGET_SUBTEXT);
+	if (subText) {
+		collector.addRule(`.subText {
+			color: ${subText};
+		}`);
+	}
+
+	// properties name
+	const propertiesName = theme.getColor(DASHBOARD_PROPERTIES_NAME);
+	if (propertiesName) {
+		collector.addRule(`properties-widget .propertiesName {
+			color: ${propertiesName}
+		}`);
+	}
 });

src/sql/workbench/contrib/dashboard/browser/widgets/insights/insightsWidget.component.ts

@@ -2,6 +2,7 @@
  *  Copyright (c) Microsoft Corporation. All rights reserved.
  *  Licensed under the Source EULA. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
+import 'vs/css!./insightsWidget';
 
 import {
 	Component, Inject, forwardRef, AfterContentInit,
@@ -46,7 +47,7 @@ interface IStorageResult {
 	selector: 'insights-widget',
 	template: `
 				<div *ngIf="error" style="text-align: center; padding-top: 20px">{{error}}</div>
-				<div *ngIf="lastUpdated" style="font-style: italic; font-size: 80%; margin-left: 5px">{{lastUpdated}}</div>
+				<div *ngIf="lastUpdated" class="insights-widget-last-updated subText">{{lastUpdated}}</div>
 				<div *ngIf="autoRefreshStatus" style="font-style: italic; font-size: 80%; margin-left: 5px">{{autoRefreshStatus}}</div>
 				<div style="margin: 10px; width: calc(100% - 20px); height: calc(100% - 20px)">
 					<ng-template *ngIf="!_loading" component-host></ng-template>

src/sql/workbench/contrib/dashboard/browser/widgets/insights/insightsWidget.css

@@ -0,0 +1,9 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+.insights-widget-last-updated {
+	font-size: 10px;
+	margin-left: 5px;
+}

src/sql/workbench/contrib/dashboard/browser/widgets/properties/propertiesWidget.component.html

@@ -11,8 +11,8 @@
 		<span #child style="white-space : nowrap; width: fit-content">
 			<ng-template ngFor let-item [ngForOf]="properties">
 				<span style="margin-left: 10px; display: inline-block;">
-					<div style="font-size: 11px;">{{item.displayName}}</div>
+					<div class="propertiesName" style="font-size: 11px;">{{item.displayName}}</div>
-					<div>{{item.value}}</div>
+					<div class="propertiesValue">{{item.value}}</div>
 				</span>
 			</ng-template>
 		</span>

src/vs/workbench/common/theme.ts

@@ -595,14 +595,44 @@ export const WINDOW_INACTIVE_BORDER = registerColor('window.inactiveBorder', {
 // {{SQL CARBON EDIT}}
 // < --- Dashboard --- >
 
-export const DASHBOARD_TAB_ACTIVE_BACKGROUND = registerColor('dashboard.tabActiveBackground', {
+export const VERTICAL_TAB_ACTIVE_BACKGROUND = registerColor('tab.verticalTabActiveBackground', {
 	dark: '#444444',
 	light: '#e1f0fe',
 	hc: TAB_ACTIVE_BACKGROUND
-}, nls.localize('dashboardTabActiveBackground', "Active tab background color for dashboard navigation"));
+}, nls.localize('verticalTabActiveBackground', "Active tab background color for vertical tabs"));
 
 export const DASHBOARD_BORDER = registerColor('dashboard.border', {
 	dark: '#8A8886',
 	light: '#DDDDDD',
 	hc: contrastBorder
 }, nls.localize('dashboardBorder', "Color for borders in dashboard"));
+
+export const TAB_LABEL = registerColor('tab.tabLabel', {
+	light: '#000000',
+	dark: 'FFFFFF',
+	hc: 'FFFFFF'
+}, nls.localize('tabLabel', "Color of tab label"));
+
+export const TAB_GROUP_HEADER = registerColor('tab.tabGroupHeader', {
+	light: '#dddddd',
+	dark: '#dddddd',
+	hc: '#FFFFFF'
+}, nls.localize('tabGroupHeader', "Color of tab group header"));
+
+export const DASHBOARD_WIDGET_TITLE = registerColor('dashboardWidget.title', {
+	light: '#323130',
+	dark: '#FFFFFF',
+	hc: '#FFFFFF'
+}, nls.localize('dashboardWidget', 'Color of dashboard widget title'));
+
+export const DASHBOARD_WIDGET_SUBTEXT = registerColor('dashboardWidget.subText', {
+	light: '#484644',
+	dark: '#8A8886',
+	hc: '#FFFFFF'
+}, nls.localize('dashboardWidgetSubtext', "Color for dashboard widget subtext"));
+
+export const DASHBOARD_PROPERTIES_NAME = registerColor('dashboardWidget.propertiesName', {
+	light: '#161616',
+	dark: '#8A8886',
+	hc: '#FFFFFF'
+}, nls.localize('dashboardWidgetPropertiesName', "Color for dashboard properties widget names"));