From 52660ef75c399e216ada97a222b182c300de3ed1 Mon Sep 17 00:00:00 2001
From: Alex Andreev <alex.andreev.email@gmail.com>
Date: Wed, 22 Feb 2023 14:47:05 +0300
Subject: [PATCH] Fix dropdown items readability in Dock (#7209)

* Remove Select's outlined theme

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Updating snapshots

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

---------

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
---
 ...lling-helm-chart-from-new-tab.test.ts.snap | 56 +++++++++----------
 ...rt-from-previously-opened-tab.test.ts.snap |  4 +-
 .../upgrade-chart-new-tab.test.ts.snap        |  4 +-
 .../components/dock/create-resource/view.tsx  |  1 -
 .../components/dock/install-chart/view.tsx    |  2 -
 .../components/dock/upgrade-chart/view.tsx    |  1 -
 .../renderer/components/select/select.scss    | 21 +------
 7 files changed, 34 insertions(+), 55 deletions(-)

diff --git a/packages/core/src/features/helm-charts/installing-chart/__snapshots__/installing-helm-chart-from-new-tab.test.ts.snap b/packages/core/src/features/helm-charts/installing-chart/__snapshots__/installing-helm-chart-from-new-tab.test.ts.snap
index 1e47ed84e1..04fb109fc6 100644
--- a/packages/core/src/features/helm-charts/installing-chart/__snapshots__/installing-helm-chart-from-new-tab.test.ts.snap
+++ b/packages/core/src/features/helm-charts/installing-chart/__snapshots__/installing-helm-chart-from-new-tab.test.ts.snap
@@ -3031,7 +3031,7 @@ exports[`installing helm chart from new tab given tab for installing chart was n
                       Version
                     </span>
                     <div
-                      class="Select theme-outlined chart-version css-b62m3t-container"
+                      class="Select theme-dark chart-version css-b62m3t-container"
                     >
                       <span
                         class="css-1f43avz-a11yText-A11yText"
@@ -3108,7 +3108,7 @@ exports[`installing helm chart from new tab given tab for installing chart was n
                       Namespace
                     </span>
                     <div
-                      class="Select theme-outlined NamespaceSelect css-b62m3t-container"
+                      class="Select theme-dark NamespaceSelect css-b62m3t-container"
                     >
                       <span
                         class="css-1f43avz-a11yText-A11yText"
@@ -3234,7 +3234,7 @@ exports[`installing helm chart from new tab given tab for installing chart was n
     class="Select__menu-portal css-1no2yl0-MenuPortal"
   >
     <div
-      class="theme-outlined install-chart-version-select-for-some-first-tab-id-options Select__menu css-1nmdiq5-menu"
+      class="theme-dark install-chart-version-select-for-some-first-tab-id-options Select__menu css-1nmdiq5-menu"
       id="react-select-install-chart-version-select-for-some-first-tab-id-listbox"
     >
       <div
@@ -4073,7 +4073,7 @@ exports[`installing helm chart from new tab given tab for installing chart was n
                       Version
                     </span>
                     <div
-                      class="Select theme-outlined chart-version css-b62m3t-container"
+                      class="Select theme-dark chart-version css-b62m3t-container"
                     >
                       <span
                         class="css-1f43avz-a11yText-A11yText"
@@ -4148,7 +4148,7 @@ exports[`installing helm chart from new tab given tab for installing chart was n
                       Namespace
                     </span>
                     <div
-                      class="Select theme-outlined NamespaceSelect css-b62m3t-container"
+                      class="Select theme-dark NamespaceSelect css-b62m3t-container"
                     >
                       <span
                         class="css-1f43avz-a11yText-A11yText"
@@ -5089,7 +5089,7 @@ exports[`installing helm chart from new tab given tab for installing chart was n
                       Version
                     </span>
                     <div
-                      class="Select theme-outlined chart-version css-b62m3t-container"
+                      class="Select theme-dark chart-version css-b62m3t-container"
                     >
                       <span
                         class="css-1f43avz-a11yText-A11yText"
@@ -5164,7 +5164,7 @@ exports[`installing helm chart from new tab given tab for installing chart was n
                       Namespace
                     </span>
                     <div
-                      class="Select theme-outlined NamespaceSelect css-b62m3t-container"
+                      class="Select theme-dark NamespaceSelect css-b62m3t-container"
                     >
                       <span
                         class="css-1f43avz-a11yText-A11yText"
@@ -6100,7 +6100,7 @@ exports[`installing helm chart from new tab given tab for installing chart was n
                       Version
                     </span>
                     <div
-                      class="Select theme-outlined chart-version css-b62m3t-container"
+                      class="Select theme-dark chart-version css-b62m3t-container"
                     >
                       <span
                         class="css-1f43avz-a11yText-A11yText"
@@ -6175,7 +6175,7 @@ exports[`installing helm chart from new tab given tab for installing chart was n
                       Namespace
                     </span>
                     <div
-                      class="Select theme-outlined NamespaceSelect css-b62m3t-container"
+                      class="Select theme-dark NamespaceSelect css-b62m3t-container"
                     >
                       <span
                         class="css-1f43avz-a11yText-A11yText"
@@ -7111,7 +7111,7 @@ exports[`installing helm chart from new tab given tab for installing chart was n
                       Version
                     </span>
                     <div
-                      class="Select theme-outlined chart-version css-b62m3t-container"
+                      class="Select theme-dark chart-version css-b62m3t-container"
                     >
                       <span
                         class="css-1f43avz-a11yText-A11yText"
@@ -7186,7 +7186,7 @@ exports[`installing helm chart from new tab given tab for installing chart was n
                       Namespace
                     </span>
                     <div
-                      class="Select theme-outlined NamespaceSelect css-b62m3t-container"
+                      class="Select theme-dark NamespaceSelect css-b62m3t-container"
                     >
                       <span
                         class="css-1f43avz-a11yText-A11yText"
@@ -8144,7 +8144,7 @@ exports[`installing helm chart from new tab given tab for installing chart was n
                       Version
                     </span>
                     <div
-                      class="Select theme-outlined chart-version css-b62m3t-container"
+                      class="Select theme-dark chart-version css-b62m3t-container"
                     >
                       <span
                         class="css-1f43avz-a11yText-A11yText"
@@ -8219,7 +8219,7 @@ exports[`installing helm chart from new tab given tab for installing chart was n
                       Namespace
                     </span>
                     <div
-                      class="Select theme-outlined NamespaceSelect css-b62m3t-container"
+                      class="Select theme-dark NamespaceSelect css-b62m3t-container"
                     >
                       <span
                         class="css-1f43avz-a11yText-A11yText"
@@ -8347,7 +8347,7 @@ exports[`installing helm chart from new tab given tab for installing chart was n
     class="Select__menu-portal css-1no2yl0-MenuPortal"
   >
     <div
-      class="NamespaceSelectMenu theme-outlined install-chart-namespace-select-for-some-first-tab-id-options Select__menu css-1nmdiq5-menu"
+      class="NamespaceSelectMenu theme-dark install-chart-namespace-select-for-some-first-tab-id-options Select__menu css-1nmdiq5-menu"
       id="react-select-install-chart-namespace-select-for-some-first-tab-id-listbox"
     >
       <div
@@ -9186,7 +9186,7 @@ exports[`installing helm chart from new tab given tab for installing chart was n
                       Version
                     </span>
                     <div
-                      class="Select theme-outlined chart-version css-b62m3t-container"
+                      class="Select theme-dark chart-version css-b62m3t-container"
                     >
                       <span
                         class="css-1f43avz-a11yText-A11yText"
@@ -9261,7 +9261,7 @@ exports[`installing helm chart from new tab given tab for installing chart was n
                       Namespace
                     </span>
                     <div
-                      class="Select theme-outlined NamespaceSelect css-b62m3t-container"
+                      class="Select theme-dark NamespaceSelect css-b62m3t-container"
                     >
                       <span
                         class="css-1f43avz-a11yText-A11yText"
@@ -10197,7 +10197,7 @@ exports[`installing helm chart from new tab given tab for installing chart was n
                       Version
                     </span>
                     <div
-                      class="Select theme-outlined chart-version css-b62m3t-container"
+                      class="Select theme-dark chart-version css-b62m3t-container"
                     >
                       <span
                         class="css-1f43avz-a11yText-A11yText"
@@ -10272,7 +10272,7 @@ exports[`installing helm chart from new tab given tab for installing chart was n
                       Namespace
                     </span>
                     <div
-                      class="Select theme-outlined NamespaceSelect css-b62m3t-container"
+                      class="Select theme-dark NamespaceSelect css-b62m3t-container"
                     >
                       <span
                         class="css-1f43avz-a11yText-A11yText"
@@ -13798,7 +13798,7 @@ exports[`installing helm chart from new tab given tab for installing chart was n
                       Version
                     </span>
                     <div
-                      class="Select theme-outlined chart-version css-b62m3t-container"
+                      class="Select theme-dark chart-version css-b62m3t-container"
                     >
                       <span
                         class="css-1f43avz-a11yText-A11yText"
@@ -13873,7 +13873,7 @@ exports[`installing helm chart from new tab given tab for installing chart was n
                       Namespace
                     </span>
                     <div
-                      class="Select theme-outlined NamespaceSelect css-b62m3t-container"
+                      class="Select theme-dark NamespaceSelect css-b62m3t-container"
                     >
                       <span
                         class="css-1f43avz-a11yText-A11yText"
@@ -15957,7 +15957,7 @@ exports[`installing helm chart from new tab given tab for installing chart was n
                       Version
                     </span>
                     <div
-                      class="Select theme-outlined chart-version css-b62m3t-container"
+                      class="Select theme-dark chart-version css-b62m3t-container"
                     >
                       <span
                         class="css-1f43avz-a11yText-A11yText"
@@ -16034,7 +16034,7 @@ exports[`installing helm chart from new tab given tab for installing chart was n
                       Namespace
                     </span>
                     <div
-                      class="Select theme-outlined NamespaceSelect css-b62m3t-container"
+                      class="Select theme-dark NamespaceSelect css-b62m3t-container"
                     >
                       <span
                         class="css-1f43avz-a11yText-A11yText"
@@ -17022,7 +17022,7 @@ exports[`installing helm chart from new tab given tab for installing chart was n
                       Version
                     </span>
                     <div
-                      class="Select theme-outlined chart-version css-b62m3t-container"
+                      class="Select theme-dark chart-version css-b62m3t-container"
                     >
                       <span
                         class="css-1f43avz-a11yText-A11yText"
@@ -17097,7 +17097,7 @@ exports[`installing helm chart from new tab given tab for installing chart was n
                       Namespace
                     </span>
                     <div
-                      class="Select theme-outlined NamespaceSelect css-b62m3t-container"
+                      class="Select theme-dark NamespaceSelect css-b62m3t-container"
                     >
                       <span
                         class="css-1f43avz-a11yText-A11yText"
@@ -18033,7 +18033,7 @@ exports[`installing helm chart from new tab given tab for installing chart was n
                       Version
                     </span>
                     <div
-                      class="Select theme-outlined chart-version css-b62m3t-container"
+                      class="Select theme-dark chart-version css-b62m3t-container"
                     >
                       <span
                         class="css-1f43avz-a11yText-A11yText"
@@ -18108,7 +18108,7 @@ exports[`installing helm chart from new tab given tab for installing chart was n
                       Namespace
                     </span>
                     <div
-                      class="Select theme-outlined NamespaceSelect css-b62m3t-container"
+                      class="Select theme-dark NamespaceSelect css-b62m3t-container"
                     >
                       <span
                         class="css-1f43avz-a11yText-A11yText"
@@ -19044,7 +19044,7 @@ exports[`installing helm chart from new tab given tab for installing chart was n
                       Version
                     </span>
                     <div
-                      class="Select theme-outlined chart-version css-b62m3t-container"
+                      class="Select theme-dark chart-version css-b62m3t-container"
                     >
                       <span
                         class="css-1f43avz-a11yText-A11yText"
@@ -19119,7 +19119,7 @@ exports[`installing helm chart from new tab given tab for installing chart was n
                       Namespace
                     </span>
                     <div
-                      class="Select theme-outlined NamespaceSelect css-b62m3t-container"
+                      class="Select theme-dark NamespaceSelect css-b62m3t-container"
                     >
                       <span
                         class="css-1f43avz-a11yText-A11yText"
diff --git a/packages/core/src/features/helm-charts/installing-chart/__snapshots__/installing-helm-chart-from-previously-opened-tab.test.ts.snap b/packages/core/src/features/helm-charts/installing-chart/__snapshots__/installing-helm-chart-from-previously-opened-tab.test.ts.snap
index 7636ade12e..42e5d8a35b 100644
--- a/packages/core/src/features/helm-charts/installing-chart/__snapshots__/installing-helm-chart-from-previously-opened-tab.test.ts.snap
+++ b/packages/core/src/features/helm-charts/installing-chart/__snapshots__/installing-helm-chart-from-previously-opened-tab.test.ts.snap
@@ -1133,7 +1133,7 @@ exports[`installing helm chart from previously opened tab given tab for installi
                       Version
                     </span>
                     <div
-                      class="Select theme-outlined chart-version css-b62m3t-container"
+                      class="Select theme-dark chart-version css-b62m3t-container"
                     >
                       <span
                         class="css-1f43avz-a11yText-A11yText"
@@ -1208,7 +1208,7 @@ exports[`installing helm chart from previously opened tab given tab for installi
                       Namespace
                     </span>
                     <div
-                      class="Select theme-outlined NamespaceSelect css-b62m3t-container"
+                      class="Select theme-dark NamespaceSelect css-b62m3t-container"
                     >
                       <span
                         class="css-1f43avz-a11yText-A11yText"
diff --git a/packages/core/src/features/helm-charts/upgrade-chart/__snapshots__/upgrade-chart-new-tab.test.ts.snap b/packages/core/src/features/helm-charts/upgrade-chart/__snapshots__/upgrade-chart-new-tab.test.ts.snap
index 9e3eaf6f93..49b066e1a6 100644
--- a/packages/core/src/features/helm-charts/upgrade-chart/__snapshots__/upgrade-chart-new-tab.test.ts.snap
+++ b/packages/core/src/features/helm-charts/upgrade-chart/__snapshots__/upgrade-chart-new-tab.test.ts.snap
@@ -4103,7 +4103,7 @@ exports[`New Upgrade Helm Chart Dock Tab given a namespace is selected when navi
                       Upgrade version
                     </span>
                     <div
-                      class="Select theme-outlined chart-version css-b62m3t-container"
+                      class="Select theme-dark chart-version css-b62m3t-container"
                     >
                       <span
                         class="css-1f43avz-a11yText-A11yText"
@@ -5098,7 +5098,7 @@ exports[`New Upgrade Helm Chart Dock Tab given a namespace is selected when navi
                       Upgrade version
                     </span>
                     <div
-                      class="Select theme-outlined chart-version css-b62m3t-container"
+                      class="Select theme-dark chart-version css-b62m3t-container"
                     >
                       <span
                         class="css-1f43avz-a11yText-A11yText"
diff --git a/packages/core/src/renderer/components/dock/create-resource/view.tsx b/packages/core/src/renderer/components/dock/create-resource/view.tsx
index d72af4b282..63db3068ab 100644
--- a/packages/core/src/renderer/components/dock/create-resource/view.tsx
+++ b/packages/core/src/renderer/components/dock/create-resource/view.tsx
@@ -142,7 +142,6 @@ class NonInjectedCreateResource extends React.Component<CreateResourceProps & De
           options={this.props.createResourceTemplates.get()}
           formatGroupLabel={group => group.label}
           menuPlacement="top"
-          themeName="outlined"
           onChange={(option) => {
             if (option) {
               this.props.createResourceTabStore.setData(this.tabId, option.value);
diff --git a/packages/core/src/renderer/components/dock/install-chart/view.tsx b/packages/core/src/renderer/components/dock/install-chart/view.tsx
index 98914b88e3..714259bd85 100644
--- a/packages/core/src/renderer/components/dock/install-chart/view.tsx
+++ b/packages/core/src/renderer/components/dock/install-chart/view.tsx
@@ -93,14 +93,12 @@ const NonInjectedInstallChart = observer(
                 options={version.options.get()}
                 onChange={(changed) => version.onChange(changed?.value)}
                 menuPlacement="top"
-                themeName="outlined"
                 id={`install-chart-version-select-for-${tabId}`}
               />
               <span>Namespace</span>
               <NamespaceSelect
                 showIcons={false}
                 menuPlacement="top"
-                themeName="outlined"
                 value={namespace.value.get()}
                 onChange={namespace.onChange}
                 id={`install-chart-namespace-select-for-${tabId}`}
diff --git a/packages/core/src/renderer/components/dock/upgrade-chart/view.tsx b/packages/core/src/renderer/components/dock/upgrade-chart/view.tsx
index b25f3f24fc..35dbd0242b 100644
--- a/packages/core/src/renderer/components/dock/upgrade-chart/view.tsx
+++ b/packages/core/src/renderer/components/dock/upgrade-chart/view.tsx
@@ -81,7 +81,6 @@ export class NonInjectedUpgradeChart extends React.Component<UpgradeChartProps &
                 id="char-version-input"
                 className="chart-version"
                 menuPlacement="top"
-                themeName="outlined"
                 value={model.version.value.get()}
                 options={model.versionOptions.get()}
                 onChange={model.version.set}
diff --git a/packages/core/src/renderer/components/select/select.scss b/packages/core/src/renderer/components/select/select.scss
index 1cc50a2c00..465a2a2fdf 100644
--- a/packages/core/src/renderer/components/select/select.scss
+++ b/packages/core/src/renderer/components/select/select.scss
@@ -43,10 +43,6 @@ html {
       }
     }
 
-    &__value-container {
-      margin-bottom: 1px;
-    }
-
     &__single-value {
       color: var(--textColorSecondary);
       overflow: visible;
@@ -93,6 +89,8 @@ html {
     &__option {
       white-space: nowrap;
       cursor: pointer;
+      border-radius: 3px;
+      padding: 6px 8px;
 
       &:active {
         background: var(--primary);
@@ -179,21 +177,6 @@ html {
       }
     }
 
-    &.theme-outlined {
-      .Select__control {
-        box-shadow: 0 0 0 1px var(--colorVague);
-        color: var(--primary);
-
-        .Select__value-container {
-          padding: 0 $padding * 0.5;
-        }
-
-        .Select__dropdown-indicator {
-          padding: 3px;
-        }
-      }
-    }
-
     &.theme-lens {
       :hover {
         &.Select__control {