improve the visual effect for selected card (#3509)

* improve the visual effect for selected card

* remove shadow for unselected card as per Smitha's suggestion

* fix the issue of status icon not changing when new theme selected

src/sql/parts/modelComponents/card.component.html

@@ -2,31 +2,32 @@
 	<span *ngIf="hasStatus" class="card-status">
 		<div class="status-content" [style.backgroundColor]="statusColor"></div>
 	</span>
-
+	<span *ngIf="showRadioButton" class="selection-indicator-container">
-		<ng-container *ngIf="isVerticalButton">
+		<div *ngIf="showAsSelected" class="selection-indicator"></div>
-			<div class="card-vertical-button">
+	</span>
-				<div *ngIf="iconPath" class="iconContainer">
+	<ng-container *ngIf="isVerticalButton">
-					<div [class]="iconClass" [style.maxWidth]="iconWidth" [style.maxHeight]="iconHeight"></div>
+		<div class="card-vertical-button">
-				</div>
+			<div *ngIf="iconPath" class="iconContainer">
-				<h4 class="card-label">{{label}}</h4>
+				<div [class]="iconClass" [style.maxWidth]="iconWidth" [style.maxHeight]="iconHeight"></div>
 			</div>
-		</ng-container>
+			<h4 class="card-label">{{label}}</h4>
-
+		</div>
-		<ng-container *ngIf="isDetailsCard">
+	</ng-container>
-				<div class="card-content">
-					<h4 class="card-label">{{label}}</h4>
-					<p class="card-value">{{value}}</p>
-					<span *ngIf="actions">
-						<table class="model-table">
-							<tr *ngFor="let action of actions">
-								<td class="table-row">{{action.label}}</td>
-								<td *ngIf="action.actionTitle" class="table-row">
-									<a class="pointer prominent" (click)="onDidActionClick(action)">{{action.actionTitle}}</a>
-								</td>
-							</tr>
-						</table>
-					</span>
-			</div>
-		</ng-container>
 
+	<ng-container *ngIf="isDetailsCard">
+		<div class="card-content">
+			<h4 class="card-label">{{label}}</h4>
+			<p class="card-value">{{value}}</p>
+			<span *ngIf="actions">
+				<table class="model-table">
+					<tr *ngFor="let action of actions">
+						<td class="table-row">{{action.label}}</td>
+						<td *ngIf="action.actionTitle" class="table-row">
+							<a class="pointer prominent" (click)="onDidActionClick(action)">{{action.actionTitle}}</a>
+						</td>
+					</tr>
+				</table>
+			</span>
+		</div>
+	</ng-container>
 </div>

src/sql/parts/modelComponents/card.component.ts

@@ -29,7 +29,7 @@ export default class CardComponent extends ComponentWithIconBase implements ICom
 
 	private backgroundColor: string;
 
-	constructor( @Inject(forwardRef(() => ChangeDetectorRef)) changeRef: ChangeDetectorRef,
+	constructor(@Inject(forwardRef(() => ChangeDetectorRef)) changeRef: ChangeDetectorRef,
 		@Inject(forwardRef(() => ElementRef)) el: ElementRef,
 		@Inject(IWorkbenchThemeService) private themeService: IWorkbenchThemeService
 	) {
@@ -130,6 +130,14 @@ export default class CardComponent extends ComponentWithIconBase implements ICom
 		return this.cardType === 'VerticalButton';
 	}
 
+	public get showRadioButton():boolean{
+		return this.selectable && (this.selected || this._hasFocus)
+	}
+
+	public get showAsSelected(): boolean {
+		return this.selectable && this.selected;
+	}
+
 
 	public get actions(): ActionDescriptor[] {
 		return this.getPropertyOrDefault<CardProperties, ActionDescriptor[]>((props) => props.actions, []);
@@ -156,6 +164,7 @@ export default class CardComponent extends ComponentWithIconBase implements ICom
 
 	private updateTheme(theme: IColorTheme) {
 		this.backgroundColor = theme.getColor(colors.editorBackground, true).toString();
+		this._changeRef.detectChanges();
 	}
 
 	private onDidActionClick(action: ActionDescriptor): void {

src/sql/parts/modelComponents/card.css

@@ -1,4 +1,3 @@
-
 .model-card {
 	position: relative;
 	display: inline-block;
@@ -7,23 +6,18 @@
 	margin: 15px;
 	border-width: 1px;
 	border-style: solid;
-
 	text-align: left;
 	vertical-align: top;
-	box-shadow: rgba(120, 120, 120, 0.75) 0px 0px 6px;
 }
 
 .model-card.selected {
-	border-color: darkblue
+	border-color: rgb(0, 120, 215);
-}
+	box-shadow: rgba(0, 120, 215, 0.75) 0px 0px 6px;
-
-.vs-dark .monaco-workbench .model-card.selected,
-.hc-black .monaco-workbench .model-card.selected {
-	border-color: darkblue
 }
 
 .model-card.unselected {
 	border-color: rgb(214, 214, 214);
+	box-shadow: none;
 }
 
 
@@ -102,18 +96,40 @@
 	text-align: center;
 }
 
+.model-card .selection-indicator-container {
+	position: absolute;
+	top: 5px;
+	right: 5px;
+	overflow: hidden;
+	width: 16px;
+	height: 16px;
+	border-radius: 50%;
+	background-color: white;
+	border-width: 1px;
+	border-color: rgb(0, 120, 215);
+	border-style: solid;
+}
+
+.model-card .selection-indicator {
+	margin: 4px;
+	width: 8px;
+	height: 8px;
+	border-radius: 50%;
+	background-color: rgb(0, 120, 215);
+}
+
 .model-card .model-table {
 	border-spacing: 5px;
 }
 
 .model-table .table-row {
-		width: auto;
+	width: auto;
-		clear: both;
+	clear: both;
 }
 
 .model-table .table-cell {
-		vertical-align: top;
+	vertical-align: top;
-		padding: 7px;
+	padding: 7px;
 }
 
 .model-table a {