Split UserManagement into seperate Cluster and Namespace Roles and RoleBindings (#2755)

src/renderer/components/select/select.tsx

@@ -26,10 +26,11 @@ import "./select.scss";
 import React, { ReactNode } from "react";
 import { computed, makeObservable } from "mobx";
 import { observer } from "mobx-react";
-import { boundMethod, cssNames } from "../../utils";
 import ReactSelect, { ActionMeta, components, OptionTypeBase, Props as ReactSelectProps, Styles } from "react-select";
 import Creatable, { CreatableProps } from "react-select/creatable";
+
 import { ThemeStore } from "../../theme.store";
+import { boundMethod, cssNames } from "../../utils";
 
 const { Menu } = components;
 
@@ -65,8 +66,10 @@ export class Select extends React.Component<SelectProps> {
     makeObservable(this);
   }
 
-  @computed get theme() {
-    return this.props.themeName || ThemeStore.getInstance().activeTheme.type;
+  @computed get themeClass() {
+    const themeName = this.props.themeName || ThemeStore.getInstance().activeTheme.type;
+
+    return `theme-${themeName}`;
   }
 
   private styles: Styles<OptionTypeBase, boolean> = {
@@ -128,7 +131,6 @@ export class Select extends React.Component<SelectProps> {
       className, menuClass, isCreatable, autoConvertOptions,
       value, options, components = {}, ...props
     } = this.props;
-    const themeClass = `theme-${this.theme}`;
     const WrappedMenu = components.Menu ?? Menu;
 
     const selectProps: Partial<SelectProps> = {
@@ -138,14 +140,14 @@ export class Select extends React.Component<SelectProps> {
       options: autoConvertOptions ? this.options : options,
       onChange: this.onChange,
       onKeyDown: this.onKeyDown,
-      className: cssNames("Select", themeClass, className),
+      className: cssNames("Select", this.themeClass, className),
       classNamePrefix: "Select",
       components: {
         ...components,
         Menu: props => (
           <WrappedMenu
             {...props}
-            className={cssNames(menuClass, themeClass, props.className)}
+            className={cssNames(menuClass, this.themeClass, props.className)}
           />
         ),
       }