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;
-	margin: 15px 5px 3px 5px;
-	line-height: 35px;
+	font-weight: 600;
+	font-size: 14px;
+	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 {