From 905227c403190bdef848f022569c2e185d3dd027 Mon Sep 17 00:00:00 2001
From: vince-fugnitto <vincent.fugnitto@ericsson.com>
Date: Thu, 24 Mar 2022 09:59:03 -0400
Subject: [PATCH] monaco: fix quick-input-list styling

The commit removes superfluous styling which caused issues in monaco:
1. fixes the peek widget styling
2. fixes the styling of codicons as tail icons in the quick-input

Signed-off-by: vince-fugnitto <vincent.fugnitto@ericsson.com>
Co-authored-by: Mark Sujew <mark.sujew@typefox.io>
---
 .../src/browser/toolbar/sample-toolbar-contribution.css  | 2 +-
 .../src/browser/toolbar/sample-toolbar-contribution.tsx  | 2 +-
 packages/core/src/browser/shell/tab-bars.ts              | 2 +-
 packages/core/src/browser/style/index.css                | 4 ++--
 packages/core/src/browser/style/tabs.css                 | 2 +-
 packages/core/src/browser/widgets/widget.ts              | 2 +-
 packages/filesystem/src/browser/style/file-dialog.css    | 2 +-
 packages/monaco/src/browser/style/index.css              | 9 +--------
 .../search-in-workspace/src/browser/styles/index.css     | 2 +-
 packages/toolbar/src/browser/style/toolbar.css           | 4 ++--
 packages/toolbar/src/browser/toolbar.tsx                 | 2 +-
 11 files changed, 13 insertions(+), 20 deletions(-)

diff --git a/examples/api-samples/src/browser/toolbar/sample-toolbar-contribution.css b/examples/api-samples/src/browser/toolbar/sample-toolbar-contribution.css
index 27354eae8d023..a492c4b2c9c4c 100644
--- a/examples/api-samples/src/browser/toolbar/sample-toolbar-contribution.css
+++ b/examples/api-samples/src/browser/toolbar/sample-toolbar-contribution.css
@@ -29,7 +29,7 @@
     outline: none;
 }
 
-#theia-sample-toolbar-contribution  .icon-wrapper.action-item.item.enabled:hover {
+#theia-sample-toolbar-contribution  .icon-wrapper.action-label.item.enabled:hover {
     background-color: var(--theia-toolbar-hoverBackground);
 }
 
diff --git a/examples/api-samples/src/browser/toolbar/sample-toolbar-contribution.tsx b/examples/api-samples/src/browser/toolbar/sample-toolbar-contribution.tsx
index 3d251607fa0d5..cfc932bb66c5c 100644
--- a/examples/api-samples/src/browser/toolbar/sample-toolbar-contribution.tsx
+++ b/examples/api-samples/src/browser/toolbar/sample-toolbar-contribution.tsx
@@ -100,7 +100,7 @@ export class SampleToolbarContribution extends AbstractToolbarContribution
             <div
                 role='button'
                 tabIndex={0}
-                className='icon-wrapper action-item item enabled codicon codicon-search'
+                className='icon-wrapper action-label item enabled codicon codicon-search'
                 id='easy-search-item-icon'
                 onClick={this.handleOnClick}
                 title='Search for files, text, commands, and more...'
diff --git a/packages/core/src/browser/shell/tab-bars.ts b/packages/core/src/browser/shell/tab-bars.ts
index bd071de4b3a90..e59c34f966e0e 100644
--- a/packages/core/src/browser/shell/tab-bars.ts
+++ b/packages/core/src/browser/shell/tab-bars.ts
@@ -165,7 +165,7 @@ export class TabBarRenderer extends TabBar.Renderer {
                 this.renderBadge(data, isInSidePanel)
             ),
             h.div({
-                className: 'p-TabBar-tabCloseIcon action-item',
+                className: 'p-TabBar-tabCloseIcon action-label',
                 onclick: this.handleCloseClickEvent
             })
         );
diff --git a/packages/core/src/browser/style/index.css b/packages/core/src/browser/style/index.css
index e597da2c9257d..dcfeb9f486051 100644
--- a/packages/core/src/browser/style/index.css
+++ b/packages/core/src/browser/style/index.css
@@ -181,13 +181,13 @@ blockquote {
     outline: none;
 }
 
-.action-item {
+.action-label {
   padding: 2px;
   border-radius: 5px;
   cursor: pointer;
 }
 
-.action-item:hover {
+.action-label:hover {
     background-color: var(--theia-toolbar-hoverBackground);
 }
 
diff --git a/packages/core/src/browser/style/tabs.css b/packages/core/src/browser/style/tabs.css
index 90a0864716f2b..c33ce2101bb1e 100644
--- a/packages/core/src/browser/style/tabs.css
+++ b/packages/core/src/browser/style/tabs.css
@@ -394,7 +394,7 @@ body.theia-editor-highlightModifiedTabs
     cursor: pointer;
 }
 
-.p-TabBar-toolbar :not(.item.enabled) .action-item {
+.p-TabBar-toolbar :not(.item.enabled) .action-label {
   background: transparent;
   cursor: default;
 }
diff --git a/packages/core/src/browser/widgets/widget.ts b/packages/core/src/browser/widgets/widget.ts
index cf32fd7089b7b..863e68b4d6d26 100644
--- a/packages/core/src/browser/widgets/widget.ts
+++ b/packages/core/src/browser/widgets/widget.ts
@@ -30,7 +30,7 @@ decorate(unmanaged(), Widget, 0);
 export * from '@phosphor/widgets';
 export * from '@phosphor/messaging';
 
-export const ACTION_ITEM = 'action-item';
+export const ACTION_ITEM = 'action-label';
 
 export function codiconArray(name: string, actionItem = false): string[] {
     const array = ['codicon', `codicon-${name}`];
diff --git a/packages/filesystem/src/browser/style/file-dialog.css b/packages/filesystem/src/browser/style/file-dialog.css
index 3259f07ea561d..67d7cc4ef65ba 100644
--- a/packages/filesystem/src/browser/style/file-dialog.css
+++ b/packages/filesystem/src/browser/style/file-dialog.css
@@ -92,7 +92,7 @@
     cursor: default;
 }
 
-.dialogContent span.theia-mod-disabled .action-item {
+.dialogContent span.theia-mod-disabled .action-label {
     background: none;
 }
 
diff --git a/packages/monaco/src/browser/style/index.css b/packages/monaco/src/browser/style/index.css
index 99489d6240fc4..4d273e309f3af 100644
--- a/packages/monaco/src/browser/style/index.css
+++ b/packages/monaco/src/browser/style/index.css
@@ -165,20 +165,13 @@
 
 .quick-input-list .monaco-list-row .codicon {
   color: var(--theia-foreground) !important;
-  padding-left: 0px !important;
+  padding: 2px !important;
 }
 
 .quick-input-list .monaco-list-row.focused .codicon {
   color: var(--theia-list-foreground) !important;
 }
 
-.monaco-action-bar .action-item {
-  height: var(--theia-ui-icon-font-size);
-  width: var(--theia-ui-icon-font-size);
-  margin: auto;
-  padding-right: calc(var(--theia-ui-padding) * 0.5);
-}
-
 .quick-input-list .monaco-list-row.focused .monaco-highlighted-label .highlight {
   color: var(--theia-list-focusHighlightForeground) !important;
 }
diff --git a/packages/search-in-workspace/src/browser/styles/index.css b/packages/search-in-workspace/src/browser/styles/index.css
index e87c60a16f5b0..4a7c5edc05991 100644
--- a/packages/search-in-workspace/src/browser/styles/index.css
+++ b/packages/search-in-workspace/src/browser/styles/index.css
@@ -344,7 +344,7 @@
     background-image: var(--theia-icon-replace-all);
 }
 
-.replace-all-button-container .action-item.disabled {
+.replace-all-button-container .action-label.disabled {
     opacity: var(--theia-mod-disabled-opacity);
     background: transparent;
     cursor: default;
diff --git a/packages/toolbar/src/browser/style/toolbar.css b/packages/toolbar/src/browser/style/toolbar.css
index 8d39efa14b295..8696116a4f9d5 100644
--- a/packages/toolbar/src/browser/style/toolbar.css
+++ b/packages/toolbar/src/browser/style/toolbar.css
@@ -84,11 +84,11 @@
     line-height: var(--theia-toolbar-icon-size);
 }
 
-#main-toolbar .toolbar-item.action-item.enabled:hover:not(.dragging):not(.active) {
+#main-toolbar .toolbar-item.action-label.enabled:hover:not(.dragging):not(.active) {
     background-color: var(--theia-toolbar-hoverBackground);
 }
 
-#main-toolbar .toolbar-item.action-item:not(.enabled) {
+#main-toolbar .toolbar-item.action-label:not(.enabled) {
     cursor: default;
 }
 
diff --git a/packages/toolbar/src/browser/toolbar.tsx b/packages/toolbar/src/browser/toolbar.tsx
index b939ad0473490..6241faac29b11 100644
--- a/packages/toolbar/src/browser/toolbar.tsx
+++ b/packages/toolbar/src/browser/toolbar.tsx
@@ -241,7 +241,7 @@ export class ToolbarImpl extends TabBarToolbar {
                 id={item.id}
                 data-position={stringifiedPosition}
                 key={`${item.id}-${stringifiedPosition}`}
-                className={`${toolbarItemClassNames} toolbar-item action-item`}
+                className={`${toolbarItemClassNames} toolbar-item action-label`}
                 onMouseDown={this.onMouseDownEvent}
                 onMouseUp={this.onMouseUpEvent}
                 onMouseOut={this.onMouseUpEvent}