Update extension border / line styling (#17059)

* updated border styling of tables

* reducing border thickness

* fixing styling for dark mode

* fixing for dark mode

* removing box shadow from checkbox

extensions/sql-migration/src/dashboard/sqlServerDashboard.ts

@@ -555,7 +555,7 @@ export class DashboardWidget {
 			justifyContent: 'flex-start',
 		}).withProps({
 			CSSStyles: {
-				'border': '1px solid',
+				'border': '1px solid rgba(0, 0, 0, 0.1)',
 				'padding': '15px'
 			}
 		}).component();
@@ -812,7 +812,7 @@ export class DashboardWidget {
 			justifyContent: 'flex-start',
 		}).withProps({
 			CSSStyles: {
-				'border': '1px solid',
+				'border': '1px solid rgba(0, 0, 0, 0.1)',
 				'padding': '15px'
 			}
 		}).component();

extensions/sql-migration/src/wizard/databaseBackupPage.ts

@@ -446,12 +446,13 @@ export class DatabaseBackupPage extends MigrationWizardPage {
 			'font-size': '13px',
 			'font-weight': 'bold',
 			'text-align': 'left',
-			'border-bottom': '1px solid',
+			'box-shadow': 'inset 0px -1px 0px #F3F2F1',
+
 		};
 		const rowCssStyle: azdata.CssStyles = {
 			'border': 'none',
 			'font-size': '13px',
-			'border-bottom': '1px solid',
+			'box-shadow': 'inset 0px -1px 0px #F3F2F1',
 		};
 
 		const networkShareTableText = this._view.modelBuilder.text()

extensions/sql-migration/src/wizard/databaseSelectorPage.ts

@@ -11,25 +11,16 @@ import * as constants from '../constants/strings';
 import { IconPath, IconPathHelper } from '../constants/iconPathHelper';
 import { debounce } from '../api/utils';
 
-const headerLeft: azdata.CssStyles = {
+const styleLeft: azdata.CssStyles = {
 	'border': 'none',
 	'text-align': 'left',
 	'white-space': 'nowrap',
 	'text-overflow': 'ellipsis',
 	'overflow': 'hidden',
-	'border-bottom': '1px solid'
+	'box-shadow': '0px -1px 0px 0px rgba(243, 242, 241, 1) inset'
 };
 
-const headerRight: azdata.CssStyles = {
+const styleCheckBox: azdata.CssStyles = {
-	'border': 'none',
-	'text-align': 'right',
-	'white-space': 'nowrap',
-	'text-overflow': 'ellipsis',
-	'overflow': 'hidden',
-	'border-bottom': '1px solid'
-};
-
-const styleLeft: azdata.CssStyles = {
 	'border': 'none',
 	'text-align': 'left',
 	'white-space': 'nowrap',
@@ -43,6 +34,7 @@ const styleRight: azdata.CssStyles = {
 	'white-space': 'nowrap',
 	'text-overflow': 'ellipsis',
 	'overflow': 'hidden',
+	'box-shadow': '0px -1px 0px 0px rgba(243, 242, 241, 1) inset'
 };
 
 export class DatabaseSelectorPage extends MigrationWizardPage {
@@ -186,7 +178,7 @@ export class DatabaseSelectorPage extends MigrationWizardPage {
 			this._databaseTableValues.push([
 				{
 					value: false,
-					style: styleLeft,
+					style: styleCheckBox,
 					enabled: selectable
 				},
 				{
@@ -250,7 +242,7 @@ export class DatabaseSelectorPage extends MigrationWizardPage {
 						width: 20,
 						isReadOnly: false,
 						showCheckAll: true,
-						headerCssStyles: headerLeft,
+						headerCssStyles: styleCheckBox
 					},
 					{
 						displayName: constants.DATABASE,
@@ -259,28 +251,28 @@ export class DatabaseSelectorPage extends MigrationWizardPage {
 						valueType: azdata.DeclarativeDataType.string,
 						width: '100%',
 						isReadOnly: true,
-						headerCssStyles: headerLeft
+						headerCssStyles: styleLeft
 					},
 					{
 						displayName: constants.STATUS,
 						valueType: azdata.DeclarativeDataType.string,
 						width: 100,
 						isReadOnly: true,
-						headerCssStyles: headerLeft
+						headerCssStyles: styleLeft
 					},
 					{
 						displayName: constants.SIZE,
 						valueType: azdata.DeclarativeDataType.string,
 						width: 125,
 						isReadOnly: true,
-						headerCssStyles: headerRight
+						headerCssStyles: styleRight
 					},
 					{
 						displayName: constants.LAST_BACKUP,
 						valueType: azdata.DeclarativeDataType.string,
 						width: 150,
 						isReadOnly: true,
-						headerCssStyles: headerLeft
+						headerCssStyles: styleLeft
 					}
 				]
 			}