From 9de5f731d84a38d77add2589793b166393970cfc Mon Sep 17 00:00:00 2001
From: Alex Andreev <alex.andreev.email@gmail.com>
Date: Mon, 5 Apr 2021 11:20:34 +0300
Subject: [PATCH] Adding lens Select theme

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
---
 .../components/+preferences/helm-charts.tsx   |   1 +
 .../+preferences/kubectl-binaries.tsx         |   1 +
 src/renderer/components/select/select.scss    | 103 ++++++++++++++----
 src/renderer/components/select/select.tsx     |   2 +-
 4 files changed, 87 insertions(+), 20 deletions(-)

diff --git a/src/renderer/components/+preferences/helm-charts.tsx b/src/renderer/components/+preferences/helm-charts.tsx
index f1c38deb04..1b0d80bf26 100644
--- a/src/renderer/components/+preferences/helm-charts.tsx
+++ b/src/renderer/components/+preferences/helm-charts.tsx
@@ -104,6 +104,7 @@ export class HelmCharts extends React.Component {
             formatOptionLabel={this.formatOptionLabel}
             controlShouldRenderValue={false}
             className="box grow"
+            themeName="lens"
           />
           <Button
             primary
diff --git a/src/renderer/components/+preferences/kubectl-binaries.tsx b/src/renderer/components/+preferences/kubectl-binaries.tsx
index 40a56da5e2..0eace69c10 100644
--- a/src/renderer/components/+preferences/kubectl-binaries.tsx
+++ b/src/renderer/components/+preferences/kubectl-binaries.tsx
@@ -48,6 +48,7 @@ export const KubectlBinaries = observer(({ preferences }: { preferences: UserPre
           value={preferences.downloadMirror}
           onChange={({ value }: SelectOption) => preferences.downloadMirror = value}
           disabled={!preferences.downloadKubectlBinaries}
+          themeName="lens"
         />
       </section>
 
diff --git a/src/renderer/components/select/select.scss b/src/renderer/components/select/select.scss
index 2890d28526..d0e13c1dc5 100644
--- a/src/renderer/components/select/select.scss
+++ b/src/renderer/components/select/select.scss
@@ -5,6 +5,7 @@ html {
   $menuBackgroundColor: $contentColor;
 
   --select-menu-bgc: #{$menuBackgroundColor};
+  --select-menu-border-color: #{$halfGray};
   --select-option-selected-color: #{$inputOptionHoverColor};
   --select-option-focused-bgc: #{$colorInfo};
   --select-option-focused-color: #{$textColorAccent};
@@ -13,17 +14,7 @@ html {
     position: relative;
     min-width: 220px;
 
-    :hover {
-      &.Select__control {
-        box-shadow: 0 0 0 1px var(--inputControlHoverBorder);
-      }
-    }
-
-    :focus-within {
-      &.Select__control {
-        box-shadow: 0 0 0 1px $colorInfo;
-      }
-    }
+    
 
     * {
       color: inherit;
@@ -40,8 +31,7 @@ html {
       border-radius: $radius;
       background: transparent;
       min-height: 0;
-      box-shadow: 0 0 0 1px var(--inputControlBorder); // TODO: make theme-aware colors
-      background: var(--inputControlBackground);
+      box-shadow: 0 0 0 1px $halfGray;
       cursor: pointer;
 
       &--is-focused {
@@ -80,7 +70,7 @@ html {
 
     &__menu {
       background: var(--select-menu-bgc);
-      box-shadow: inset 0 0 0 1px var(--inputControlHoverBorder);
+      box-shadow: inset 0 0 0 1px var(--select-menu-border-color);
       width: max-content;
       min-width: 100%;
 
@@ -98,19 +88,19 @@ html {
     &__option {
       white-space: nowrap;
       cursor: pointer;
-      border-radius: 4px;
 
       &:active {
-        background: var(--inputControlBackground);
+        background: $primary;
       }
 
       &--is-selected {
-        background: var(--inputControlBackground);
-        color: var(--textColorAccent);
+        background: var(--menuSelectedOptionBgc);
+        color: var(--select-option-selected-color);
       }
 
       &--is-focused {
-        background: var(--inputControlBackground);
+        color: var(--select-option-focused-color);
+        background: var(--select-option-focused-bgc);
       }
 
       &--is-disabled {
@@ -154,6 +144,32 @@ html {
   }
 
   .Select, .Select__menu {
+    &.theme-light {
+      --select-menu-bgc: white;
+      --select-option-selected-color: $textColorSecondary;
+
+      .Select {
+        &__multi-value {
+          background: none;
+          box-shadow: 0 0 0 1px $textColorSecondary;
+        }
+
+        &__option {
+          &:active {
+            color: white;
+          }
+
+          &:hover {
+            color: white;
+          }
+
+          &--is-focused {
+            color: white;
+          }
+        }
+      }
+    }
+
     &.theme-outlined {
       .Select__control {
         box-shadow: 0 0 0 1px $colorVague;
@@ -168,5 +184,54 @@ html {
         }
       }
     }
+
+    &.theme-lens {
+      :hover {
+        &.Select__control {
+          box-shadow: 0 0 0 1px var(--inputControlHoverBorder);
+        }
+      }
+
+      :focus-within {
+        &.Select__control {
+          box-shadow: 0 0 0 1px $colorInfo;
+        }
+      }
+
+      &.Select__menu {
+        box-shadow: inset 0 0 0 1px var(--inputControlBorder);
+      }
+
+      .Select {
+        &__control {
+          box-shadow: 0 0 0 1px var(--inputControlBorder);
+          background: var(--inputControlBackground);
+        }
+
+        &__menu {
+          &-list {
+            padding: 6px;
+          }
+        }
+
+        &__option {
+          border-radius: 4px;
+
+          &:active {
+            background: var(--inputControlBackground);
+          }
+
+          &--is-selected {
+            background: var(--inputControlBackground);
+            color: var(--textColorAccent);
+          }
+
+          &--is-focused {
+            color: var(--textColorPrimary);
+            background: var(--inputControlBackground);
+          }
+        }
+      }
+    }
   }
 }
diff --git a/src/renderer/components/select/select.tsx b/src/renderer/components/select/select.tsx
index 5888411dbb..e816633804 100644
--- a/src/renderer/components/select/select.tsx
+++ b/src/renderer/components/select/select.tsx
@@ -24,7 +24,7 @@ export interface SelectOption<T = any> {
 
 export interface SelectProps<T = any> extends ReactSelectProps<T>, CreatableProps<T> {
   value?: T;
-  themeName?: "dark" | "light" | "outlined";
+  themeName?: "dark" | "light" | "outlined" | "lens";
   menuClass?: string;
   isCreatable?: boolean;
   autoConvertOptions?: boolean; // to internal format (i.e. {value: T, label: string}[]), not working with groups