Fix namespace selector gradients (#2761)

src/renderer/components/+namespaces/namespace-select-filter.scss

@@ -0,0 +1,47 @@
+.NamespaceSelectFilter {
+  --gradientColor: var(--select-menu-bgc);
+
+  .Select {
+    &.theme-light {
+      --gradientColor: white;
+    }
+
+    &__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(--gradientColor) 0px, transparent);
+      }
+
+      &::after {
+        right: 0px;
+        background: linear-gradient(to left, var(--gradientColor) 0px, transparent);
+      }
+    }
+  }
+}

src/renderer/components/+namespaces/namespace-select-filter.tsx

@@ -19,7 +19,7 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import "./namespace-select.scss";
+import "./namespace-select-filter.scss";
 
 import React from "react";
 import { observer } from "mobx-react";
@@ -28,10 +28,11 @@ import { components, PlaceholderProps } from "react-select";
 import { Icon } from "../icon";
 import { FilterIcon } from "../item-object-list/filter-icon";
 import { FilterType } from "../item-object-list/page-filters.store";
-import type { SelectOption } from "../select";
 import { NamespaceSelect } from "./namespace-select";
 import { namespaceStore } from "./namespace.store";
 
+import type { SelectOption, SelectProps } from "../select";
+
 const Placeholder = observer((props: PlaceholderProps<any>) => {
   const getPlaceholder = (): React.ReactNode => {
     const namespaces = namespaceStore.contextNamespaces;
@@ -54,9 +55,8 @@ const Placeholder = observer((props: PlaceholderProps<any>) => {
   );
 });
 
-
 @observer
-export class NamespaceSelectFilter extends React.Component {
+export class NamespaceSelectFilter extends React.Component<SelectProps> {
   formatOptionLabel({ value: namespace, label }: SelectOption) {
     if (namespace) {
       const isSelected = namespaceStore.hasContext(namespace);
@@ -92,6 +92,7 @@ export class NamespaceSelectFilter extends React.Component {
         placeholder={""}
         onChange={this.onChange}
         formatOptionLabel={this.formatOptionLabel}
+        className="NamespaceSelectFilter"
       />
     );
   }

src/renderer/components/+namespaces/namespace-select.scss

@@ -25,41 +25,8 @@
   }
 }
 
-.GradientValueContainer {
-  width: 8px;
-  height: var(--font-size);
-  position: absolute;
-  z-index: 20;
-
-  &.front {
-    left: 0px;
-    background: linear-gradient(to right, var(--contentColor) 0px, transparent);
-  }
-
-  &.back {
-    right: 0px;
-    background: linear-gradient(to left, var(--contentColor) 0px, transparent);
-  }
-}
-
 .NamespaceSelect {
   @include namespaceSelectCommon;
-
-  .Select {
-    &__placeholder {
-      width: 100%;
-      white-space: nowrap;
-      overflow: scroll;
-      margin-left: -8px;
-      padding-left: 8px;
-      margin-right: -8px;
-      padding-right: 8px;
-
-      &::-webkit-scrollbar {
-        display: none;
-      }
-    }
-  }
 }
 
 .NamespaceSelectMenu {

src/renderer/components/+namespaces/namespace-select.tsx

@@ -29,7 +29,6 @@ import { cssNames } from "../../utils";
 import { Icon } from "../icon";
 import { namespaceStore } from "./namespace.store";
 import { kubeWatchApi } from "../../api/kube-watch-api";
-import { components, ValueContainerProps } from "react-select";
 
 interface Props extends SelectProps {
   showIcons?: boolean;
@@ -43,16 +42,6 @@ const defaultProps: Partial<Props> = {
   showClusterOption: false,
 };
 
-function GradientValueContainer<T>({children, ...rest}: ValueContainerProps<T>) {
-  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;
@@ -98,8 +87,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)}

src/renderer/components/select/select.scss

@@ -35,8 +35,6 @@ html {
     position: relative;
     min-width: 220px;
 
-    
-
     * {
       color: inherit;
     }
@@ -50,7 +48,7 @@ html {
     &__control {
       border: none;
       border-radius: $radius;
-      background: transparent;
+      background: var(--select-menu-bgc);
       min-height: 0;
       box-shadow: 0 0 0 1px $halfGray;
       cursor: pointer;