connect dialog ux improvement (#3105)

* connect dialog ux improvement

* more style updates

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

@@ -56,6 +56,7 @@
 
 .modal .modal-title {
 	font-size: 15px;
+	font-weight: 600;
 }
 
 .modal .modal-title-icon {
@@ -147,7 +148,7 @@
 }
 
 .modal .footer-button {
-	margin-right: 5px;
+	margin-left: 5px;
 }
 
 .modal .right-footer .footer-button:last-of-type {

src/sql/base/browser/ui/modal/media/optionsDialog.css

@@ -20,11 +20,34 @@
 }
 
 .optionsDialog-options-groups {
-	padding: 15px;
-	height: calc(100% - 150px);
+	margin-top: 10px;
+	flex: 1 1;
 	overflow-y: auto;
 }
 
+.optionsDialog-options-groups {
+	margin: 10px 0px;
+	flex: 1 1;
+	overflow-y: auto;
+}
+
+.vs .optionsDialog-options-groups {
+	box-shadow: 0 1px 4px 1px rgba(220, 220, 220, 0.71);
+}
+
+.vs-dark .optionsDialog-options-groups {
+	box-shadow: 0 4px 5px 0px rgba(0, 0, 0, 0.71);
+}
+
+.optionsDialog-options-groups .split-view-view .header {
+	padding-left: 28px !important;
+	background-position-x: 8px !important;
+}
+
+.optionsDialog-options-groups .split-view-view .body {
+	padding-left: 5px !important;
+}
+
 .backButtonIcon {
 	content: url('back.svg');
 	width: 20px;
@@ -33,21 +56,42 @@
 	cursor: pointer;
 }
 
-.vs-dark.monaco-shell .backButtonIcon {
+.hc-black .backButtonIcon,
+.vs-dark .backButtonIcon {
 	content: url('back_inverse.svg');
 }
 
 .optionsDialog-description {
-	padding: 15px;
-	overflow-y: auto;
+    height: 90px;
+    margin: 15px;
+    overflow-y: auto;
+}
+
+.optionsDialog-description .modal-title {
+	background-repeat: no-repeat;
+	background-position: 2px center;
+	padding-left: 25px;
+	background-size: 16px;
+}
+
+.vs .optionsDialog-description .modal-title {
+	background-image: url('info_notification.svg')
+}
+
+.vs-dark .optionsDialog-description .modal-title,
+.hc-black .optionsDialog-description .modal-title {
+	background-image: url('info_notification_inverse.svg')
 }
 
 .optionsDialog-options {
-	height: calc(100% - 30px);
+	height: 100%;
+	display: flex;
+	flex-direction: column;
 }
 
 .optionsDialog-description-content {
-	padding: 10px;
+	padding-top: 10px;
+	padding-left: 25px;
 }
 
 .optionsDialog-table{

src/sql/base/browser/ui/modal/optionsDialog.ts

@@ -125,7 +125,7 @@ export class OptionsDialog extends Modal {
 		});
 
 		let builder = new Builder(this._body);
-		builder.div({ class: 'Connection-divider' }, (dividerContainer) => {
+		builder.div({}, (dividerContainer) => {
 			this._dividerBuilder = dividerContainer;
 		});
 

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

@@ -46,9 +46,9 @@ panel {
 }
 
 .tabbedPanel .tabList .tab .tabLabel {
-	text-transform: uppercase;
-	font-size: 13px;
+	font-size: 14px;
 	padding-bottom: 4px;
+	font-weight: 600;
 }
 
 .tabbedPanel.vertical .tabList .tab .tabLabel {

src/sql/base/browser/ui/panel/panelStyles.ts

@@ -19,6 +19,7 @@ registerThemingParticipant((theme: ITheme, collector: ICssStyleCollector) => {
 			.tabbedPanel > .title .tabList .tab .tabLabel.active {
 				color: ${titleActive};
 				border-bottom-color: ${titleActiveBorder};
+				border-bottom-width: 2px;
 			}
 
 			.tabbedPanel > .title .tabList .tab-header.active {