Fixing some assessment styling (#16050)

* Fixing some assessment styling

* Adding styling capabilities to loading component.

* Changing assessment loader height from px to %

* using margin-top instead of height to align loader

extensions/sql-migration/src/dialog/assessmentResults/sqlDatabasesTree.ts

@@ -453,9 +453,10 @@ export class SqlDatabaseTree {
 		const impactedObjectsTitle = this._view.modelBuilder.text().withProps({
 			value: constants.IMPACTED_OBJECTS,
 			CSSStyles: {
-				'font-size': '14px',
+				'font-size': '13px',
 				'width': '280px',
-				'margin': '10px 0px 0px 0px'
+				'margin': '10px 0px 0px 0px',
+				'font-weight': 'bold'
 			}
 		}).component();
 
@@ -513,35 +514,30 @@ export class SqlDatabaseTree {
 			CSSStyles: {
 				'font-size': '13px',
 				'line-size': '18px',
-				'margin': '12px 0px 0px 0px'
+				'margin': '12px 0px 0px 0px',
+				'font-weight': 'bold'
 			}
 		}).component();
-
+		const objectDescriptionStyle = {
+			'font-size': '12px',
+			'line-size': '18px',
+			'margin': '5px 0px 0px 0px',
+			'text-align': 'justify',
+			'word-wrap': 'break-word'
+		};
 		this._objectDetailsType = this._view.modelBuilder.text().withProps({
 			value: constants.TYPES_LABEL,
-			CSSStyles: {
+			CSSStyles: objectDescriptionStyle
-				'font-size': '13px',
-				'line-size': '18px',
-				'margin': '5px 0px 0px 0px'
-			}
 		}).component();
 
 		this._objectDetailsName = this._view.modelBuilder.text().withProps({
 			value: constants.NAMES_LABEL,
-			CSSStyles: {
+			CSSStyles: objectDescriptionStyle
-				'font-size': '13px',
-				'line-size': '18px',
-				'margin': '5px 0px 0px 0px'
-			}
 		}).component();
 
 		this._objectDetailsSample = this._view.modelBuilder.text().withProps({
 			value: '',
-			CSSStyles: {
+			CSSStyles: objectDescriptionStyle
-				'font-size': '13px',
-				'line-size': '18px',
-				'margin': '5px 0px 0px 0px'
-			}
 		}).component();
 
 		const container = this._view.modelBuilder.flexContainer().withItems([impactedObjectsTitle, this._impactedObjectsTable, objectDetailsTitle, this._objectDetailsType, this._objectDetailsName, this._objectDetailsSample]).withLayout({
@@ -552,53 +548,42 @@ export class SqlDatabaseTree {
 	}
 
 	private createDescription(): azdata.FlexContainer {
+		const labelStyle = {
+			'font-size': '13px',
+			'width': '200px',
+			'font-weight': 'bold',
+			'margin': '10px 35px 0px 0px'
+		};
+		const textStyle = {
+			'font-size': '12px',
+			'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: {
+			CSSStyles: labelStyle
-				'font-size': '14px',
-				'width': '200px',
-				'margin': '10px 35px 0px 0px'
-			}
 		}).component();
 		this._descriptionText = this._view.modelBuilder.text().withProps({
-			CSSStyles: {
+			CSSStyles: textStyle
-				'font-size': '12px',
-				'width': '200px',
-				'margin': '3px 35px 0px 0px'
-			}
 		}).component();
 
 		const recommendationTitle = this._view.modelBuilder.text().withProps({
 			value: constants.RECOMMENDATION,
-			CSSStyles: {
+			CSSStyles: labelStyle
-				'font-size': '14px',
-				'width': '200px',
-				'margin': '12px 35px 0px 0px'
-			}
 		}).component();
 		this._recommendationText = this._view.modelBuilder.text().withProps({
-			CSSStyles: {
+			CSSStyles: textStyle
-				'font-size': '12px',
-				'width': '200px',
-				'margin': '3px 35px 0px 0px'
-			}
 		}).component();
 		const moreInfo = this._view.modelBuilder.text().withProps({
 			value: constants.MORE_INFO,
-			CSSStyles: {
+			CSSStyles: labelStyle
-				'font-size': '14px',
-				'width': '200px',
-				'margin': '15px 35px 0px 0px'
-			}
 		}).component();
 		this._moreInfo = this._view.modelBuilder.hyperlink().withProps({
 			label: '',
 			url: '',
-			CSSStyles: {
+			CSSStyles: textStyle,
-				'font-size': '12px',
-				'width': '200px',
-				'margin': '3px 35px 0px 0px'
-			},
 			showLinkIcon: true
 		}).component();
 
@@ -705,7 +690,6 @@ export class SqlDatabaseTree {
 			'text-overflow': 'ellipsis',
 			'width': '200px',
 			'overflow': 'hidden',
-			'border-bottom': '1px solid'
 		};
 
 		this._assessmentResultsTable = this._view.modelBuilder.declarativeTable().withProps(

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

@@ -607,7 +607,12 @@ export class SKURecommendationPage extends MigrationWizardPage {
 
 	private createAssessmentProgress(): azdata.FlexContainer {
 
-		this._assessmentLoader = this._view.modelBuilder.loadingComponent().component();
+		this._assessmentLoader = this._view.modelBuilder.loadingComponent().withProps({
+			CSSStyles: {
+				'margin-top': '15px'
+			}
+		}).component();
+
 		this._assessmentProgress = this._view.modelBuilder.text().withProps({
 			value: constants.ASSESSMENT_IN_PROGRESS,
 			CSSStyles: {

src/sql/workbench/browser/modelComponents/loadingComponent.component.ts

@@ -19,7 +19,7 @@ import { ILogService } from 'vs/platform/log/common/log';
 @Component({
 	selector: 'modelview-loadingComponent',
 	template: `
-		<div class="modelview-loadingComponent-container" aria-busy="true" *ngIf="loading">
+		<div class="modelview-loadingComponent-container" aria-busy="true" *ngIf="loading" [ngStyle]="CSSStyles">
 			<div class="modelview-loadingComponent-spinner" [title]="getStatusText()" #spinnerElement></div>
 			<div *ngIf="showText" class="modelview-loadingComponent-status-text">{{getStatusText()}}</div>
 		</div>