fix the contrast rate issue of couple view icons in activity bar (#21003)

* fix connections and notebooks view icon issue

* update name

* remove css reference

src/sql/workbench/contrib/dataExplorer/browser/dataExplorer.contribution.ts

@@ -3,7 +3,6 @@
  *  Licensed under the Source EULA. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
-import 'vs/css!./media/dataExplorer.contribution';
 import { localize } from 'vs/nls';
 import { Registry } from 'vs/platform/registry/common/platform';
 import { LifecyclePhase } from 'vs/workbench/services/lifecycle/common/lifecycle';

src/sql/workbench/contrib/dataExplorer/browser/dataExplorerViewlet.ts

@@ -23,9 +23,11 @@ import { ViewPane } from 'vs/workbench/browser/parts/views/viewPane';
 import { ViewPaneContainer } from 'vs/workbench/browser/parts/views/viewPaneContainer';
 import { SyncDescriptor } from 'vs/platform/instantiation/common/descriptors';
 import { KeyCode, KeyMod } from 'vs/base/common/keyCodes';
-import { SqlIconId } from 'sql/base/common/codicons';
+import { registerIcon } from 'vs/platform/theme/common/iconRegistry';
+import { Codicon } from 'vs/base/common/codicons';
 
 export const VIEWLET_ID = 'workbench.view.connections';
+export const ConnectionsViewIcon = registerIcon('ads-connections', Codicon.serverEnvironment, localize('ads-connections', 'Icon represent a server.'));
 
 export class DataExplorerViewletViewsContribution implements IWorkbenchContribution {
 
@@ -105,7 +107,7 @@ export const VIEW_CONTAINER = Registry.as<IViewContainersRegistry>(ViewContainer
 		keybindings: { primary: KeyMod.CtrlCmd | KeyMod.Shift | KeyCode.KeyD },
 		order: 0
 	},
-	icon: { id: SqlIconId.dataExplorer },
+	icon: ConnectionsViewIcon,
 	order: 0,
 	storageId: `${VIEWLET_ID}.state`
 }, ViewContainerLocation.Sidebar, { isDefault: true });

src/sql/workbench/contrib/dataExplorer/browser/media/dataExplorer.contribution.css

@@ -1,24 +0,0 @@
-/*---------------------------------------------------------------------------------------------
- *  Copyright (c) Microsoft Corporation. All rights reserved.
- *  Licensed under the Source EULA. See License.txt in the project root for license information.
- *--------------------------------------------------------------------------------------------*/
-
-/* Activity Bar */
-.monaco-workbench .activitybar .monaco-action-bar .action-label.dataExplorer {
-	-webkit-mask: url('server_page_inverse.svg') 50% 50% / 24px no-repeat;
-	background-color: rgba(255, 255, 255, 0.4);
-}
-
-/* Checked */
-.monaco-workbench .activitybar .monaco-action-bar .checked .action-label.dataExplorer {
-	background-color: rgb(255, 255, 255); /* this is a patch, will need to find a better long term fix*/
-}
-
-/* Hovered */
-.monaco-workbench .activitybar .monaco-action-bar .action-label.dataExplorer:hover {
-	background-color: rgb(255, 255, 255);
-}
-
-.monaco-workbench .activitybar .monaco-action-bar .action-item:focus .action-label.dataExplorer {
-	background-color: rgba(255, 255, 255);
-}

src/sql/workbench/contrib/notebook/browser/notebookExplorer/notebookExplorerViewlet.ts

@@ -40,6 +40,8 @@ import * as TelemetryKeys from 'sql/platform/telemetry/common/telemetryKeys';
 import { IAdsTelemetryService } from 'sql/platform/telemetry/common/telemetry';
 import { KeyCode, KeyMod } from 'vs/base/common/keyCodes';
 import { ITextQueryBuilderOptions, QueryBuilder } from 'vs/workbench/services/search/common/queryBuilder';
+import { registerIcon } from 'vs/platform/theme/common/iconRegistry';
+import { Codicon } from 'vs/base/common/codicons';
 
 export const VIEWLET_ID = 'workbench.view.notebooks';
 
@@ -409,8 +411,7 @@ export class NotebookExplorerViewPaneContainer extends ViewPaneContainer {
 	}
 }
 
-export const notebookIconId = 'book';
-
+export const NotebooksViewIcon = registerIcon('ads-notebooks', Codicon.notebook, localize('ads-notebook', 'Icon represent a notebook.'));
 export const NOTEBOOK_VIEW_CONTAINER = Registry.as<IViewContainersRegistry>(ViewContainerExtensions.ViewContainersRegistry).registerViewContainer({
 	id: VIEWLET_ID,
 	title: localize('notebookExplorer.name', "Notebooks"),
@@ -420,7 +421,7 @@ export const NOTEBOOK_VIEW_CONTAINER = Registry.as<IViewContainersRegistry>(View
 		keybindings: { primary: KeyMod.CtrlCmd | KeyMod.Shift | KeyCode.KeyB },
 		order: 0
 	},
-	icon: { id: notebookIconId },
+	icon: NotebooksViewIcon,
 	order: 6,
 	storageId: `${VIEWLET_ID}.state`
 }, ViewContainerLocation.Sidebar);

src/sql/workbench/contrib/welcome/page/browser/gettingStartedTour.ts

@@ -22,8 +22,8 @@ import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent';
 import { Button } from 'sql/base/browser/ui/button/button';
 import { extensionsViewIcon } from 'vs/workbench/contrib/extensions/browser/extensionsIcons';
 import { settingsViewBarIcon } from 'vs/workbench/browser/parts/activitybar/activitybarPart';
-import { notebookIconId } from 'sql/workbench/contrib/notebook/browser/notebookExplorer/notebookExplorerViewlet';
-import { SqlIconId } from 'sql/base/common/codicons';
+import { NotebooksViewIcon } from 'sql/workbench/contrib/notebook/browser/notebookExplorer/notebookExplorerViewlet';
+import { ConnectionsViewIcon } from 'sql/workbench/contrib/dataExplorer/browser/dataExplorerViewlet';
 
 const $ = dom.$;
 interface TourData {
@@ -44,8 +44,8 @@ interface TourData {
 	popupImage: string;
 }
 
-const dataExplorerIconCssSelector = `.action-label.${SqlIconId.dataExplorer}`;
-const notebookIconCssSelector = `.action-label.${notebookIconId}`;
+const dataExplorerIconCssSelector = ThemeIcon.asCSSSelector(ConnectionsViewIcon);
+const notebookIconCssSelector = ThemeIcon.asCSSSelector(NotebooksViewIcon);
 const extensionsIconCssSelector = ThemeIcon.asCSSSelector(extensionsViewIcon);
 const settingsGearIconCssSelector = ThemeIcon.asCSSSelector(settingsViewBarIcon);