From 4378a58b81be5f1bb1e2312ccc1cdac0cf2da2b5 Mon Sep 17 00:00:00 2001
From: Alex Andreev <alex.andreev.email@gmail.com>
Date: Fri, 26 Mar 2021 14:57:50 +0300
Subject: [PATCH] Fix gradients in namespace selector

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
---
 .../+namespaces/namespace-select-filter.scss  | 41 +++++++++++++++++++
 .../+namespaces/namespace-select-filter.tsx   |  1 +
 .../+namespaces/namespace-select.scss         | 17 --------
 .../+namespaces/namespace-select.tsx          | 15 +------
 4 files changed, 43 insertions(+), 31 deletions(-)
 create mode 100644 src/renderer/components/+namespaces/namespace-select-filter.scss

diff --git a/src/renderer/components/+namespaces/namespace-select-filter.scss b/src/renderer/components/+namespaces/namespace-select-filter.scss
new file mode 100644
index 0000000000..b9ad196e04
--- /dev/null
+++ b/src/renderer/components/+namespaces/namespace-select-filter.scss
@@ -0,0 +1,41 @@
+.NamespaceSelectFilter {
+  .Select {
+    &__placeholder {
+      width: 100%;
+      white-space: nowrap;
+      overflow: scroll!important;
+      text-overflow: unset!important;
+      margin-left: -8px;
+      padding-left: 8px;
+      margin-right: -8px;
+      padding-right: 8px;
+
+      &::-webkit-scrollbar {
+        display: none;
+      }
+    }
+
+    &__value-container {
+      position: relative;
+
+      &::before, &::after {
+        content: ' ';
+        position: absolute;
+        z-index: 20;
+        display: block;
+        width: 8px;
+        height: var(--font-size);
+      }
+
+      &::before {
+        left: 0px;
+        background: linear-gradient(to right, var(--contentColor) 0px, transparent);
+      }
+
+      &::after {
+        right: 0px;
+        background: linear-gradient(to left, var(--contentColor) 0px, transparent);
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/renderer/components/+namespaces/namespace-select-filter.tsx b/src/renderer/components/+namespaces/namespace-select-filter.tsx
index 3fad7f1017..7b73cfc99d 100644
--- a/src/renderer/components/+namespaces/namespace-select-filter.tsx
+++ b/src/renderer/components/+namespaces/namespace-select-filter.tsx
@@ -71,6 +71,7 @@ export class NamespaceSelectFilter extends React.Component {
         placeholder={""}
         onChange={this.onChange}
         formatOptionLabel={this.formatOptionLabel}
+        className="NamespaceSelectFilter"
       />
     );
   }
diff --git a/src/renderer/components/+namespaces/namespace-select.scss b/src/renderer/components/+namespaces/namespace-select.scss
index a9dc37f93e..f300544cfb 100644
--- a/src/renderer/components/+namespaces/namespace-select.scss
+++ b/src/renderer/components/+namespaces/namespace-select.scss
@@ -23,23 +23,6 @@
 
 .NamespaceSelect {
   @include namespaceSelectCommon;
-
-  .Select {
-    &__placeholder {
-      width: 100%;
-      white-space: nowrap;
-      overflow: scroll!important;
-      text-overflow: unset!important;
-      margin-left: -8px;
-      padding-left: 8px;
-      margin-right: -8px;
-      padding-right: 8px;
-
-      &::-webkit-scrollbar {
-        display: none;
-      }
-    }
-  }
 }
 
 .NamespaceSelectMenu {
diff --git a/src/renderer/components/+namespaces/namespace-select.tsx b/src/renderer/components/+namespaces/namespace-select.tsx
index 1c4aec664d..d3df621b50 100644
--- a/src/renderer/components/+namespaces/namespace-select.tsx
+++ b/src/renderer/components/+namespaces/namespace-select.tsx
@@ -1,4 +1,4 @@
-import "./namespace-select.scss";
+import "./namespace-select-filter.scss";
 
 import React from "react";
 import { computed } from "mobx";
@@ -8,7 +8,6 @@ import { cssNames } from "../../utils";
 import { Icon } from "../icon";
 import { namespaceStore } from "./namespace.store";
 import { kubeWatchApi } from "../../api/kube-watch-api";
-import { components, OptionTypeBase, ValueContainerProps } from "react-select";
 
 interface Props extends SelectProps {
   showIcons?: boolean;
@@ -22,16 +21,6 @@ const defaultProps: Partial<Props> = {
   showClusterOption: false,
 };
 
-function GradientValueContainer({children, ...rest}: ValueContainerProps<OptionTypeBase, boolean>) {
-  return (
-    <components.ValueContainer {...rest}>
-      <div className="GradientValueContainer front" />
-      {children}
-      <div className="GradientValueContainer back" />
-    </components.ValueContainer>
-  );
-}
-
 @observer
 export class NamespaceSelect extends React.Component<Props> {
   static defaultProps = defaultProps as object;
@@ -77,8 +66,6 @@ export class NamespaceSelect extends React.Component<Props> {
   render() {
     const { className, showIcons, customizeOptions, components = {}, ...selectProps } = this.props;
 
-    components.ValueContainer ??= GradientValueContainer;
-
     return (
       <Select
         className={cssNames("NamespaceSelect", className)}