Standardize font styling on sql migration extension (#16968)

2026-02-05 09:35:39 -05:00 · 2021-10-11 14:58:37 -07:00
parent cd053ade22
commit e5f50499ce
20 changed files with 715 additions and 803 deletions
--- a/extensions/sql-migration/src/dialog/assessmentResults/savedAssessmentDialog.ts
+++ b/extensions/sql-migration/src/dialog/assessmentResults/savedAssessmentDialog.ts
@@ -8,6 +8,7 @@ import * as vscode from 'vscode';
 import * as constants from '../../constants/strings';
 import { MigrationStateModel } from '../../models/stateMachine';
 import { WizardController } from '../../wizard/wizardController';
+import * as styles from '../../constants/styles';

 export class SavedAssessmentDialog {

@@ -89,11 +90,10 @@ export class SavedAssessmentDialog {
 	public initializePageContent(view: azdata.ModelView): azdata.FlexContainer {
 		const buttonGroup = 'resumeMigration';

-		const text = view.modelBuilder.text().withProps({
+		const pageTitle = view.modelBuilder.text().withProps({
 			CSSStyles: {
-				'font-size': '18px',
-				'font-weight': 'bold',
-				'margin': '100px 8px 0px 36px'
+				...styles.PAGE_TITLE_CSS,
+				'margin-bottom': '12px'
 			},
 			value: constants.RESUME_TITLE
 		}).component();
@@ -102,8 +102,8 @@ export class SavedAssessmentDialog {
 			label: constants.START_MIGRATION,
 			name: buttonGroup,
 			CSSStyles: {
-				'font-size': '14px',
-				'margin': '40px 8px 0px 36px'
+				...styles.BODY_CSS,
+				'margin-bottom': '8px'
 			},
 			checked: true
 		}).component();
@@ -117,8 +117,7 @@ export class SavedAssessmentDialog {
 			label: constants.CONTINUE_MIGRATION,
 			name: buttonGroup,
 			CSSStyles: {
-				'font-size': '14px',
-				'margin': '10px 8px 0px 36px'
+				...styles.BODY_CSS,
 			},
 			checked: false
 		}).component();
@@ -129,12 +128,17 @@ export class SavedAssessmentDialog {
 			}
 		});

-		const flex = view.modelBuilder.flexContainer().withLayout({
-			flexFlow: 'column',
-			height: '100%',
-			width: '100%'
-		}).component();
-		flex.addItem(text, { flex: '0 0 auto' });
+		const flex = view.modelBuilder.flexContainer()
+			.withLayout({
+				flexFlow: 'column',
+				height: '100%',
+				width: '100%',
+			}).withProps({
+				CSSStyles: {
+					'margin': '20px 15px',
+				}
+			}).component();
+		flex.addItem(pageTitle, { flex: '0 0 auto' });
 		flex.addItem(radioStart, { flex: '0 0 auto' });
 		flex.addItem(radioContinue, { flex: '0 0 auto' });

--- a/extensions/sql-migration/src/dialog/assessmentResults/sqlDatabasesTree.ts
+++ b/extensions/sql-migration/src/dialog/assessmentResults/sqlDatabasesTree.ts
@@ -9,6 +9,7 @@ import { MigrationStateModel, MigrationTargetType } from '../../models/stateMach
 import * as constants from '../../constants/strings';
 import { debounce } from '../../api/utils';
 import { IconPath, IconPathHelper } from '../../constants/iconPathHelper';
+import * as styles from '../../constants/styles';

 const styleLeft: azdata.CssStyles = {
 	'border': 'none',
@@ -135,8 +136,7 @@ export class SqlDatabaseTree {
 	private createDatabaseCount(): azdata.TextComponent {
 		this._databaseCount = this._view.modelBuilder.text().withProps({
 			CSSStyles: {
-				'font-size': '11px',
-				'font-weight': 'bold',
+				...styles.BOLD_NOTE_CSS,
 				'margin': '0px 15px 0px 15px'
 			},
 			value: constants.DATABASES(0, this._model._databaseAssessment.length)
@@ -392,20 +392,14 @@ export class SqlDatabaseTree {
 			message = this._view.modelBuilder.text().withProps({
 				value: constants.NO_ISSUES_FOUND_VM,
 				CSSStyles: {
-					'font-size': '14px',
-					'width': '100%',
-					'margin': '0',
-					'text-align': 'left'
+					...styles.BODY_CSS
 				}
 			}).component();
 		} else {
 			message = this._view.modelBuilder.text().withProps({
 				value: constants.NO_ISSUES_FOUND_MI,
 				CSSStyles: {
-					'font-size': '14px',
-					'width': '100%',
-					'margin': '0',
-					'text-align': 'left'
+					...styles.BODY_CSS
 				}
 			}).component();
 		}
@@ -413,8 +407,7 @@ export class SqlDatabaseTree {

 		this._noIssuesContainer = this._view.modelBuilder.flexContainer().withItems([message]).withProps({
 			CSSStyles: {
-				'margin-left': '24px',
-				'margin-top': '20px',
+				'margin-top': '8px',
 				'display': 'none'
 			}
 		}).component();
@@ -426,7 +419,7 @@ export class SqlDatabaseTree {
 		const message = this._view.modelBuilder.text().withProps({
 			value: constants.SELECT_DB_PROMPT,
 			CSSStyles: {
-				'font-size': '14px',
+				...styles.BODY_CSS,
 				'width': '400px',
 				'margin': '10px 0px 0px 0px',
 				'text-align': 'left'
@@ -479,10 +472,9 @@ export class SqlDatabaseTree {
 		const impactedObjectsTitle = this._view.modelBuilder.text().withProps({
 			value: constants.IMPACTED_OBJECTS,
 			CSSStyles: {
-				'font-size': '13px',
+				...styles.LIGHT_LABEL_CSS,
 				'width': '280px',
 				'margin': '10px 0px 0px 0px',
-				'font-weight': 'bold'
 			}
 		}).component();

@@ -539,17 +531,13 @@ export class SqlDatabaseTree {
 		const objectDetailsTitle = this._view.modelBuilder.text().withProps({
 			value: constants.OBJECT_DETAILS,
 			CSSStyles: {
-				'font-size': '13px',
-				'line-size': '18px',
+				...styles.LIGHT_LABEL_CSS,
 				'margin': '12px 0px 0px 0px',
-				'font-weight': 'bold'
 			}
 		}).component();
 		const objectDescriptionStyle = {
-			'font-size': '12px',
-			'line-size': '18px',
+			...styles.BODY_CSS,
 			'margin': '5px 0px 0px 0px',
-			'text-align': 'justify',
 			'word-wrap': 'break-word'
 		};
 		this._objectDetailsType = this._view.modelBuilder.text().withProps({
@@ -575,22 +563,19 @@ export class SqlDatabaseTree {
 	}

 	private createDescription(): azdata.FlexContainer {
-		const labelStyle = {
-			'font-size': '13px',
+		const LABEL_CSS = {
+			...styles.LIGHT_LABEL_CSS,
 			'width': '200px',
-			'font-weight': 'bold',
-			'margin': '10px 35px 0px 0px'
+			'margin': '12px 0 0'
 		};
 		const textStyle = {
-			'font-size': '12px',
+			...styles.BODY_CSS,
 			'width': '200px',
-			'margin': '3px 35px 0px 0px',
-			'text-align': 'justify',
 			'word-wrap': 'break-word'
 		};
 		const descriptionTitle = this._view.modelBuilder.text().withProps({
 			value: constants.DESCRIPTION,
-			CSSStyles: labelStyle
+			CSSStyles: LABEL_CSS
 		}).component();
 		this._descriptionText = this._view.modelBuilder.text().withProps({
 			CSSStyles: textStyle
@@ -598,14 +583,14 @@ export class SqlDatabaseTree {

 		const recommendationTitle = this._view.modelBuilder.text().withProps({
 			value: constants.RECOMMENDATION,
-			CSSStyles: labelStyle
+			CSSStyles: LABEL_CSS
 		}).component();
 		this._recommendationText = this._view.modelBuilder.text().withProps({
 			CSSStyles: textStyle
 		}).component();
 		const moreInfo = this._view.modelBuilder.text().withProps({
 			value: constants.MORE_INFO,
-			CSSStyles: labelStyle
+			CSSStyles: LABEL_CSS
 		}).component();
 		this._moreInfo = this._view.modelBuilder.hyperlink().withProps({
 			label: '',
@@ -626,11 +611,10 @@ export class SqlDatabaseTree {
 		this._assessmentTitle = this._view.modelBuilder.text().withProps({
 			value: '',
 			CSSStyles: {
-				'font-size': '13px',
-				'line-size': '18px',
+				...styles.LABEL_CSS,
+				'margin-top': '12px',
 				'height': '48px',
 				'width': '540px',
-				'font-weight': '600',
 				'border-bottom': 'solid 1px'
 			}
 		}).component();
@@ -642,9 +626,8 @@ export class SqlDatabaseTree {
 		const title = this._view.modelBuilder.text().withProps({
 			value: constants.TARGET_PLATFORM,
 			CSSStyles: {
-				'font-size': '13px',
-				'line-size': '19px',
-				'margin': '0px 0px 0px 0px'
+				...styles.BODY_CSS,
+				'margin': '0 0 4px 0'
 			}
 		});

@@ -655,8 +638,7 @@ export class SqlDatabaseTree {
 		const impact = this._view.modelBuilder.text().withProps({
 			value: (this._targetType === MigrationTargetType.SQLVM) ? constants.SUMMARY_VM_TYPE : constants.SUMMARY_MI_TYPE,
 			CSSStyles: {
-				'font-size': '18px',
-				'margin': '0px 0px 0px 0px'
+				...styles.PAGE_SUBTITLE_CSS
 			}
 		});

@@ -666,9 +648,9 @@ export class SqlDatabaseTree {
 	private createRecommendationComponent(): azdata.TextComponent {
 		this._dbName = this._view.modelBuilder.text().withProps({
 			CSSStyles: {
-				'font-size': '13px',
-				'font-weight': 'bold',
-				'margin': '10px 0px 0px 0px'
+				...styles.LABEL_CSS,
+				'margin-bottom': '8px',
+				'font-weight': '700'
 			}
 		}).component();

@@ -679,11 +661,9 @@ export class SqlDatabaseTree {
 		this._recommendationTitle = this._view.modelBuilder.text().withProps({
 			value: constants.WARNINGS,
 			CSSStyles: {
-				'font-size': '13px',
-				'line-height': '18px',
-				'width': '200px',
-				'font-weight': '600',
-				'margin': '8px 35px 5px 0px'
+				...styles.LABEL_CSS,
+				'margin': '0 8px 4px 0',
+				'width': '220px',
 			}
 		}).component();

@@ -694,11 +674,9 @@ export class SqlDatabaseTree {
 		this._recommendation = this._view.modelBuilder.text().withProps({
 			value: constants.WARNINGS_DETAILS,
 			CSSStyles: {
-				'font-size': '13px',
-				'line-height': '18px',
+				...styles.LABEL_CSS,
+				'margin': '0 0 4px 24px',
 				'width': '200px',
-				'font-weight': '600',
-				'margin': '8px 0px 5px 0px'
 			}
 		}).component();

--- a/extensions/sql-migration/src/dialog/createResourceGroup/createResourceGroupDialog.ts
+++ b/extensions/sql-migration/src/dialog/createResourceGroup/createResourceGroupDialog.ts
@@ -9,6 +9,7 @@ import { azureResource } from 'azureResource';
 import { EventEmitter } from 'events';
 import { createResourceGroup } from '../../api/azure';
 import * as constants from '../../constants/strings';
+import * as styles from '../../constants/styles';

 export class CreateResourceGroupDialog {
 	private _dialogObject!: azdata.window.Dialog;
@@ -42,15 +43,14 @@ export class CreateResourceGroupDialog {
 			const resourceGroupDescription = view.modelBuilder.text().withProps({
 				value: constants.RESOURCE_GROUP_DESCRIPTION,
 				CSSStyles: {
-					'font-size': '13px',
-					'margin-bottom': '10px'
+					...styles.BODY_CSS,
+					'margin-bottom': '8px'
 				}
 			}).component();
 			const nameLabel = view.modelBuilder.text().withProps({
 				value: constants.NAME,
 				CSSStyles: {
-					'font-size': '13px',
-					'font-weight': 'bold',
+					...styles.LABEL_CSS
 				}
 			}).component();

--- a/extensions/sql-migration/src/dialog/createSqlMigrationService/createSqlMigrationServiceDialog.ts
+++ b/extensions/sql-migration/src/dialog/createSqlMigrationService/createSqlMigrationServiceDialog.ts
@@ -12,8 +12,10 @@ import * as os from 'os';
 import { azureResource } from 'azureResource';
 import { IconPathHelper } from '../../constants/iconPathHelper';
 import { CreateResourceGroupDialog } from '../createResourceGroup/createResourceGroupDialog';
+import { createAuthenticationKeyTable } from '../../wizard/integrationRuntimePage';
 import * as EventEmitter from 'events';
 import { clearDialogMessage } from '../../api/utils';
+import * as styles from '../../constants/styles';

 export class CreateSqlMigrationServiceDialog {

@@ -208,7 +210,7 @@ export class CreateSqlMigrationServiceDialog {
 		const dialogDescription = this._view.modelBuilder.text().withProps({
 			value: constants.MIGRATION_SERVICE_DIALOG_DESCRIPTION,
 			CSSStyles: {
-				'font-size': '13px'
+				...styles.BODY_CSS
 			}
 		}).component();

@@ -216,16 +218,14 @@ export class CreateSqlMigrationServiceDialog {
 			value: constants.SUBSCRIPTION,
 			description: constants.MIGRATION_SERVICE_SUBSCRIPTION_INFO,
 			CSSStyles: {
-				'font-size': '13px',
-				'font-weight': 'bold'
+				...styles.LABEL_CSS
 			}
 		}).component();

 		this.migrationServiceSubscription = this._view.modelBuilder.text().withProps({
 			enabled: false,
 			CSSStyles: {
-				'font-size': '13px',
-				'margin': '0px'
+				'margin': '-1em 0 0'
 			}
 		}).component();

@@ -234,8 +234,7 @@ export class CreateSqlMigrationServiceDialog {
 			description: constants.MIGRATION_SERVICE_RESOURCE_GROUP_INFO,
 			requiredIndicator: true,
 			CSSStyles: {
-				'font-size': '13px',
-				'font-weight': 'bold'
+				...styles.LABEL_CSS
 			}
 		}).component();

@@ -244,6 +243,9 @@ export class CreateSqlMigrationServiceDialog {
 			required: true,
 			editable: true,
 			fireOnTextChange: true,
+			CSSStyles: {
+				'margin-top': '-1em'
+			}
 		}).component();

 		const migrationServiceNameLabel = this._view.modelBuilder.text().withProps({
@@ -251,14 +253,16 @@ export class CreateSqlMigrationServiceDialog {
 			description: constants.MIGRATION_SERVICE_NAME_INFO,
 			requiredIndicator: true,
 			CSSStyles: {
-				'font-size': '13px',
-				'font-weight': 'bold'
+				...styles.LABEL_CSS
 			}
 		}).component();

 		this._createResourceGroupLink = this._view.modelBuilder.hyperlink().withProps({
 			label: constants.CREATE_NEW,
-			url: ''
+			url: '',
+			CSSStyles: {
+				...styles.BODY_CSS
+			}
 		}).component();

 		this._disposables.push(this._createResourceGroupLink.onDidClick(async e => {
@@ -279,31 +283,33 @@ export class CreateSqlMigrationServiceDialog {
 			}
 		}));

-		this.migrationServiceNameText = this._view.modelBuilder.inputBox().component();
+		this.migrationServiceNameText = this._view.modelBuilder.inputBox().withProps({
+			CSSStyles: {
+				'margin-top': '-1em'
+			}
+		}).component();

 		const locationDropdownLabel = this._view.modelBuilder.text().withProps({
 			value: constants.LOCATION,
 			description: constants.MIGRATION_SERVICE_LOCATION_INFO,
 			CSSStyles: {
-				'font-size': '13px',
-				'font-weight': 'bold'
+				...styles.LABEL_CSS
 			}
 		}).component();

 		this.migrationServiceLocation = this._view.modelBuilder.text().withProps({
+			enabled: false,
 			value: await this._model.getLocationDisplayName(this._model._targetServerInstance.location),
 			CSSStyles: {
-				'font-size': '13px',
-				'margin': '0px'
+				'margin': '-1em 0 0'
 			}
 		}).component();

-		const targetlabel = this._view.modelBuilder.text().withProps({
+		const targetLabel = this._view.modelBuilder.text().withProps({
 			value: constants.TARGET,
 			description: constants.MIGRATION_SERVICE_TARGET_INFO,
 			CSSStyles: {
-				'font-size': '13px',
-				'font-weight': 'bold'
+				...styles.LABEL_CSS
 			}
 		}).component();

@@ -311,8 +317,9 @@ export class CreateSqlMigrationServiceDialog {
 			enabled: false,
 			value: constants.AZURE_SQL,
 			CSSStyles: {
-				'font-size': '13px',
-				'margin': '0px'
+				'margin-top': '-1em',
+				// 'font-size': '13px',
+				// 'margin': '0px'
 			}
 		}).component();

@@ -327,7 +334,7 @@ export class CreateSqlMigrationServiceDialog {
 			this._createResourceGroupLink,
 			migrationServiceNameLabel,
 			this.migrationServiceNameText,
-			targetlabel,
+			targetLabel,
 			targetText
 		]).withLayout({
 			flexFlow: 'column'
@@ -379,29 +386,28 @@ export class CreateSqlMigrationServiceDialog {
 		const setupIRHeadingText = this._view.modelBuilder.text().withProps({
 			value: constants.SERVICE_CONTAINER_HEADING,
 			CSSStyles: {
-				'font-weight': 'bold',
-				'font-size': '13px'
+				...styles.LABEL_CSS
 			}
 		}).component();

 		const setupIRdescription1 = this._view.modelBuilder.text().withProps({
 			value: constants.SERVICE_CONTAINER_DESCRIPTION1,
 			CSSStyles: {
-				'font-size': '13px'
+				...styles.BODY_CSS
 			}
 		}).component();

 		const setupIRdescription2 = this._view.modelBuilder.text().withProps({
 			value: constants.SERVICE_CONTAINER_DESCRIPTION2,
 			CSSStyles: {
-				'font-size': '13px'
+				...styles.BODY_CSS
 			}
 		}).component();

 		const irSetupStep1Text = this._view.modelBuilder.text().withProps({
 			value: constants.SERVICE_STEP1,
 			CSSStyles: {
-				'font-size': '13px'
+				...styles.BODY_CSS
 			},
 			links: [
 				{
@@ -414,7 +420,7 @@ export class CreateSqlMigrationServiceDialog {
 		const irSetupStep2Text = this._view.modelBuilder.text().withProps({
 			value: constants.SERVICE_STEP2,
 			CSSStyles: {
-				'font-size': '13px'
+				...styles.BODY_CSS
 			}
 		}).component();

@@ -423,7 +429,7 @@ export class CreateSqlMigrationServiceDialog {
 			CSSStyles: {
 				'margin-top': '10px',
 				'margin-bottom': '10px',
-				'font-size': '13px'
+				...styles.BODY_CSS
 			}
 		}).component();

@@ -431,7 +437,7 @@ export class CreateSqlMigrationServiceDialog {
 			text: '',
 			style: 'error',
 			CSSStyles: {
-				'font-size': '13px'
+				...styles.BODY_CSS
 			}
 		}).component();

@@ -442,55 +448,11 @@ export class CreateSqlMigrationServiceDialog {
 		this._refreshLoadingComponent = this._view.modelBuilder.loadingComponent().withProps({
 			loading: false,
 			CSSStyles: {
-				'font-size': '13px'
+				...styles.BODY_CSS
 			}
 		}).component();

-
-		this.migrationServiceAuthKeyTable = this._view.modelBuilder.declarativeTable().withProps({
-			ariaLabel: constants.DATABASE_MIGRATION_SERVICE_AUTHENTICATION_KEYS,
-			columns: [
-				{
-					displayName: constants.NAME,
-					valueType: azdata.DeclarativeDataType.string,
-					width: '50px',
-					isReadOnly: true,
-					rowCssStyles: {
-						'font-size': '13px'
-					},
-					headerCssStyles: {
-						'font-size': '13px'
-					}
-				},
-				{
-					displayName: constants.AUTH_KEY_COLUMN_HEADER,
-					valueType: azdata.DeclarativeDataType.string,
-					width: '500px',
-					isReadOnly: true,
-					rowCssStyles: {
-						'font-size': '13px'
-					},
-					headerCssStyles: {
-						'font-size': '13px'
-					}
-				},
-				{
-					displayName: '',
-					valueType: azdata.DeclarativeDataType.component,
-					width: '30px',
-					isReadOnly: true,
-					rowCssStyles: {
-						'font-size': '13px'
-					},
-					headerCssStyles: {
-						'font-size': '13px'
-					}
-				}
-			],
-			CSSStyles: {
-				'margin-top': '5px'
-			}
-		}).component();
+		this.migrationServiceAuthKeyTable = createAuthenticationKeyTable(this._view);

 		this._setupContainer = this._view.modelBuilder.flexContainer().withItems(
 			[
@@ -551,7 +513,7 @@ export class CreateSqlMigrationServiceDialog {
 					text: constants.SERVICE_READY(this._createdMigrationService!.name, this.irNodes.join(', ')),
 					style: 'success',
 					CSSStyles: {
-						'font-size': '13px'
+						...styles.BODY_CSS
 					}
 				});
 				this._dialogObject.okButton.enabled = true;
@@ -561,7 +523,7 @@ export class CreateSqlMigrationServiceDialog {
 					text: constants.SERVICE_NOT_READY(this._createdMigrationService!.name),
 					style: 'warning',
 					CSSStyles: {
-						'font-size': '13px'
+						...styles.BODY_CSS
 					}
 				});
 				this._dialogObject.okButton.enabled = false;
--- a/extensions/sql-migration/src/dialog/migrationCutover/confirmCutoverDialog.ts
+++ b/extensions/sql-migration/src/dialog/migrationCutover/confirmCutoverDialog.ts
@@ -10,7 +10,7 @@ import * as constants from '../../constants/strings';
 import { SqlManagedInstance } from '../../api/azure';
 import { IconPathHelper } from '../../constants/iconPathHelper';
 import { convertByteSizeToReadableUnit, get12HourTime } from '../../api/utils';
-
+import * as styles from '../../constants/styles';
 export class ConfirmCutoverDialog {
 	private _dialogObject!: azdata.window.Dialog;
 	private _view!: azdata.ModelView;
@@ -29,17 +29,15 @@ export class ConfirmCutoverDialog {
 			const completeCutoverText = view.modelBuilder.text().withProps({
 				value: constants.COMPLETE_CUTOVER,
 				CSSStyles: {
-					'font-size': '20px',
-					'font-weight': 'bold',
-					'margin-bottom': '0px'
+					...styles.PAGE_TITLE_CSS
 				}
 			}).component();

 			const sourceDatabaseText = view.modelBuilder.text().withProps({
 				value: this.migrationCutoverModel._migration.migrationContext.properties.sourceDatabaseName,
 				CSSStyles: {
-					'font-size': '10px',
-					'margin': '5px 0px 10px 0px'
+					...styles.SMALL_NOTE_CSS,
+					'margin': '4px 0px 8px'
 				}
 			}).component();

@@ -48,24 +46,25 @@ export class ConfirmCutoverDialog {
 			const helpMainText = this._view.modelBuilder.text().withProps({
 				value: constants.CUTOVER_HELP_MAIN,
 				CSSStyles: {
-					'font-size': '13px',
+					...styles.BODY_CSS
 				}
 			}).component();

 			const helpStepsText = this._view.modelBuilder.text().withProps({
 				value: this.migrationCutoverModel.confirmCutoverStepsString(),
 				CSSStyles: {
-					'font-size': '13px',
+					...styles.BODY_CSS,
+					'padding': '8px'
 				}
 			}).component();


-			const fileContainer = this.migrationCutoverModel.isBlobMigration() ? this.createBlobFileContainer() : this.createNewtorkShareFileContainer();
+			const fileContainer = this.migrationCutoverModel.isBlobMigration() ? this.createBlobFileContainer() : this.createNetworkShareFileContainer();

 			const confirmCheckbox = this._view.modelBuilder.checkBox().withProps({
 				CSSStyles: {
-					'font-size': '13px',
-					'margin-bottom': '8px'
+					...styles.BODY_CSS,
+					'margin-bottom': '12px'
 				},
 				label: constants.CONFIRM_CUTOVER_CHECKBOX,
 			}).component();
@@ -78,7 +77,7 @@ export class ConfirmCutoverDialog {
 				text: constants.COMPLETING_CUTOVER_WARNING,
 				style: 'warning',
 				CSSStyles: {
-					'font-size': '13px',
+					...styles.BODY_CSS
 				}
 			}).component();

@@ -89,11 +88,11 @@ export class ConfirmCutoverDialog {
 				infoDisplay = 'inline';
 			}

-			const businessCriticalinfoBox = this._view.modelBuilder.infoBox().withProps({
+			const businessCriticalInfoBox = this._view.modelBuilder.infoBox().withProps({
 				text: constants.BUSINESS_CRITICAL_INFO,
 				style: 'information',
 				CSSStyles: {
-					'font-size': '13px',
+					...styles.BODY_CSS,
 					'display': infoDisplay
 				}
 			}).component();
@@ -109,7 +108,7 @@ export class ConfirmCutoverDialog {
 				fileContainer,
 				confirmCheckbox,
 				cutoverWarning,
-				businessCriticalinfoBox
+				businessCriticalInfoBox
 			]).component();


@@ -144,15 +143,17 @@ export class ConfirmCutoverDialog {
 	}

 	private createBlobFileContainer(): azdata.FlexContainer {
-		const container = this._view.modelBuilder.flexContainer().component();
+		const container = this._view.modelBuilder.flexContainer().withProps({
+			CSSStyles: {
+				'margin': '8px 0'
+			}
+		}).component();

 		const containerHeading = this._view.modelBuilder.text().withProps({
 			value: constants.PENDING_BACKUPS(this.migrationCutoverModel.getPendingLogBackupsCount() ?? 0),
 			width: 250,
 			CSSStyles: {
-				'font-size': '13px',
-				'line-height': '18px',
-				'font-weight': 'bold'
+				...styles.LABEL_CSS
 			}
 		}).component();

@@ -163,9 +164,6 @@ export class ConfirmCutoverDialog {
 			width: 70,
 			height: 20,
 			label: constants.REFRESH,
-			CSSStyles: {
-				'margin-top': '13px'
-			}
 		}).component();


@@ -195,8 +193,8 @@ export class ConfirmCutoverDialog {
 		const refreshLoader = this._view.modelBuilder.loadingComponent().withProps({
 			loading: false,
 			CSSStyles: {
-				'margin-top': '8px',
-				'margin-left': '5px'
+				'margin-top': '-4px',
+				'margin-left': '8px'
 			}
 		}).component();

@@ -206,7 +204,7 @@ export class ConfirmCutoverDialog {
 		return container;
 	}

-	private createNewtorkShareFileContainer(): azdata.FlexContainer {
+	private createNetworkShareFileContainer(): azdata.FlexContainer {
 		const container = this._view.modelBuilder.flexContainer().withLayout({
 			flexFlow: 'column'
 		}).component();
@@ -224,10 +222,8 @@ export class ConfirmCutoverDialog {
 			iconWidth: 8,
 			iconPath: IconPathHelper.expandButtonClosed,
 			CSSStyles: {
-				'font-size': '13px',
-				'line-height': '18px',
-				'font-weight': 'bold',
-				'margin': '16px 10px 0px 0px'
+				...styles.LABEL_CSS,
+				'margin': '16px 8px 0px 0px'
 			}
 		}).component();

@@ -304,7 +300,7 @@ export class ConfirmCutoverDialog {
 		const lastScanCompleted = this._view.modelBuilder.text().withProps({
 			value: constants.LAST_SCAN_COMPLETED(get12HourTime(new Date())),
 			CSSStyles: {
-				'font-size': '12px',
+				...styles.NOTE_CSS
 			}
 		}).component();

@@ -340,10 +336,10 @@ export class ConfirmCutoverDialog {
 		return container;
 	}

-	private refreshFileTable(filetable: azdata.TableComponent) {
-		const pendingFiles = this.migrationCutoverModel.getPendingfiles();
+	private refreshFileTable(fileTable: azdata.TableComponent) {
+		const pendingFiles = this.migrationCutoverModel.getPendingFiles();
 		if (pendingFiles.length > 0) {
-			filetable.data = pendingFiles.map(f => {
+			fileTable.data = pendingFiles.map(f => {
 				return [
 					f.fileName,
 					f.status,
@@ -351,7 +347,7 @@ export class ConfirmCutoverDialog {
 				];
 			});
 		} else {
-			filetable.data = [
+			fileTable.data = [
 				[constants.NO_PENDING_BACKUPS]
 			];
 		}
--- a/extensions/sql-migration/src/dialog/migrationCutover/migrationCutoverDialog.ts
+++ b/extensions/sql-migration/src/dialog/migrationCutover/migrationCutoverDialog.ts
@@ -12,6 +12,7 @@ import * as loc from '../../constants/strings';
 import { convertByteSizeToReadableUnit, convertIsoTimeToLocalTime, getSqlServerName, getMigrationStatusImage, SupportedAutoRefreshIntervals, clearDialogMessage, displayDialogErrorMessage } from '../../api/utils';
 import { EOL } from 'os';
 import { ConfirmCutoverDialog } from './confirmCutoverDialog';
+import * as styles from '../../constants/styles';

 const refreshFrequency: SupportedAutoRefreshIntervals = 30000;
 const statusImageSize: number = 14;
@@ -66,8 +67,7 @@ export class MigrationCutoverDialog {
 				this._fileCount = view.modelBuilder.text().withProps({
 					width: '500px',
 					CSSStyles: {
-						'font-size': '14px',
-						'font-weight': 'bold'
+						...styles.BODY_CSS
 					}
 				}).component();

@@ -160,6 +160,7 @@ export class MigrationCutoverDialog {
 					width: '1100px',
 					height: '300px',
 					CSSStyles: {
+						...styles.BODY_CSS,
 						'display': 'none',
 						'padding-left': '0px'
 					}
@@ -179,9 +180,9 @@ export class MigrationCutoverDialog {
 				const _emptyTableText = view.modelBuilder.text().withProps({
 					value: loc.EMPTY_TABLE_TEXT,
 					CSSStyles: {
+						...styles.NOTE_CSS,
+						'margin-top': '8px',
 						'text-align': 'center',
-						'font-size': 'large',
-						'font-weight': 'bold',
 						'width': '300px'
 					}
 				}).component();
@@ -249,9 +250,7 @@ export class MigrationCutoverDialog {

 		this._databaseTitleName = this._view.modelBuilder.text().withProps({
 			CSSStyles: {
-				'font-size': '16px',
-				'font-weight': 'bold',
-				'margin': '0px'
+				...styles.PAGE_TITLE_CSS
 			},
 			width: 950,
 			value: this._model._migration.migrationContext.properties.sourceDatabaseName
@@ -259,8 +258,7 @@ export class MigrationCutoverDialog {

 		const databaseSubTitle = this._view.modelBuilder.text().withProps({
 			CSSStyles: {
-				'font-size': '10px',
-				'margin': '5px 0px'
+				...styles.NOTE_CSS
 			},
 			width: 950,
 			value: loc.DATABASE
@@ -306,7 +304,7 @@ export class MigrationCutoverDialog {
 			width: '150px',
 			enabled: false,
 			CSSStyles: {
-				'font-size': '13px',
+				...styles.BODY_CSS,
 				'display': this._isOnlineMigration() ? 'inline' : 'none'
 			}
 		}).component();
@@ -335,7 +333,7 @@ export class MigrationCutoverDialog {
 			width: '150px',
 			enabled: false,
 			CSSStyles: {
-				'font-size': '13px'
+				...styles.BODY_CSS,
 			}
 		}).component();

@@ -364,7 +362,7 @@ export class MigrationCutoverDialog {
 			height: '20px',
 			width: '100px',
 			CSSStyles: {
-				'font-size': '13px'
+				...styles.BODY_CSS,
 			}
 		}).component();

@@ -383,7 +381,7 @@ export class MigrationCutoverDialog {
 			height: '20px',
 			width: '200px',
 			CSSStyles: {
-				'font-size': '13px'
+				...styles.BODY_CSS,
 			}
 		}).component();

@@ -408,7 +406,10 @@ export class MigrationCutoverDialog {
 			iconHeight: '16px',
 			iconWidth: '16px',
 			height: '20px',
-			width: '140px',
+			width: '180px',
+			CSSStyles: {
+				...styles.BODY_CSS,
+			}
 		}).component();

 		this._newSupportRequest.onDidClick(async (e) => {
@@ -668,6 +669,7 @@ export class MigrationCutoverDialog {

 			if (this._shouldDisplayBackupFileTable()) {
 				await this._fileCount.updateCssStyles({
+					...styles.SECTION_HEADER_CSS,
 					display: 'inline'
 				});
 				await this._fileTable.updateCssStyles({
@@ -745,9 +747,8 @@ export class MigrationCutoverDialog {
 		const labelComponent = this._view.modelBuilder.text().withProps({
 			value: label,
 			CSSStyles: {
-				'font-weight': 'bold',
+				...styles.LIGHT_LABEL_CSS,
 				'margin-bottom': '0',
-				'font-size': '12px'
 			}
 		}).component();
 		flexContainer.addItem(labelComponent);
@@ -755,12 +756,11 @@ export class MigrationCutoverDialog {
 		const textComponent = this._view.modelBuilder.text().withProps({
 			value: value,
 			CSSStyles: {
-				'margin-top': '5px',
-				'margin-bottom': '0',
+				...styles.BODY_CSS,
+				'margin': '4px 0 12px',
 				'width': '100%',
 				'overflow': 'hidden',
-				'text-overflow': 'ellipses',
-				'font-size': '12px'
+				'text-overflow': 'ellipses'
 			}
 		}).component();

--- a/extensions/sql-migration/src/dialog/migrationCutover/migrationCutoverDialogModel.ts
+++ b/extensions/sql-migration/src/dialog/migrationCutover/migrationCutoverDialogModel.ts
@@ -140,7 +140,7 @@ export class MigrationCutoverDialogModel {
 		return this.migrationStatus.properties.migrationStatusDetails?.pendingLogBackupsCount;
 	}

-	public getPendingfiles(): BackupFileInfo[] {
+	public getPendingFiles(): BackupFileInfo[] {
 		const files: BackupFileInfo[] = [];
 		this.migrationStatus.properties.migrationStatusDetails?.activeBackupSets?.forEach(abs => {
 			abs.listOfBackupFiles.forEach(f => {
--- a/extensions/sql-migration/src/dialog/sqlMigrationService/sqlMigrationServiceDetailsDialog.ts
+++ b/extensions/sql-migration/src/dialog/sqlMigrationService/sqlMigrationServiceDetailsDialog.ts
@@ -9,6 +9,7 @@ import { getSqlMigrationServiceAuthKeys, getSqlMigrationServiceMonitoringData, r
 import { IconPathHelper } from '../../constants/iconPathHelper';
 import * as constants from '../../constants/strings';
 import { MigrationContext } from '../../models/migrationLocalStorage';
+import * as styles from '../../constants/styles';

 const CONTROL_MARGIN = '10px';
 const COLUMN_WIDTH = '50px';
@@ -16,13 +17,8 @@ const STRETCH_WIDTH = '100%';
 const LABEL_MARGIN = '0 10px 0 10px';
 const VALUE_MARGIN = '0 10px 10px 10px';
 const INFO_VALUE_MARGIN = '0 10px 0 0';
-const NO_MARGIN = '0';
 const ICON_SIZE = '28px';
 const IMAGE_SIZE = '21px';
-const TITLE_FONT_SIZE = '14px';
-const DESCRIPTION_FONT_SIZE = '10px';
-const FONT_SIZE = '13px';
-const FONT_WEIGHT_BOLD = 'bold';
 const AUTH_KEY1 = 'authKey1';
 const AUTH_KEY2 = 'authKey2';

@@ -126,9 +122,7 @@ export class SqlMigrationServiceDetailsDialog {
 							.withProps({
 								value: migrationContext.controller.name,
 								CSSStyles: {
-									'font-size': TITLE_FONT_SIZE,
-									'font-weight': FONT_WEIGHT_BOLD,
-									'margin': NO_MARGIN,
+									...styles.SECTION_HEADER_CSS
 								}
 							})
 							.component(),
@@ -137,8 +131,7 @@ export class SqlMigrationServiceDetailsDialog {
 							.withProps({
 								value: constants.SQL_MIGRATION_SERVICE_DETAILS_SUB_TITLE,
 								CSSStyles: {
-									'font-size': DESCRIPTION_FONT_SIZE,
-									'margin': NO_MARGIN,
+									...styles.SMALL_NOTE_CSS
 								}
 							})
 							.component(),
@@ -165,7 +158,7 @@ export class SqlMigrationServiceDetailsDialog {
 				description: description,
 				title: value,
 				CSSStyles: {
-					'font-size': FONT_SIZE,
+					...styles.BODY_CSS,
 					'margin': margin,
 				}
 			})
@@ -195,10 +188,11 @@ export class SqlMigrationServiceDetailsDialog {
 			valueType: valueType,
 			width: width,
 			isReadOnly: true,
-			rowCssStyles: { 'font-size': FONT_SIZE },
+			rowCssStyles: {
+				...styles.BODY_CSS
+			},
 			headerCssStyles: {
-				'font-size': FONT_SIZE,
-				'font-weight': 'normal',
+				...styles.BODY_CSS
 			},
 		};
 	}
--- a/extensions/sql-migration/src/dialog/targetDatabaseSummary/targetDatabaseSummaryDialog.ts
+++ b/extensions/sql-migration/src/dialog/targetDatabaseSummary/targetDatabaseSummaryDialog.ts
@@ -6,6 +6,7 @@
 import * as azdata from 'azdata';
 import { MigrationMode, MigrationStateModel, NetworkContainerType } from '../../models/stateMachine';
 import * as constants from '../../constants/strings';
+import * as styles from '../../constants/styles';

 export class TargetDatabaseSummaryDialog {
 	private _dialogObject!: azdata.window.Dialog;
@@ -36,7 +37,7 @@ export class TargetDatabaseSummaryDialog {
 			const databaseCount = this._view.modelBuilder.text().withProps({
 				value: constants.COUNT_DATABASES(this._model._migrationDbs.length),
 				CSSStyles: {
-					'font-size': '13px',
+					...styles.BODY_CSS,
 					'margin-bottom': '20px'
 				}
 			}).component();