align with portal button style (#14187)

* align with portal button style * fix welcome page * image button * more fixes * use withProperties * add comment back * add border radius
2026-01-18 01:25:37 -05:00 · 2021-02-08 15:12:54 -08:00
parent 7a0ac71b98
commit a3cddbc8aa
67 changed files with 384 additions and 251 deletions
--- a/src/sql/workbench/api/browser/mainThreadModelViewDialog.ts
+++ b/src/sql/workbench/api/browser/mainThreadModelViewDialog.ts
@@ -135,6 +135,7 @@ export class MainThreadModelViewDialog implements MainThreadModelViewDialogShape
 			button = new DialogButton(details.label, details.enabled);
 			button.position = details.position;
 			button.hidden = details.hidden;
+			button.secondary = details.secondary;
 			button.onClick(() => this.onButtonClick(handle));
 			this._buttons.set(handle, button);
 		} else {
@@ -143,6 +144,7 @@ export class MainThreadModelViewDialog implements MainThreadModelViewDialogShape
 			button.hidden = details.hidden;
 			button.focused = details.focused;
 			button.position = details.position;
+			button.secondary = details.secondary;
 		}

 		return Promise.resolve();
--- a/src/sql/workbench/api/common/extHostModelViewDialog.ts
+++ b/src/sql/workbench/api/common/extHostModelViewDialog.ts
@@ -134,7 +134,7 @@ class DialogImpl extends ModelViewPanelImpl implements azdata.window.Dialog {
 		extension: IExtensionDescription) {
 		super('modelViewDialog', extHostModelViewDialog, extHostModelView, extension);
 		this.okButton = this._extHostModelViewDialog.createButton(DONE_LABEL);
-		this.cancelButton = this._extHostModelViewDialog.createButton(CANCEL_LABEL);
+		this.cancelButton = this._extHostModelViewDialog.createButton(CANCEL_LABEL, 'right', true);
 		this._operationHandler = new BackgroundOperationHandler('dialog', extHostTaskManagement);
 		this.okButton.onClick(() => {
 			this._operationHandler.createOperation();
@@ -219,6 +219,7 @@ class ButtonImpl implements azdata.window.Button {
 	private _hidden: boolean;
 	private _focused: boolean;
 	private _position: azdata.window.DialogButtonPosition;
+	private _secondary: boolean;

 	private _onClick = new Emitter<void>();
 	public onClick = this._onClick.event;
@@ -265,6 +266,15 @@ class ButtonImpl implements azdata.window.Button {
 		this._extHostModelViewDialog.updateButton(this);
 	}

+	public get secondary(): boolean {
+		return this._secondary;
+	}
+
+	public set secondary(value: boolean) {
+		this._secondary = value;
+		this._extHostModelViewDialog.updateButton(this);
+	}
+
 	public get focused(): boolean {
 		return this._focused;
 	}
@@ -386,10 +396,10 @@ class WizardImpl implements azdata.window.Wizard {

 	constructor(public title: string, public name: string, private _extHostModelViewDialog: ExtHostModelViewDialog, extHostTaskManagement: ExtHostBackgroundTaskManagementShape) {
 		this.doneButton = this._extHostModelViewDialog.createButton(DONE_LABEL);
-		this.cancelButton = this._extHostModelViewDialog.createButton(CANCEL_LABEL);
-		this.generateScriptButton = this._extHostModelViewDialog.createButton(GENERATE_SCRIPT_LABEL);
+		this.cancelButton = this._extHostModelViewDialog.createButton(CANCEL_LABEL, 'right', true);
+		this.generateScriptButton = this._extHostModelViewDialog.createButton(GENERATE_SCRIPT_LABEL, 'right', true);
 		this.nextButton = this._extHostModelViewDialog.createButton(NEXT_LABEL);
-		this.backButton = this._extHostModelViewDialog.createButton(PREVIOUS_LABEL);
+		this.backButton = this._extHostModelViewDialog.createButton(PREVIOUS_LABEL, 'right', true);
 		this._extHostModelViewDialog.registerWizardPageInfoChangedCallback(this, info => this.handlePageInfoChanged(info));
 		this._currentPage = 0;
 		this.onPageChanged(info => this._currentPage = info.newPage);
@@ -670,7 +680,10 @@ export class ExtHostModelViewDialog implements ExtHostModelViewDialogShape {
 			tabs.forEach(tab => this.updateTabContent(tab));
 		}
 		if (dialog.customButtons) {
-			dialog.customButtons.forEach(button => this.updateButton(button));
+			dialog.customButtons.forEach(button => {
+				button.secondary = true;
+				this.updateButton(button);
+			});
 		}
 		this.updateButton(dialog.okButton);
 		this.updateButton(dialog.cancelButton);
@@ -708,7 +721,8 @@ export class ExtHostModelViewDialog implements ExtHostModelViewDialogShape {
 			enabled: button.enabled,
 			hidden: button.hidden,
 			focused: button.focused,
-			position: button.position
+			position: button.position,
+			secondary: button.secondary
 		});
 	}

@@ -735,12 +749,13 @@ export class ExtHostModelViewDialog implements ExtHostModelViewDialogShape {
 		return tab;
 	}

-	public createButton(label: string, position: azdata.window.DialogButtonPosition = 'right'): azdata.window.Button {
+	public createButton(label: string, position: azdata.window.DialogButtonPosition = 'right', secondary: boolean = false): azdata.window.Button {
 		let button = new ButtonImpl(this);
 		this.getHandle(button);
 		this.registerOnClickCallback(button, button.getOnClickCallback());
 		button.label = label;
 		button.position = position;
+		button.secondary = secondary;
 		return button;
 	}

@@ -796,7 +811,10 @@ export class ExtHostModelViewDialog implements ExtHostModelViewDialogShape {
 		this.updateButton(wizard.doneButton);
 		this.updateButton(wizard.nextButton);
 		if (wizard.customButtons) {
-			wizard.customButtons.forEach(button => this.updateButton(button));
+			wizard.customButtons.forEach(button => {
+				button.secondary = true;
+				this.updateButton(button);
+			});
 		}
 		return this._proxy.$setWizardDetails(handle, {
 			title: wizard.title,
--- a/src/sql/workbench/api/common/sqlExtHostTypes.ts
+++ b/src/sql/workbench/api/common/sqlExtHostTypes.ts
@@ -272,6 +272,7 @@ export interface IModelViewButtonDetails {
 	hidden: boolean;
 	focused?: boolean;
 	position?: 'left' | 'right';
+	secondary?: boolean;
 }

 export interface IModelViewWizardPageDetails {
--- a/src/sql/workbench/browser/modal/modal.ts
+++ b/src/sql/workbench/browser/modal/modal.ts
@@ -191,7 +191,7 @@ export abstract class Modal extends Disposable implements IThemable {
 			this._modalHeaderSection = DOM.append(this._modalContent, DOM.$('.modal-header'));
 			if (this._modalOptions.hasBackButton) {
 				const container = DOM.append(this._modalHeaderSection, DOM.$('.modal-go-back'));
-				this._backButton = new Button(container);
+				this._backButton = new Button(container, { secondary: true });
 				this._backButton.icon = 'backButtonIcon';
 				this._backButton.title = localize('modal.back', "Back");
 			}
@@ -416,9 +416,9 @@ export abstract class Modal extends Disposable implements IThemable {
 	 * @param label Label to show on the button
 	 * @param onSelect The callback to call when the button is selected
 	 */
-	protected addFooterButton(label: string, onSelect: () => void, orientation: 'left' | 'right' = 'right'): Button {
+	protected addFooterButton(label: string, onSelect: () => void, orientation: 'left' | 'right' = 'right', isSecondary: boolean = false): Button {
 		let footerButton = DOM.$('.footer-button');
-		let button = this._register(new Button(footerButton));
+		let button = this._register(new Button(footerButton, { secondary: isSecondary }));
 		button.label = label;
 		button.onDidClick(() => onSelect()); // @todo this should be registered to dispose but that brakes some dialogs
 		if (orientation === 'left') {
--- a/src/sql/workbench/browser/modal/optionsDialog.ts
+++ b/src/sql/workbench/browser/modal/optionsDialog.ts
@@ -8,7 +8,6 @@ import * as DialogHelper from './dialogHelper';
 import { SelectBox } from 'sql/base/browser/ui/selectBox/selectBox';
 import { IModalOptions, Modal } from './modal';
 import * as OptionsDialogHelper from './optionsDialogHelper';
-import { attachButtonStyler } from 'sql/platform/theme/common/styler';

 import * as azdata from 'azdata';

@@ -72,13 +71,13 @@ export class OptionsDialog extends Modal {
 		attachModalDialogStyler(this, this._themeService);
 		if (this.backButton) {
 			this.backButton.onDidClick(() => this.cancel());
-			attachButtonStyler(this.backButton, this._themeService, { buttonBackground: SIDE_BAR_BACKGROUND, buttonHoverBackground: SIDE_BAR_BACKGROUND });
+			styler.attachButtonStyler(this.backButton, this._themeService, { buttonBackground: SIDE_BAR_BACKGROUND, buttonHoverBackground: SIDE_BAR_BACKGROUND });
 		}
 		let okButton = this.addFooterButton(localize('optionsDialog.ok', "OK"), () => this.ok());
-		let closeButton = this.addFooterButton(this.options.cancelLabel || localize('optionsDialog.cancel', "Cancel"), () => this.cancel());
+		let closeButton = this.addFooterButton(this.options.cancelLabel || localize('optionsDialog.cancel', "Cancel"), () => this.cancel(), 'right', true);
 		// Theme styler
-		attachButtonStyler(okButton, this._themeService);
-		attachButtonStyler(closeButton, this._themeService);
+		styler.attachButtonStyler(okButton, this._themeService);
+		styler.attachButtonStyler(closeButton, this._themeService);
 		this._register(this._themeService.onDidColorThemeChange(e => this.updateTheme(e)));
 		this.updateTheme(this._themeService.getColorTheme());
 	}
--- a/src/sql/workbench/browser/modelComponents/button.component.ts
+++ b/src/sql/workbench/browser/modelComponents/button.component.ts
@@ -11,19 +11,16 @@ import {
 import * as azdata from 'azdata';

 import { ComponentWithIconBase } from 'sql/workbench/browser/modelComponents/componentWithIconBase';
-import { attachButtonStyler } from 'sql/platform/theme/common/styler';

-import { SIDE_BAR_BACKGROUND, SIDE_BAR_TITLE_FOREGROUND } from 'vs/workbench/common/theme';
 import { IWorkbenchThemeService } from 'vs/workbench/services/themes/common/workbenchThemeService';
-import { focusBorder, foreground } from 'vs/platform/theme/common/colorRegistry';
 import { Button } from 'sql/base/browser/ui/button/button';
 import { InfoButton } from 'sql/base/browser/ui/infoButton/infoButton';
-import { Color } from 'vs/base/common/color';
 import { IComponentDescriptor, IComponent, IModelStore, ComponentEventType } from 'sql/platform/dashboard/browser/interfaces';
 import { convertSize } from 'sql/base/browser/dom';
 import { createIconCssClass } from 'sql/workbench/browser/modelComponents/iconUtils';
 import { ILogService } from 'vs/platform/log/common/log';
 import { IDisposable } from 'vs/base/common/lifecycle';
+import { attachButtonStyler } from 'vs/platform/theme/common/styler';

@Component({
 	selector: 'modelview-button',
@@ -78,7 +75,7 @@ export default class ButtonComponent extends ComponentWithIconBase<azdata.Button
 		this._currentButtonType = this.buttonType;
 		const elementToRemove = this._button?.element;
 		if (this._inputContainer) {
-			this._button = new Button(this._inputContainer.nativeElement);
+			this._button = new Button(this._inputContainer.nativeElement, { secondary: this.secondary });
 		} else if (this._infoButtonContainer) {
 			this._button = new InfoButton(this._infoButtonContainer.nativeElement);
 		}
@@ -192,22 +189,7 @@ export default class ButtonComponent extends ComponentWithIconBase<azdata.Button
 	 */
 	private updateStyler(): void {
 		this._buttonStyler?.dispose();
-		if (this.iconPath) {
-			this._buttonStyler = this._register(attachButtonStyler(this._button, this.themeService, {
-				buttonBackground: Color.transparent.toString(),
-				buttonHoverBackground: Color.transparent.toString(),
-				buttonFocusOutline: focusBorder,
-				buttonForeground: foreground
-			}));
-		} else {
-			this._buttonStyler = this._register(attachButtonStyler(this._button, this.themeService, {
-				buttonBackground: SIDE_BAR_BACKGROUND,
-				buttonHoverBackground: SIDE_BAR_BACKGROUND,
-				buttonForeground: SIDE_BAR_TITLE_FOREGROUND
-			}));
-		}
-
-
+		this._buttonStyler = this._register(attachButtonStyler(this._button, this.themeService));
 	}

 	protected get defaultIconHeight(): number {
@@ -267,4 +249,8 @@ export default class ButtonComponent extends ComponentWithIconBase<azdata.Button
 	private setFileProperties(properties: azdata.ButtonProperties, isFile: boolean): void {
 		properties.isFile = isFile;
 	}
+
+	private get secondary(): boolean {
+		return this.getPropertyOrDefault<boolean>((props) => props.secondary, false);
+	}
 }
--- a/src/sql/workbench/browser/modelComponents/table.component.ts
+++ b/src/sql/workbench/browser/modelComponents/table.component.ts
@@ -15,7 +15,7 @@ import { ComponentBase } from 'sql/workbench/browser/modelComponents/componentBa

 import { Table } from 'sql/base/browser/ui/table/table';
 import { TableDataView } from 'sql/base/browser/ui/table/tableDataView';
-import { attachTableStyler, attachButtonStyler } from 'sql/platform/theme/common/styler';
+import { attachTableStyler } from 'sql/platform/theme/common/styler';
 import { IWorkbenchThemeService } from 'vs/workbench/services/themes/common/workbenchThemeService';
 import { getContentHeight, getContentWidth, Dimension, isAncestor } from 'vs/base/browser/dom';
 import { RowSelectionModel } from 'sql/base/browser/ui/table/plugins/rowSelectionModel.plugin';
@@ -34,6 +34,7 @@ import { onUnexpectedError } from 'vs/base/common/errors';
 import { ILogService } from 'vs/platform/log/common/log';
 import { TableCellClickEventArgs } from 'sql/base/browser/ui/table/plugins/tableColumn';
 import { HyperlinkCellValue, HyperlinkColumn } from 'sql/base/browser/ui/table/plugins/hyperlinkColumn.plugin';
+import { attachButtonStyler } from 'vs/platform/theme/common/styler';

 export enum ColumnSizingMode {
 	ForceFit = 0,	// all columns will be sized to fit in viewable space, no horiz scroll bar
--- a/src/sql/workbench/contrib/assessment/browser/asmtResultsView.component.ts
+++ b/src/sql/workbench/contrib/assessment/browser/asmtResultsView.component.ts
@@ -19,7 +19,6 @@ import { IInstantiationService } from 'vs/platform/instantiation/common/instanti
 import { IDashboardService } from 'sql/platform/dashboard/browser/dashboardService';
 import { IWorkbenchThemeService } from 'vs/workbench/services/themes/common/workbenchThemeService';
 import { IColorTheme } from 'vs/platform/theme/common/themeService';
-import { attachButtonStyler } from 'sql/platform/theme/common/styler';
 import { RowDetailView, ExtendedItem } from 'sql/base/browser/ui/table/plugins/rowDetailView';
 import {
 	IAssessmentComponent,
@@ -46,6 +45,7 @@ import { ITableStyles } from 'sql/base/browser/ui/table/interfaces';
 import { TelemetryView } from 'sql/platform/telemetry/common/telemetryKeys';
 import { LocalizedStrings } from 'sql/workbench/contrib/assessment/common/strings';
 import { ConnectionManagementInfo } from 'sql/platform/connection/common/connectionManagementInfo';
+import { attachButtonStyler } from 'vs/platform/theme/common/styler';

 export const ASMTRESULTSVIEW_SELECTOR: string = 'asmt-results-view-component';
 export const ROW_HEIGHT: number = 25;
--- a/src/sql/workbench/contrib/backup/browser/backup.component.ts
+++ b/src/sql/workbench/contrib/backup/browser/backup.component.ts
@@ -11,7 +11,7 @@ import { Checkbox } from 'sql/base/browser/ui/checkbox/checkbox';
 import { InputBox } from 'sql/base/browser/ui/inputBox/inputBox';
 import { ListBox } from 'sql/base/browser/ui/listBox/listBox';
 import { SelectBox } from 'sql/base/browser/ui/selectBox/selectBox';
-import { attachButtonStyler, attachListBoxStyler, attachInputBoxStyler, attachSelectBoxStyler, attachCheckboxStyler } from 'sql/platform/theme/common/styler';
+import { attachListBoxStyler, attachInputBoxStyler, attachSelectBoxStyler, attachCheckboxStyler } from 'sql/platform/theme/common/styler';
 import { IConnectionProfile } from 'sql/platform/connection/common/interfaces';
 import * as BackupConstants from 'sql/workbench/contrib/backup/common/constants';
 import { IBackupService, TaskExecutionMode } from 'sql/platform/backup/common/backupService';
@@ -34,6 +34,7 @@ import { AngularDisposable } from 'sql/base/browser/lifecycle';
 import { SIDE_BAR_BACKGROUND } from 'vs/workbench/common/theme';
 import { fileFiltersSet } from 'sql/workbench/services/restore/common/constants';
 import { IColorTheme } from 'vs/platform/theme/common/themeService';
+import { attachButtonStyler } from 'vs/platform/theme/common/styler';

 export const BACKUP_SELECTOR: string = 'backup-component';

@@ -292,11 +293,11 @@ export class BackupComponent extends AngularDisposable {
 		this.pathListBox.render(this.pathElement!.nativeElement);

 		// Set backup path add/remove buttons
-		this.addPathButton = this._register(new Button(this.addPathElement!.nativeElement));
+		this.addPathButton = this._register(new Button(this.addPathElement!.nativeElement, { secondary: true }));
 		this.addPathButton.label = '+';
 		this.addPathButton.title = localize('addFile', "Add a file");

-		this.removePathButton = this._register(new Button(this.removePathElement!.nativeElement));
+		this.removePathButton = this._register(new Button(this.removePathElement!.nativeElement, { secondary: true }));
 		this.removePathButton.label = '-';
 		this.removePathButton.title = localize('removeFile', "Remove files");

@@ -401,7 +402,7 @@ export class BackupComponent extends AngularDisposable {

 	private addFooterButtons(): void {
 		// Set script footer button
-		this.scriptButton = this._register(new Button(this.scriptButtonElement!.nativeElement));
+		this.scriptButton = this._register(new Button(this.scriptButtonElement!.nativeElement, { secondary: true }));
 		this.scriptButton.label = localize('backupComponent.script', "Script");
 		this.scriptButton.onDidClick(() => this.onScript());
 		this._register(attachButtonStyler(this.scriptButton, this.themeService));
@@ -415,7 +416,7 @@ export class BackupComponent extends AngularDisposable {
 		this.backupEnabled = false;

 		// Set cancel footer button
-		this.cancelButton = this._register(new Button(this.cancelButtonElement!.nativeElement));
+		this.cancelButton = this._register(new Button(this.cancelButtonElement!.nativeElement, { secondary: true }));
 		this.cancelButton.label = localize('backupComponent.cancel', "Cancel");
 		this.cancelButton.onDidClick(() => this.onCancel());
 		this._register(attachButtonStyler(this.cancelButton, this.themeService));
--- a/src/sql/workbench/contrib/jobManagement/browser/jobsView.component.ts
+++ b/src/sql/workbench/contrib/jobManagement/browser/jobsView.component.ts
@@ -30,10 +30,10 @@ import { escape } from 'sql/base/common/strings';
 import { IWorkbenchThemeService } from 'vs/workbench/services/themes/common/workbenchThemeService';
 import { tableBackground, cellBackground, cellBorderColor } from 'sql/platform/theme/common/colors';
 import { TelemetryView } from 'sql/platform/telemetry/common/telemetryKeys';
-import { attachButtonStyler } from 'sql/platform/theme/common/styler';
 import { IColorTheme } from 'vs/platform/theme/common/themeService';
 import { onUnexpectedError } from 'vs/base/common/errors';
 import { IAdsTelemetryService } from 'sql/platform/telemetry/common/telemetry';
+import { attachButtonStyler } from 'vs/platform/theme/common/styler';

 export const JOBSVIEW_SELECTOR: string = 'jobsview-component';
 export const ROW_HEIGHT: number = 45;
--- a/src/sql/workbench/contrib/jobManagement/browser/notebooksView.component.ts
+++ b/src/sql/workbench/contrib/jobManagement/browser/notebooksView.component.ts
@@ -30,11 +30,11 @@ import { escape } from 'sql/base/common/strings';
 import { IWorkbenchThemeService } from 'vs/workbench/services/themes/common/workbenchThemeService';
 import { tableBackground, cellBackground, cellBorderColor } from 'sql/platform/theme/common/colors';
 import { TelemetryView } from 'sql/platform/telemetry/common/telemetryKeys';
-import { attachButtonStyler } from 'sql/platform/theme/common/styler';
 import { Taskbar } from 'sql/base/browser/ui/taskbar/taskbar';
 import { onUnexpectedError } from 'vs/base/common/errors';
 import { IColorTheme } from 'vs/platform/theme/common/themeService';
 import { IAdsTelemetryService } from 'sql/platform/telemetry/common/telemetry';
+import { attachButtonStyler } from 'vs/platform/theme/common/styler';


 export const NOTEBOOKSVIEW_SELECTOR: string = 'notebooksview-component';
--- a/src/sql/workbench/contrib/objectExplorer/browser/serverTreeView.ts
+++ b/src/sql/workbench/contrib/objectExplorer/browser/serverTreeView.ts
@@ -8,7 +8,7 @@ import * as errors from 'vs/base/common/errors';
 import { IInstantiationService, ServicesAccessor } from 'vs/platform/instantiation/common/instantiation';
 import Severity from 'vs/base/common/severity';
 import { IThemeService } from 'vs/platform/theme/common/themeService';
-import { attachListStyler } from 'vs/platform/theme/common/styler';
+import { attachButtonStyler, attachListStyler } from 'vs/platform/theme/common/styler';
 import { ISelectionEvent, ITree } from 'vs/base/parts/tree/browser/tree';
 import { Disposable } from 'vs/base/common/lifecycle';
 import { localize } from 'vs/nls';
@@ -27,7 +27,6 @@ import { TreeSelectionHandler } from 'sql/workbench/services/objectExplorer/brow
 import { IObjectExplorerService, IServerTreeView } from 'sql/workbench/services/objectExplorer/browser/objectExplorerService';
 import { IConnectionProfile } from 'sql/platform/connection/common/interfaces';
 import { Button } from 'sql/base/browser/ui/button/button';
-import { attachButtonStyler } from 'sql/platform/theme/common/styler';
 import { TreeNode, TreeItemCollapsibleState } from 'sql/workbench/services/objectExplorer/common/treeNode';
 import { IErrorMessageService } from 'sql/platform/errorMessage/common/errorMessageService';
 import { ServerTreeActionProvider } from 'sql/workbench/services/objectExplorer/browser/serverTreeActionProvider';
--- a/src/sql/workbench/contrib/resourceViewer/browser/resourceViewerTable.ts
+++ b/src/sql/workbench/contrib/resourceViewer/browser/resourceViewerTable.ts
@@ -6,7 +6,7 @@
 import 'vs/css!./media/resourceViewerTable';
 import * as azdata from 'azdata';
 import { Table } from 'sql/base/browser/ui/table/table';
-import { attachTableStyler, attachButtonStyler } from 'sql/platform/theme/common/styler';
+import { attachTableStyler } from 'sql/platform/theme/common/styler';
 import { RowSelectionModel } from 'sql/base/browser/ui/table/plugins/rowSelectionModel.plugin';

 import { IWorkbenchThemeService } from 'vs/workbench/services/themes/common/workbenchThemeService';
@@ -24,6 +24,7 @@ import { ColumnDefinition } from 'sql/workbench/browser/editor/resourceViewer/re
 import { Emitter } from 'vs/base/common/event';
 import { ContextMenuAnchor } from 'sql/workbench/contrib/resourceViewer/browser/resourceViewerEditor';
 import { LoadingSpinnerPlugin } from 'sql/base/browser/ui/table/plugins/loadingSpinner.plugin';
+import { attachButtonStyler } from 'vs/platform/theme/common/styler';

 export class ResourceViewerTable extends Disposable {

--- a/src/sql/workbench/contrib/webview/browser/webViewDialog.ts
+++ b/src/sql/workbench/contrib/webview/browser/webViewDialog.ts
@@ -6,7 +6,6 @@
 import { Button } from 'sql/base/browser/ui/button/button';
 import { Modal } from 'sql/workbench/browser/modal/modal';
 import * as TelemetryKeys from 'sql/platform/telemetry/common/telemetryKeys';
-import { attachButtonStyler } from 'sql/platform/theme/common/styler';
 import { IThemeService } from 'vs/platform/theme/common/themeService';
 import { Event, Emitter } from 'vs/base/common/event';
 import { IContextKeyService } from 'vs/platform/contextkey/common/contextkey';
@@ -20,6 +19,7 @@ import { ITextResourcePropertiesService } from 'vs/editor/common/services/textRe
 import { IAdsTelemetryService } from 'sql/platform/telemetry/common/telemetry';
 import { attachModalDialogStyler } from 'sql/workbench/common/styler';
 import { ILayoutService } from 'vs/platform/layout/browser/layoutService';
+import { attachButtonStyler } from 'vs/platform/theme/common/styler';

 export class WebViewDialog extends Modal {

--- a/src/sql/workbench/contrib/welcome/page/browser/welcomePage.ts
+++ b/src/sql/workbench/contrib/welcome/page/browser/welcomePage.ts
@@ -28,9 +28,9 @@ import { IWorkbenchExtensionEnablementService, EnablementState, IExtensionRecomm
 import { ILifecycleService, StartupKind } from 'vs/platform/lifecycle/common/lifecycle';
 import { Disposable } from 'vs/base/common/lifecycle';
 import { splitName } from 'vs/base/common/labels';
-import { registerThemingParticipant } from 'vs/platform/theme/common/themeService';
-import { buttonSecondaryBackground, buttonSecondaryBorder, buttonSecondary, buttonSecondaryHoverColor, tileBorder, disabledButton, disabledButtonBackground, gradientOne, gradientTwo, gradientBackground, extensionPackHeaderShadow, extensionPackGradientColorOneColor, extensionPackGradientColorTwoColor, tileBoxShadow, hoverShadow } from 'sql/platform/theme/common/colorRegistry';
-import { registerColor, foreground, textLinkActiveForeground, descriptionForeground, activeContrastBorder, buttonForeground, menuBorder, menuForeground, editorWidgetBorder, selectBackground, buttonHoverBackground, selectBorder, iconForeground, textLinkForeground, inputBackground, focusBorder, listFocusBackground, listFocusForeground } from 'vs/platform/theme/common/colorRegistry';
+import { IThemeService, registerThemingParticipant } from 'vs/platform/theme/common/themeService';
+import { tileBorder, gradientOne, gradientTwo, gradientBackground, extensionPackHeaderShadow, extensionPackGradientColorOneColor, extensionPackGradientColorTwoColor, tileBoxShadow, hoverShadow } from 'sql/platform/theme/common/colorRegistry';
+import { registerColor, foreground, textLinkActiveForeground, descriptionForeground, activeContrastBorder, buttonForeground, menuBorder, menuForeground, editorWidgetBorder, selectBackground, buttonHoverBackground, selectBorder, iconForeground, textLinkForeground, inputBackground, focusBorder, listFocusBackground, listFocusForeground, buttonSecondaryBackground, buttonSecondaryBorder, buttonDisabledForeground, buttonDisabledBackground, buttonSecondaryForeground, buttonSecondaryHoverBackground } from 'vs/platform/theme/common/colorRegistry';
 import { IExtensionsWorkbenchService } from 'vs/workbench/contrib/extensions/common/extensions';
 import { IEditorInputFactory, EditorInput } from 'vs/workbench/common/editor';
 import { INotificationService, Severity } from 'vs/platform/notification/common/notification';
@@ -52,6 +52,7 @@ import { Button } from 'sql/base/browser/ui/button/button';
 import { IContextMenuService } from 'vs/platform/contextview/browser/contextView';
 import { ICommandAction, MenuItemAction } from 'vs/platform/actions/common/actions';
 import { IContextKeyService } from 'vs/platform/contextkey/common/contextkey';
+import { attachButtonStyler } from 'vs/platform/theme/common/styler';
 const configurationKey = 'workbench.startupEditor';
 const oldConfigurationKey = 'workbench.welcome.enabled';
 const telemetryFrom = 'welcomePage';
@@ -247,7 +248,8 @@ class WelcomePage extends Disposable {
 		@IWorkbenchLayoutService protected layoutService: IWorkbenchLayoutService,
 		@ICommandService private readonly commandService: ICommandService,
 		@IContextMenuService private readonly contextMenuService: IContextMenuService,
-		@IContextKeyService private readonly contextKeyService: IContextKeyService) {
+		@IContextKeyService private readonly contextKeyService: IContextKeyService,
+		@IThemeService private themeService: IThemeService) {
 		super();
 		this._register(lifecycleService.onShutdown(() => this.dispose()));
 		const recentlyOpened = this.workspacesService.getRecentlyOpened();
@@ -569,6 +571,7 @@ class WelcomePage extends Disposable {
 			extensionPacks.forEach((extension) => {
 				const installText = localize('welcomePage.install', "Install");
 				let dropdownBtn = this._register(new Button(btnContainer));
+				this._register(attachButtonStyler(dropdownBtn, this.themeService));
 				dropdownBtn.label = installText;
 				const classes = ['btn'];
 				const getDropdownBtn = container.querySelector('.extensionPack .monaco-button:first-of-type') as HTMLAnchorElement;
@@ -598,6 +601,7 @@ class WelcomePage extends Disposable {
 				installedButton.label = installedText;
 				installedButton.enabled = false;
 				const getInstalledButton = container.querySelector('.extensionPack .monaco-button:nth-of-type(2)') as HTMLAnchorElement;
+				this._register(attachButtonStyler(installedButton, this.themeService));

 				getInstalledButton.innerText = localize('welcomePage.installed', "Installed");
 				getInstalledButton.title = extension.isKeymap ? localize('welcomePage.installedKeymap', "{0} keymap is already installed", extension.name) : localize('welcomePage.installedExtensionPack', "{0} support is already installed", extension.name);
@@ -874,7 +878,7 @@ registerThemingParticipant((theme, collector) => {
 	}
 	const buttonHoverBackgroundColor = theme.getColor(buttonHoverBackground);
 	if (buttonHoverBackgroundColor) {
-		collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer .btn-primary:hover { background: ${buttonHoverBackgroundColor}}`);
+		collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer .btn-primary:hover { background-color: ${buttonHoverBackgroundColor}}`);
 	}
 	const buttonSecondaryBackgroundColor = theme.getColor(buttonSecondaryBackground);
 	if (buttonSecondaryBackgroundColor) {
@@ -884,13 +888,13 @@ registerThemingParticipant((theme, collector) => {
 	if (buttonSecondaryBorderColor) {
 		collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer .btn-secondary .monaco-button{ border: 1px solid ${buttonSecondaryBorderColor}}`);
 	}
-	const buttonSecondaryColor = theme.getColor(buttonSecondary);
+	const buttonSecondaryColor = theme.getColor(buttonSecondaryForeground);
 	if (buttonSecondaryColor) {
 		collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer .btn-secondary { color: ${buttonSecondaryColor} !important}`);
 	}
-	const buttonSecondaryHover = theme.getColor(buttonSecondaryHoverColor);
+	const buttonSecondaryHover = theme.getColor(buttonSecondaryHoverBackground);
 	if (buttonSecondaryColor) {
-		collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer .btn-secondary:hover:not(.disabled) { color: ${buttonSecondaryHover};}`);
+		collector.addRule(`.monaco-workbench .part.editor > .content .welcomePageContainer .btn-secondary:hover:not(.disabled) { background-color: ${buttonSecondaryHover};}`);
 	}
 	const selectBackgroundColor = theme.getColor(selectBackground);
 	if (selectBackgroundColor) {
@@ -933,11 +937,11 @@ registerThemingParticipant((theme, collector) => {
 	if (descriptionColor) {
 		collector.addRule(`.monaco-workbench .part.editor > .content .welcomePage .detail { color: ${descriptionColor}; }`);
 	}
-	const disabledButtonColor = theme.getColor(disabledButton);
+	const disabledButtonColor = theme.getColor(buttonDisabledForeground);
 	if (disabledButtonColor) {
 		collector.addRule(`.monaco-workbench .part.editor > .content .welcomePage .btn:disabled { color: ${disabledButtonColor}; }`);
 	}
-	const disabledButtonBackgroundColor = theme.getColor(disabledButtonBackground);
+	const disabledButtonBackgroundColor = theme.getColor(buttonDisabledBackground);
 	if (disabledButtonColor) {
 		collector.addRule(`.monaco-workbench .part.editor > .content .welcomePage .btn:disabled { background: ${disabledButtonBackgroundColor}; }`);
 	}
--- a/src/sql/workbench/services/accountManagement/browser/accountDialog.ts
+++ b/src/sql/workbench/services/accountManagement/browser/accountDialog.ts
@@ -10,7 +10,7 @@ import { List } from 'vs/base/browser/ui/list/listWidget';
 import { Event, Emitter } from 'vs/base/common/event';
 import { localize } from 'vs/nls';
 import { IThemeService } from 'vs/platform/theme/common/themeService';
-import { attachListStyler } from 'vs/platform/theme/common/styler';
+import { attachButtonStyler, attachListStyler } from 'vs/platform/theme/common/styler';
 import { IAction } from 'vs/base/common/actions';
 import { IContextMenuService } from 'vs/platform/contextview/browser/contextView';
 import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
@@ -23,7 +23,6 @@ import * as azdata from 'azdata';

 import { Button } from 'sql/base/browser/ui/button/button';
 import { Modal } from 'sql/workbench/browser/modal/modal';
-import { attachButtonStyler } from 'sql/platform/theme/common/styler';
 import { AccountViewModel } from 'sql/platform/accounts/common/accountViewModel';
 import { AddAccountAction } from 'sql/platform/accounts/common/accountActions';
 import { AccountListRenderer, AccountListDelegate } from 'sql/workbench/services/accountManagement/browser/accountListRenderer';
--- a/src/sql/workbench/services/accountManagement/browser/autoOAuthDialog.ts
+++ b/src/sql/workbench/services/accountManagement/browser/autoOAuthDialog.ts
@@ -6,7 +6,7 @@
 import 'vs/css!./media/autoOAuthDialog';

 import { IThemeService } from 'vs/platform/theme/common/themeService';
-import { attachInputBoxStyler } from 'vs/platform/theme/common/styler';
+import { attachButtonStyler, attachInputBoxStyler } from 'vs/platform/theme/common/styler';
 import { Event, Emitter } from 'vs/base/common/event';
 import { IContextViewService } from 'vs/platform/contextview/browser/contextView';
 import { localize } from 'vs/nls';
@@ -17,7 +17,6 @@ import { $, append } from 'vs/base/browser/dom';
 import { Button } from 'sql/base/browser/ui/button/button';
 import { Modal } from 'sql/workbench/browser/modal/modal';
 import { InputBox } from 'sql/base/browser/ui/inputBox/inputBox';
-import { attachButtonStyler } from 'sql/platform/theme/common/styler';
 import * as TelemetryKeys from 'sql/platform/telemetry/common/telemetryKeys';
 import { IClipboardService } from 'vs/platform/clipboard/common/clipboardService';
 import { ILogService } from 'vs/platform/log/common/log';
@@ -79,7 +78,7 @@ export class AutoOAuthDialog extends Modal {
 		this._register(attachButtonStyler(this.backButton!, this._themeService, { buttonBackground: SIDE_BAR_BACKGROUND, buttonHoverBackground: SIDE_BAR_BACKGROUND }));

 		this._copyAndOpenButton = this.addFooterButton(localize('copyAndOpen', "Copy & Open"), () => this.addAccount());
-		this._closeButton = this.addFooterButton(localize('oauthDialog.cancel', "Cancel"), () => this.cancel());
+		this._closeButton = this.addFooterButton(localize('oauthDialog.cancel', "Cancel"), () => this.cancel(), 'right', true);
 		this.registerListeners();
 		this._userCodeInputBox!.disable();
 		this._websiteInputBox!.disable();
--- a/src/sql/workbench/services/connection/browser/connectionDialogWidget.ts
+++ b/src/sql/workbench/services/connection/browser/connectionDialogWidget.ts
@@ -5,7 +5,6 @@

 import 'vs/css!./media/connectionDialog';
 import { Button } from 'sql/base/browser/ui/button/button';
-import { attachButtonStyler } from 'sql/platform/theme/common/styler';
 import { SelectBox } from 'sql/base/browser/ui/selectBox/selectBox';
 import { Modal } from 'sql/workbench/browser/modal/modal';
 import { IConnectionManagementService, INewConnectionParams } from 'sql/platform/connection/common/connectionManagement';
@@ -299,7 +298,7 @@ export class ConnectionDialogWidget extends Modal {
 		const cancelLabel = localize('connectionDialog.cancel', "Cancel");
 		this._connectButton = this.addFooterButton(connectLabel, () => this.connect());
 		this._connectButton.enabled = false;
-		this._closeButton = this.addFooterButton(cancelLabel, () => this.cancel());
+		this._closeButton = this.addFooterButton(cancelLabel, () => this.cancel(), 'right', true);
 		this.registerListeners();
 		this.onProviderTypeSelected(this._providerTypeSelectBox.value);
 	}
@@ -320,8 +319,8 @@ export class ConnectionDialogWidget extends Modal {
 	private registerListeners(): void {
 		// Theme styler
 		this._register(styler.attachSelectBoxStyler(this._providerTypeSelectBox, this._themeService));
-		this._register(attachButtonStyler(this._connectButton, this._themeService));
-		this._register(attachButtonStyler(this._closeButton, this._themeService));
+		this._register(styler.attachButtonStyler(this._connectButton, this._themeService));
+		this._register(styler.attachButtonStyler(this._closeButton, this._themeService));

 		this._register(this._providerTypeSelectBox.onDidSelect(selectedProviderType => {
 			this.onProviderTypeSelected(selectedProviderType.selected);
--- a/src/sql/workbench/services/connection/browser/connectionWidget.ts
+++ b/src/sql/workbench/services/connection/browser/connectionWidget.ts
@@ -35,6 +35,7 @@ import { endsWith, startsWith } from 'vs/base/common/strings';
 import { IClipboardService } from 'vs/platform/clipboard/common/clipboardService';
 import { IConfigurationService } from 'vs/platform/configuration/common/configuration';
 import { ILogService } from 'vs/platform/log/common/log';
+import { attachButtonStyler } from 'vs/platform/theme/common/styler';

 export enum AuthenticationType {
 	SqlLogin = 'SqlLogin',
@@ -329,7 +330,7 @@ export class ConnectionWidget extends lifecycle.Disposable {
 		let cellContainer = DOM.append(rowContainer, DOM.$('td'));
 		cellContainer.setAttribute('align', 'right');
 		let divContainer = DOM.append(cellContainer, DOM.$('div.advanced-button'));
-		let button = new Button(divContainer);
+		let button = new Button(divContainer, { secondary: true });
 		button.label = title;
 		button.onDidClick(() => {
 			//open advanced page
@@ -351,7 +352,7 @@ export class ConnectionWidget extends lifecycle.Disposable {
 		this._register(styler.attachInputBoxStyler(this._connectionNameInputBox, this._themeService));
 		this._register(styler.attachInputBoxStyler(this._userNameInputBox, this._themeService));
 		this._register(styler.attachInputBoxStyler(this._passwordInputBox, this._themeService));
-		this._register(styler.attachButtonStyler(this._advancedButton, this._themeService));
+		this._register(attachButtonStyler(this._advancedButton, this._themeService));
 		this._register(styler.attachCheckboxStyler(this._rememberPasswordCheckBox, this._themeService));
 		this._register(styler.attachSelectBoxStyler(this._azureAccountDropdown, this._themeService));
 		if (this._serverGroupSelectBox) {
--- a/src/sql/workbench/services/dashboard/browser/newDashboardTabDialogImpl.ts
+++ b/src/sql/workbench/services/dashboard/browser/newDashboardTabDialogImpl.ts
@@ -10,7 +10,7 @@ import { List } from 'vs/base/browser/ui/list/listWidget';
 import { Event, Emitter } from 'vs/base/common/event';
 import { localize } from 'vs/nls';
 import { IThemeService } from 'vs/platform/theme/common/themeService';
-import { attachListStyler } from 'vs/platform/theme/common/styler';
+import { attachButtonStyler, attachListStyler } from 'vs/platform/theme/common/styler';
 import { IContextKeyService } from 'vs/platform/contextkey/common/contextkey';
 import { IListVirtualDelegate, IListRenderer } from 'vs/base/browser/ui/list/list';
 import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent';
@@ -18,7 +18,6 @@ import { KeyCode } from 'vs/base/common/keyCodes';

 import { Button } from 'sql/base/browser/ui/button/button';
 import { Modal } from 'sql/workbench/browser/modal/modal';
-import { attachButtonStyler } from 'sql/platform/theme/common/styler';
 import * as TelemetryKeys from 'sql/platform/telemetry/common/telemetryKeys';
 import { NewDashboardTabViewModel, IDashboardUITab } from 'sql/workbench/services/dashboard/browser/newDashboardTabViewModel';
 import { IDashboardTab } from 'sql/workbench/services/dashboard/browser/common/interfaces';
@@ -147,7 +146,7 @@ export class NewDashboardTabDialog extends Modal {
 		attachModalDialogStyler(this, this._themeService);

 		this._addNewTabButton = this.addFooterButton(localize('newDashboardTab.ok', "OK"), () => this.addNewTabs());
-		this._cancelButton = this.addFooterButton(localize('newDashboardTab.cancel', "Cancel"), () => this.cancel());
+		this._cancelButton = this.addFooterButton(localize('newDashboardTab.cancel', "Cancel"), () => this.cancel(), 'right', true);
 		this.registerListeners();
 	}

--- a/src/sql/workbench/services/dialog/browser/dialogModal.ts
+++ b/src/sql/workbench/services/dialog/browser/dialogModal.ts
@@ -91,7 +91,7 @@ export class DialogModal extends Modal {
 	}

 	private addDialogButton(button: DialogButton, onSelect: () => void = () => undefined, registerClickEvent: boolean = true, requireDialogValid: boolean = false): Button {
-		let buttonElement = this.addFooterButton(button.label, onSelect, button.position);
+		let buttonElement = this.addFooterButton(button.label, onSelect, button.position, button.secondary);
 		buttonElement.enabled = button.enabled;
 		if (registerClickEvent) {
 			button.registerClickEvent(buttonElement.onDidClick);
--- a/src/sql/workbench/services/dialog/browser/wizardModal.ts
+++ b/src/sql/workbench/services/dialog/browser/wizardModal.ts
@@ -100,7 +100,7 @@ export class WizardModal extends Modal {
 	}

 	private addDialogButton(button: DialogButton, onSelect: () => void = () => undefined, registerClickEvent: boolean = true, requirePageValid: boolean = false): Button {
-		let buttonElement = this.addFooterButton(button.label, onSelect, button.position);
+		let buttonElement = this.addFooterButton(button.label, onSelect, button.position, button.secondary);
 		buttonElement.enabled = button.enabled;
 		if (registerClickEvent) {
 			button.registerClickEvent(buttonElement.onDidClick);
--- a/src/sql/workbench/services/dialog/common/dialogTypes.ts
+++ b/src/sql/workbench/services/dialog/common/dialogTypes.ts
@@ -86,6 +86,7 @@ export class DialogButton implements azdata.window.Button {
 	private _hidden: boolean;
 	private _focused: boolean | undefined;
 	private _position?: azdata.window.DialogButtonPosition;
+	private _secondary: boolean | undefined;
 	private _onClick: Emitter<void> = new Emitter<void>();
 	public readonly onClick: Event<void> = this._onClick.event;
 	private _onUpdate: Emitter<void> = new Emitter<void>();
@@ -142,6 +143,14 @@ export class DialogButton implements azdata.window.Button {
 		this._onUpdate.fire();
 	}

+	public get secondary(): boolean | undefined {
+		return this._secondary;
+	}
+
+	public set secondary(value: boolean | undefined) {
+		this._secondary = value;
+	}
+
 	/**
 	 * Register an event that notifies the button that it has been clicked
 	 */
--- a/src/sql/workbench/services/errorMessage/browser/errorMessageDialog.ts
+++ b/src/sql/workbench/services/errorMessage/browser/errorMessageDialog.ts
@@ -7,7 +7,6 @@ import 'vs/css!./media/errorMessageDialog';
 import { Button } from 'sql/base/browser/ui/button/button';
 import { Modal } from 'sql/workbench/browser/modal/modal';
 import * as TelemetryKeys from 'sql/platform/telemetry/common/telemetryKeys';
-import { attachButtonStyler } from 'sql/platform/theme/common/styler';

 import Severity from 'vs/base/common/severity';
 import { IThemeService } from 'vs/platform/theme/common/themeService';
@@ -24,6 +23,7 @@ import { IAdsTelemetryService } from 'sql/platform/telemetry/common/telemetry';
 import { onUnexpectedError } from 'vs/base/common/errors';
 import { attachModalDialogStyler } from 'sql/workbench/common/styler';
 import { ILayoutService } from 'vs/platform/layout/browser/layoutService';
+import { attachButtonStyler } from 'vs/platform/theme/common/styler';

 const maxActions = 1;

@@ -79,14 +79,14 @@ export class ErrorMessageDialog extends Modal {
 			if (this._messageDetails) {
 				this._clipboardService.writeText(this._messageDetails!).catch(err => onUnexpectedError(err));
 			}
-		}, 'left');
+		}, 'left', true);
 		this._copyButton!.icon = 'codicon scriptToClipboard';
 		this._copyButton!.element.title = copyButtonLabel;
 		this._register(attachButtonStyler(this._copyButton!, this._themeService, { buttonBackground: SIDE_BAR_BACKGROUND, buttonHoverBackground: SIDE_BAR_BACKGROUND, buttonForeground: SIDE_BAR_FOREGROUND }));
 	}

 	private createStandardButton(label: string, onSelect: () => void): Button {
-		let button = this.addFooterButton(label, onSelect, 'right');
+		let button = this.addFooterButton(label, onSelect, 'right', true);
 		this._register(attachButtonStyler(button, this._themeService));
 		return button;
 	}
--- a/src/sql/workbench/services/fileBrowser/browser/fileBrowserDialog.ts
+++ b/src/sql/workbench/services/fileBrowser/browser/fileBrowserDialog.ts
@@ -9,7 +9,6 @@ import { InputBox, OnLoseFocusParams } from 'sql/base/browser/ui/inputBox/inputB
 import { SelectBox } from 'sql/base/browser/ui/selectBox/selectBox';
 import * as DialogHelper from 'sql/workbench/browser/modal/dialogHelper';
 import { Modal } from 'sql/workbench/browser/modal/modal';
-import { attachButtonStyler } from 'sql/platform/theme/common/styler';
 import * as TelemetryKeys from 'sql/platform/telemetry/common/telemetryKeys';
 import { FileNode } from 'sql/workbench/services/fileBrowser/common/fileNode';
 import { FileBrowserTreeView } from 'sql/workbench/services/fileBrowser/browser/fileBrowserTreeView';
@@ -21,7 +20,7 @@ import { Event, Emitter } from 'vs/base/common/event';
 import { localize } from 'vs/nls';
 import { IContextViewService } from 'vs/platform/contextview/browser/contextView';
 import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
-import { attachInputBoxStyler, attachSelectBoxStyler } from 'vs/platform/theme/common/styler';
+import { attachButtonStyler, attachInputBoxStyler, attachSelectBoxStyler } from 'vs/platform/theme/common/styler';
 import { SIDE_BAR_BACKGROUND } from 'vs/workbench/common/theme';
 import * as DOM from 'vs/base/browser/dom';
 import * as strings from 'vs/base/common/strings';
@@ -105,7 +104,7 @@ export class FileBrowserDialog extends Modal {

 		this._okButton = this.addFooterButton(localize('fileBrowser.ok', "OK"), () => this.ok());
 		this._okButton.enabled = false;
-		this._cancelButton = this.addFooterButton(localize('fileBrowser.discard', "Discard"), () => this.close());
+		this._cancelButton = this.addFooterButton(localize('fileBrowser.discard', "Discard"), () => this.close(), 'right', true);

 		this.registerListeners();
 		this.updateTheme();
--- a/src/sql/workbench/services/insights/browser/insightsDialogView.ts
+++ b/src/sql/workbench/services/insights/browser/insightsDialogView.ts
@@ -7,7 +7,7 @@ import 'vs/css!./media/insightsDialog';
 import { Button } from 'sql/base/browser/ui/button/button';
 import { IConnectionProfile } from 'sql/platform/connection/common/interfaces';
 import { Modal } from 'sql/workbench/browser/modal/modal';
-import { attachButtonStyler, attachTableStyler } from 'sql/platform/theme/common/styler';
+import { attachTableStyler } from 'sql/platform/theme/common/styler';
 import { ConnectionProfile } from 'sql/platform/connection/common/connectionProfile';
 import * as TelemetryKeys from 'sql/platform/telemetry/common/telemetryKeys';
 import { IInsightsDialogModel, ListResource, IInsightDialogActionContext, insertValueRegex } from 'sql/workbench/services/insights/browser/insightsDialogService';
@@ -49,6 +49,7 @@ import { ILayoutService } from 'vs/platform/layout/browser/layoutService';
 import { Registry } from 'vs/platform/registry/common/platform';
 import { SyncDescriptor } from 'vs/platform/instantiation/common/descriptors';
 import { IInsightsConfigDetails } from 'sql/platform/extensions/common/extensions';
+import { attachButtonStyler } from 'vs/platform/theme/common/styler';

 const labelDisplay = nls.localize("insights.item", "Item");
 const valueDisplay = nls.localize("insights.value", "Value");
@@ -389,7 +390,7 @@ export class InsightsDialogView extends Modal {
 						}
 						let context = this.topInsightContext(resource);
 						this._commandService.executeCommand(action, context).catch(err => onUnexpectedError(err));
-					}, 'left');
+					}, 'left', true);
 					button.enabled = false;
 					this._taskButtonDisposables.push(button);
 					this._taskButtonDisposables.push(attachButtonStyler(button, this._themeService));
--- a/src/sql/workbench/services/profiler/browser/profilerFilterDialog.ts
+++ b/src/sql/workbench/services/profiler/browser/profilerFilterDialog.ts
@@ -7,7 +7,7 @@ import 'vs/css!./media/profilerFilterDialog';
 import { Button } from 'sql/base/browser/ui/button/button';
 import { Modal } from 'sql/workbench/browser/modal/modal';
 import * as TelemetryKeys from 'sql/platform/telemetry/common/telemetryKeys';
-import { attachButtonStyler, attachInputBoxStyler } from 'sql/platform/theme/common/styler';
+import { attachInputBoxStyler } from 'sql/platform/theme/common/styler';
 import { KeyCode } from 'vs/base/common/keyCodes';
 import { IThemeService } from 'vs/platform/theme/common/themeService';
 import { IContextKeyService } from 'vs/platform/contextkey/common/contextkey';
@@ -16,7 +16,7 @@ import { localize } from 'vs/nls';
 import { ProfilerInput } from 'sql/workbench/browser/editor/profiler/profilerInput';
 import { InputBox } from 'sql/base/browser/ui/inputBox/inputBox';
 import { SelectBox } from 'sql/base/browser/ui/selectBox/selectBox';
-import { attachSelectBoxStyler } from 'vs/platform/theme/common/styler';
+import { attachButtonStyler, attachSelectBoxStyler } from 'vs/platform/theme/common/styler';
 import { IContextViewService } from 'vs/platform/contextview/browser/contextView';
 import { generateUuid } from 'vs/base/common/uuid';
 import * as DOM from 'vs/base/browser/dom';
@@ -102,11 +102,11 @@ export class ProfilerFilterDialog extends Modal {
 		this.title = DialogTitle;
 		this.titleIconClassName = TitleIconClass;
 		this._register(attachModalDialogStyler(this, this._themeService));
-		this._saveFilterButton = this.addFooterButton(SaveFilterText, () => this.saveFilter(), 'left');
-		this._loadFilterButton = this.addFooterButton(LoadFilterText, () => this.loadSavedFilter(), 'left');
-		this._applyButton = this.addFooterButton(ApplyText, () => this.filterSession());
+		this._saveFilterButton = this.addFooterButton(SaveFilterText, () => this.saveFilter(), 'left', true);
+		this._loadFilterButton = this.addFooterButton(LoadFilterText, () => this.loadSavedFilter(), 'left', true);
+		this._applyButton = this.addFooterButton(ApplyText, () => this.filterSession(), 'right', true);
 		this._okButton = this.addFooterButton(OkText, () => this.handleOkButtonClick());
-		this._cancelButton = this.addFooterButton(CancelText, () => this.hide('cancel'));
+		this._cancelButton = this.addFooterButton(CancelText, () => this.hide('cancel'), 'right', true);
 		this._register(attachButtonStyler(this._okButton, this._themeService));
 		this._register(attachButtonStyler(this._cancelButton, this._themeService));
 		this._register(attachButtonStyler(this._applyButton, this._themeService));
--- a/src/sql/workbench/services/resourceProvider/browser/firewallRuleDialog.ts
+++ b/src/sql/workbench/services/resourceProvider/browser/firewallRuleDialog.ts
@@ -10,7 +10,7 @@ import { Event, Emitter } from 'vs/base/common/event';
 import { IContextViewService } from 'vs/platform/contextview/browser/contextView';
 import { localize } from 'vs/nls';
 import { buttonBackground } from 'vs/platform/theme/common/colorRegistry';
-import { attachInputBoxStyler } from 'vs/platform/theme/common/styler';
+import { attachButtonStyler, attachInputBoxStyler } from 'vs/platform/theme/common/styler';
 import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
 import { SIDE_BAR_BACKGROUND } from 'vs/workbench/common/theme';
 import { IContextKeyService } from 'vs/platform/contextkey/common/contextkey';
@@ -22,7 +22,6 @@ import * as azdata from 'azdata';
 import { Button } from 'sql/base/browser/ui/button/button';
 import { Modal } from 'sql/workbench/browser/modal/modal';
 import { FirewallRuleViewModel } from 'sql/platform/accounts/common/firewallRuleViewModel';
-import { attachButtonStyler } from 'sql/platform/theme/common/styler';
 import { InputBox } from 'sql/base/browser/ui/inputBox/inputBox';
 import { IAccountPickerService } from 'sql/workbench/services/accountManagement/browser/accountPicker';
 import * as TelemetryKeys from 'sql/platform/telemetry/common/telemetryKeys';
@@ -108,7 +107,7 @@ export class FirewallRuleDialog extends Modal {
 		this.backButton!.onDidClick(() => this.cancel());
 		this._register(attachButtonStyler(this.backButton!, this._themeService, { buttonBackground: SIDE_BAR_BACKGROUND, buttonHoverBackground: SIDE_BAR_BACKGROUND }));
 		this._createButton = this.addFooterButton(localize('firewall.ok', "OK"), () => this.createFirewallRule());
-		this._closeButton = this.addFooterButton(localize('firewall.cancel', "Cancel"), () => this.cancel());
+		this._closeButton = this.addFooterButton(localize('firewall.cancel', "Cancel"), () => this.cancel(), 'right', true);
 		this.registerListeners();
 	}

--- a/src/sql/workbench/services/restore/browser/restoreDialog.ts
+++ b/src/sql/workbench/services/restore/browser/restoreDialog.ts
@@ -30,7 +30,7 @@ import { Table } from 'sql/base/browser/ui/table/table';
 import { TableDataView } from 'sql/base/browser/ui/table/tableDataView';
 import * as DialogHelper from 'sql/workbench/browser/modal/dialogHelper';
 import { Modal } from 'sql/workbench/browser/modal/modal';
-import { attachButtonStyler, attachTableStyler, attachInputBoxStyler, attachSelectBoxStyler, attachEditableDropdownStyler, attachCheckboxStyler } from 'sql/platform/theme/common/styler';
+import { attachTableStyler, attachInputBoxStyler, attachSelectBoxStyler, attachEditableDropdownStyler, attachCheckboxStyler } from 'sql/platform/theme/common/styler';
 import * as TelemetryKeys from 'sql/platform/telemetry/common/telemetryKeys';
 import { RestoreViewModel, RestoreOptionParam, SouceDatabaseNamesParam } from 'sql/workbench/services/restore/browser/restoreViewModel';
 import * as FileValidationConstants from 'sql/workbench/services/fileBrowser/common/fileValidationServiceConstants';
@@ -45,6 +45,7 @@ import { IAdsTelemetryService } from 'sql/platform/telemetry/common/telemetry';
 import { attachModalDialogStyler, attachTabbedPanelStyler } from 'sql/workbench/common/styler';
 import { fileFiltersSet } from 'sql/workbench/services/restore/common/constants';
 import { ILayoutService } from 'vs/platform/layout/browser/layoutService';
+import { attachButtonStyler } from 'vs/platform/theme/common/styler';

 interface FileListElement {
 	logicalFileName: string;
@@ -159,9 +160,9 @@ export class RestoreDialog extends Modal {
 		super.render();
 		attachModalDialogStyler(this, this._themeService);
 		let cancelLabel = localize('restoreDialog.cancel', "Cancel");
-		this._scriptButton = this.addFooterButton(localize('restoreDialog.script', "Script"), () => this.restore(true));
+		this._scriptButton = this.addFooterButton(localize('restoreDialog.script', "Script"), () => this.restore(true), 'right', true);
 		this._restoreButton = this.addFooterButton(this._restoreLabel, () => this.restore(false));
-		this._closeButton = this.addFooterButton(cancelLabel, () => this.cancel());
+		this._closeButton = this.addFooterButton(cancelLabel, () => this.cancel(), 'right', true);
 		this.registerListeners();
 		this._destinationRestoreToInputBox!.disable();
 	}
@@ -186,7 +187,7 @@ export class RestoreDialog extends Modal {

 		this._filePathInputBox = new InputBox(DOM.append(filePathInputContainer, DOM.$('.dialog-input')), this._contextViewService, validationOptions);

-		this._browseFileButton = new Button(DOM.append(filePathInputContainer, DOM.$('.file-browser')));
+		this._browseFileButton = new Button(DOM.append(filePathInputContainer, DOM.$('.file-browser')), { secondary: true });
 		this._browseFileButton.label = '...';

 		const sourceDatabasesElement = DOM.$('.source-database-list');
--- a/src/sql/workbench/services/serverGroup/browser/serverGroupDialog.ts
+++ b/src/sql/workbench/services/serverGroup/browser/serverGroupDialog.ts
@@ -11,7 +11,7 @@ import * as DOM from 'vs/base/browser/dom';
 import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent';
 import { KeyCode, KeyMod } from 'vs/base/common/keyCodes';
 import { IThemeService } from 'vs/platform/theme/common/themeService';
-import { attachInputBoxStyler, attachCheckboxStyler } from 'vs/platform/theme/common/styler';
+import { attachInputBoxStyler, attachCheckboxStyler, attachButtonStyler } from 'vs/platform/theme/common/styler';
 import { Event, Emitter } from 'vs/base/common/event';
 import { IContextViewService } from 'vs/platform/contextview/browser/contextView';
 import { localize } from 'vs/nls';
@@ -21,7 +21,6 @@ import { Button } from 'sql/base/browser/ui/button/button';
 import { Modal } from 'sql/workbench/browser/modal/modal';
 import { InputBox } from 'sql/base/browser/ui/inputBox/inputBox';
 import { ServerGroupViewModel } from 'sql/workbench/services/serverGroup/common/serverGroupViewModel';
-import { attachButtonStyler } from 'sql/platform/theme/common/styler';
 import * as TelemetryKeys from 'sql/platform/telemetry/common/telemetryKeys';
 import { IClipboardService } from 'sql/platform/clipboard/common/clipboardService';
 import { ILogService } from 'vs/platform/log/common/log';
@@ -82,7 +81,7 @@ export class ServerGroupDialog extends Modal {
 		const okLabel = localize('serverGroup.ok', "OK");
 		const cancelLabel = localize('serverGroup.cancel', "Cancel");
 		this._addServerButton = this.addFooterButton(okLabel, () => this.addGroup());
-		this._closeButton = this.addFooterButton(cancelLabel, () => this.cancel());
+		this._closeButton = this.addFooterButton(cancelLabel, () => this.cancel(), 'right', true);
 		this.isRendered = true;
 		this.registerListeners();
 	}