Removing themes from Select

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

src/renderer/components/+apps-helm-charts/helm-chart-details.tsx

@@ -118,7 +118,6 @@ class NonInjectedHelmChartDetails extends Component<Props & Dependencies> {
           </div>
           <DrawerItem name="Version" className="version" onClick={stopPropagation}>
             <Select
-              themeName="outlined"
               menuPortalTarget={null}
               options={chartVersions.map(chart => ({
                 label: (

src/renderer/components/+apps-releases/release-rollback-dialog.tsx

@@ -75,7 +75,7 @@ class NonInjectedReleaseRollbackDialog extends React.Component<Props & Dependenc
       <div className="flex gaps align-center">
         <b>Revision</b>
         <Select
-          themeName="light"
+          lightTheme
           value={revision}
           options={revisions}
           formatOptionLabel={({ value }: SelectOption<IReleaseRevision>) => `${value.revision} - ${value.chart}

src/renderer/components/+config-resource-quotas/add-quota-dialog.tsx

@@ -157,6 +157,7 @@ export class AddQuotaDialog extends React.Component<Props> {
           >
             <div className="flex gaps">
               <Input
+                lightTheme
                 required autoFocus
                 placeholder="ResourceQuota name"
                 trim
@@ -170,7 +171,7 @@ export class AddQuotaDialog extends React.Component<Props> {
             <NamespaceSelect
               value={this.namespace}
               placeholder="Namespace"
-              themeName="light"
+              lightTheme
               className="box grow"
               onChange={({ value }) => this.namespace = value}
             />
@@ -179,13 +180,14 @@ export class AddQuotaDialog extends React.Component<Props> {
             <div className="flex gaps align-center">
               <Select
                 className="quota-select"
-                themeName="light"
+                lightTheme
                 placeholder="Select a quota.."
                 options={this.quotaOptions}
                 value={this.quotaSelectValue}
                 onChange={({ value }) => this.quotaSelectValue = value}
               />
               <Input
+                lightTheme
                 maxLength={10}
                 placeholder="Value"
                 value={this.quotaInputValue}

src/renderer/components/+config-secrets/add-secret-dialog.tsx

@@ -216,7 +216,7 @@ export class AddSecretDialog extends React.Component<Props> {
               <div className="secret-namespace">
                 <SubTitle title="Namespace" />
                 <NamespaceSelect
-                  themeName="light"
+                  lightTheme
                   value={namespace}
                   onChange={({ value }) => this.namespace = value}
                 />
@@ -224,7 +224,7 @@ export class AddSecretDialog extends React.Component<Props> {
               <div className="secret-type">
                 <SubTitle title="Secret type" />
                 <Select
-                  themeName="light"
+                  lightTheme
                   options={this.types}
                   value={type} onChange={({ value }: SelectOption) => this.type = value}
                 />

src/renderer/components/+namespaces/add-namespace-dialog.tsx

@@ -83,6 +83,7 @@ class NonInjectedAddNamespaceDialog extends React.Component<Props & Dependencies
               placeholder="Namespace"
               trim
               validators={systemName}
+              lightTheme
               value={namespace} onChange={v => this.namespace = v.toLowerCase()}
             />
           </WizardStep>

src/renderer/components/+preferences/application.tsx

@@ -48,7 +48,6 @@ const NonInjectedApplication: React.FC<Dependencies> = ({ appPreferenceItems })
           options={themeStore.themeOptions}
           value={userStore.colorTheme}
           onChange={({ value }) => userStore.colorTheme = value}
-          themeName="lens"
         />
       </section>
 
@@ -66,7 +65,6 @@ const NonInjectedApplication: React.FC<Dependencies> = ({ appPreferenceItems })
               userStore.extensionRegistryUrl.customUrl = "";
             }
           })}
-          themeName="lens"
         />
         <p className="mt-4 mb-5 leading-relaxed">
           This setting is to change the registry URL for installing extensions by name.{" "}
@@ -105,7 +103,6 @@ const NonInjectedApplication: React.FC<Dependencies> = ({ appPreferenceItems })
           options={updateChannelOptions}
           value={userStore.updateChannel}
           onChange={({ value }) => userStore.updateChannel = value}
-          themeName="lens"
         />
       </section>
 
@@ -117,7 +114,6 @@ const NonInjectedApplication: React.FC<Dependencies> = ({ appPreferenceItems })
           options={timezoneOptions}
           value={userStore.localeTimezone}
           onChange={({ value }) => userStore.setLocaleTimezone(value)}
-          themeName="lens"
         />
       </section>
     </section>

src/renderer/components/+preferences/editor.tsx

@@ -39,7 +39,6 @@ export const Editor = observer(() => {
           <div className="flex gaps align-center">
             <SubHeader compact>Position</SubHeader>
             <Select
-              themeName="lens"
               options={["left", "right"]}
               value={editorConfiguration.minimap.side}
               onChange={({ value }) => editorConfiguration.minimap.side = value}
@@ -54,7 +53,6 @@ export const Editor = observer(() => {
           options={Object.entries(EditorLineNumbersStyles).map(([value, label]) => ({ label, value }))}
           value={editorConfiguration.lineNumbers}
           onChange={({ value }) => editorConfiguration.lineNumbers = value}
-          themeName="lens"
         />
       </section>
 

src/renderer/components/+preferences/helm-charts.tsx

@@ -144,7 +144,6 @@ export class HelmCharts extends React.Component {
             formatOptionLabel={this.formatOptionLabel}
             controlShouldRenderValue={false}
             className="box grow"
-            themeName="lens"
           />
           <Button
             primary

src/renderer/components/+preferences/kubectl-binaries.tsx

@@ -55,7 +55,6 @@ const NonInjectedKubectlBinaries: React.FC<Dependencies> = (({ defaultPathForKub
           onChange={({ value }: SelectOption) => userStore.downloadMirror = value}
           disabled={!userStore.downloadKubectlBinaries}
           isOptionDisabled={({ platforms }) => !platforms.has(process.platform)}
-          themeName="lens"
         />
       </section>
 

src/renderer/components/+preferences/terminal.tsx

@@ -47,7 +47,6 @@ export const Terminal = observer(() => {
     <section id="terminalTheme">
       <SubTitle title="Terminal theme" />
       <Select
-        themeName="lens"
         options={[
           { label: "Match theme", value: "" },
           ...themeStore.themeOptions,

src/renderer/components/+user-management/+cluster-role-bindings/dialog.tsx

@@ -174,7 +174,7 @@ export class ClusterRoleBindingDialog extends React.Component<Props> {
       <>
         <SubTitle title="Cluster Role Reference" />
         <Select
-          themeName="light"
+          lightTheme
           placeholder="Select cluster role ..."
           isDisabled={this.isEditing}
           options={this.clusterRoleRefoptions}
@@ -234,7 +234,7 @@ export class ClusterRoleBindingDialog extends React.Component<Props> {
         <b>Service Accounts</b>
         <Select
           isMulti
-          themeName="light"
+          lightTheme
           placeholder="Select service accounts ..."
           autoConvertOptions={false}
           options={this.serviceAccountOptions}

src/renderer/components/+user-management/+role-bindings/dialog.tsx

@@ -178,7 +178,7 @@ export class RoleBindingDialog extends React.Component<Props> {
       <>
         <SubTitle title="Namespace" />
         <NamespaceSelect
-          themeName="light"
+          lightTheme
           isDisabled={this.isEditing}
           value={this.bindingNamespace}
           autoFocus={!this.isEditing}
@@ -187,7 +187,7 @@ export class RoleBindingDialog extends React.Component<Props> {
 
         <SubTitle title="Role Reference" />
         <Select
-          themeName="light"
+          lightTheme
           placeholder="Select role or cluster role ..."
           isDisabled={this.isEditing}
           options={this.roleRefOptions}
@@ -231,7 +231,7 @@ export class RoleBindingDialog extends React.Component<Props> {
         <b>Service Accounts</b>
         <Select
           isMulti
-          themeName="light"
+          lightTheme
           placeholder="Select service accounts ..."
           autoConvertOptions={false}
           options={this.serviceAccountOptions}

src/renderer/components/+user-management/+roles/add-dialog.tsx

@@ -85,7 +85,7 @@ export class AddRoleDialog extends React.Component<Props> {
             />
             <SubTitle title="Namespace" />
             <NamespaceSelect
-              themeName="light"
+              lightTheme
               value={this.namespace}
               onChange={({ value }) => this.namespace = value}
             />

src/renderer/components/+user-management/+service-accounts/create-dialog.tsx

@@ -81,7 +81,7 @@ export class CreateServiceAccountDialog extends React.Component<Props> {
             />
             <SubTitle title="Namespace" />
             <NamespaceSelect
-              themeName="light"
+              lightTheme
               value={namespace}
               onChange={({ value }) => this.namespace = value}
             />

src/renderer/components/cluster-settings/components/cluster-metrics-setting.tsx

@@ -85,7 +85,7 @@ export class ClusterMetricsSetting extends React.Component<Props> {
           options={Object.values(ClusterMetricsResourceType)}
           onChange={this.onChangeSelect}
           formatOptionLabel={this.formatOptionLabel}
-          themeName="lens"
+          lightTheme
         />
         <Button
           primary

src/renderer/components/cluster-settings/components/cluster-prometheus-setting.tsx

@@ -122,7 +122,7 @@ export class ClusterPrometheusSetting extends React.Component<Props> {
                     this.onSaveProvider();
                   }}
                   options={this.options}
-                  themeName="lens"
+                  lightTheme
                 />
                 <small className="hint">What query format is used to fetch metrics from Prometheus</small>
               </>

src/renderer/components/delete-cluster-dialog/delete-cluster-dialog.tsx

@@ -138,7 +138,7 @@ export class DeleteClusterDialog extends React.Component {
           options={options}
           value={this.newCurrentContext}
           onChange={({ value }) => this.newCurrentContext = value}
-          themeName="light"
+          lightTheme
           className="ml-[1px] mr-[1px]"
         />
       </div>

src/renderer/components/dock/create-resource.tsx

@@ -140,7 +140,6 @@ class NonInjectedCreateResource extends React.Component<Props & Dependencies> {
           placeholder="Select Template ..."
           options={this.templates}
           menuPlacement="top"
-          themeName="outlined"
           onChange={v => this.onSelectTemplate(v)}
           value={this.currentTemplate}
         />

src/renderer/components/dock/install-chart.tsx

@@ -175,13 +175,11 @@ class NonInjectedInstallChart extends Component<Props & Dependencies> {
           options={versions}
           onChange={this.onVersionChange}
           menuPlacement="top"
-          themeName="outlined"
         />
         <span>Namespace</span>
         <NamespaceSelect
           showIcons={false}
           menuPlacement="top"
-          themeName="outlined"
           value={namespace}
           onChange={this.onNamespaceChange}
         />

src/renderer/components/dock/upgrade-chart.tsx

@@ -140,7 +140,6 @@ export class NonInjectedUpgradeChart extends React.Component<Props & Dependencie
         <Select
           className="chart-version"
           menuPlacement="top"
-          themeName="outlined"
           value={version}
           options={versions}
           formatOptionLabel={this.formatVersionLabel}

src/renderer/components/select/select.scss

@@ -7,13 +7,18 @@
 // Docs: https://react-select.com/styles
 
 html {
-  $menuBackgroundColor: var(--contentColor);
+  --select-menu-bgc: var(--inputControlBackground);
-
+  --select-menu-border-color: var(--inputControlBorder);
-  --select-menu-bgc: #{$menuBackgroundColor};
+  --select-option-selected-bgcolor: var(--menuSelectedOptionBgc);
-  --select-menu-border-color: var(--halfGray);
+  --select-option-selected-color: var(--textColorAccent);
-  --select-option-selected-color: var(--inputOptionHoverColor);
   --select-option-focused-bgc: var(--colorInfo);
-  --select-option-focused-color: var(--textColorAccent);
+  --select-option-focused-color: #ffffff; // Same for both themes until bg color is contrast enough
+
+  // Custom light values to override theme ones (e. g. for dialogs)
+  --light-select-menu-bgc: #f6f6f7;
+  --light-select-menu-border-color: #cccdcf;
+  --light-select-option-selected-bgcolor: #e8e8e8;
+  --light-select-option-selected-color: var(--textColorTertiary);
 
   .Select {
     position: relative;
@@ -31,10 +36,10 @@ html {
 
     &__control {
       border: none;
-      border-radius: $radius;
+      border-radius: 4px;
       background: var(--select-menu-bgc);
       min-height: 0;
-      box-shadow: 0 0 0 1px var(--halfGray);
+      box-shadow: 0 0 0 1px var(--select-menu-border-color);
       cursor: pointer;
       line-height: 1;
 
@@ -47,10 +52,6 @@ html {
       margin-bottom: 1px;
     }
 
-    &__single-value {
-      color: var(--textColorSecondary);
-    }
-
     &__indicator {
       padding: $padding *0.5;
       opacity: .55;
@@ -92,13 +93,14 @@ html {
     &__option {
       white-space: nowrap;
       cursor: pointer;
+      border-radius: 4px;
 
       &:active {
         background: var(--primary);
       }
 
       &--is-selected {
-        background: var(--menuSelectedOptionBgc);
+        background: var(--select-option-selected-bgcolor);
         color: var(--select-option-selected-color);
       }
 
@@ -119,14 +121,6 @@ html {
       }
     }
 
-    &__value-container {
-      &--is-multi {
-      }
-
-      &--has-value {
-      }
-    }
-
     &__multi-value {
       background: var(--layoutBackground);
 
@@ -139,118 +133,53 @@ html {
         }
       }
     }
-  }
 
-  //-- Themes
+    &__value-container {
+      margin-top: 2px;
+      margin-bottom: 2px;
+    }
+
+    &__single-value {
+      color: var(--textColorTertiary);
+      overflow: visible;
+    }
+
+    &.lightTheme {
+      --select-menu-bgc: var(--light-select-menu-bgc);
+      --select-menu-border-color: var(--light-select-menu-border-color);
+
+      &__control {
+        background: var(--select-menu-bgc);
+      }
+
+      &__option {
+        &:active {
+          color: white;
+        }
+
+        &:hover {
+          color: white;
+        }
+
+        &--is-focused {
+          color: white;
+        }
+
+        &--is-disabled:hover {
+          color: inherit;
+        }
+      }
+    }
+  }
 
   .Select__menu {
     z-index: $zIndex-select-portal; // render at the top when used inside dialog
-  }
 
-  .Select, .Select__menu {
+    &.lightTheme {
-    &.theme-light {
+      --select-menu-bgc: var(--light-select-menu-bgc);
-      --select-menu-bgc: white;
+      --select-menu-border-color: var(--light-select-menu-border-color);
-      --select-option-selected-color: var(--textColorSecondary);
+      --select-option-selected-bgcolor: var(--light-select-option-selected-bgcolor);
-
+      --select-option-selected-color: var(--light-select-option-selected-color);
-      .Select {
-        &__multi-value {
-          background: none;
-          box-shadow: 0 0 0 1px var(--textColorSecondary);
-        }
-
-        &__option {
-          &:active {
-            color: white;
-          }
-
-          &:hover {
-            color: white;
-          }
-
-          &--is-focused {
-            color: white;
-          }
-
-          &--is-disabled:hover {
-            color: inherit;
-          }
-        }
-      }
-    }
-
-    &.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 {
-          box-shadow: 0 0 0 1px var(--inputControlHoverBorder);
-          transition: box-shadow 0.1s;
-        }
-      }
-
-      :focus-within {
-        &.Select__control {
-          box-shadow: 0 0 0 1px var(--colorInfo);
-        }
-      }
-
-      &.Select__menu {
-        box-shadow: inset 0 0 0 1px var(--inputControlBorder);
-      }
-
-      .Select {
-        &__value-container {
-          margin-top: 2px;
-          margin-bottom: 2px;
-        }
-
-        &__control {
-          box-shadow: 0 0 0 1px var(--inputControlBorder);
-          background: var(--inputControlBackground);
-          border-radius: var(--border-radius);
-        }
-
-        &__single-value {
-          color: var(--textColorTertiary);
-        }
-
-        &__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);
-          }
-        }
-      }
     }
   }
 }

src/renderer/components/select/select.tsx

@@ -30,7 +30,7 @@ export interface SelectOption<T = any> {
 
 export interface SelectProps<T = any> extends ReactSelectProps<T, boolean>, CreatableProps<T, boolean> {
   value?: T;
-  themeName?: "dark" | "light" | "outlined" | "lens";
+  lightTheme?: boolean; // Forced light theme, may be used for dialogs which is always "bright"
   menuClass?: string;
   isCreatable?: boolean;
   autoConvertOptions?: boolean; // to internal format (i.e. {value: T, label: string}[]), not working with groups
@@ -50,10 +50,8 @@ export class Select extends React.Component<SelectProps> {
     makeObservable(this);
   }
 
-  @computed get themeClass() {
+  @computed get lightTheme() {
-    const themeName = this.props.themeName || ThemeStore.getInstance().activeTheme.type;
+    return this.props.lightTheme || ThemeStore.getInstance().activeTheme.type == "light";
-
-    return `theme-${themeName}`;
   }
 
   private styles: Styles<OptionTypeBase, boolean> = {
@@ -124,14 +122,14 @@ export class Select extends React.Component<SelectProps> {
       options: autoConvertOptions ? this.options : options,
       onChange: this.onChange,
       onKeyDown: this.onKeyDown,
-      className: cssNames("Select", this.themeClass, className),
+      className: cssNames("Select", className, { lightTheme: this.lightTheme }),
       classNamePrefix: "Select",
       components: {
         ...components,
         Menu: props => (
           <WrappedMenu
             {...props}
-            className={cssNames(menuClass, this.themeClass, props.className)}
+            className={cssNames(menuClass, { lightTheme: this.lightTheme }, props.className)}
           />
         ),
       },