Removing themes from Select

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
2025-05-20 05:10:56 +00:00 · 2022-02-01 13:27:44 +03:00 · 2022-02-01 13:27:44 +03:00 · 55fccc542b
commit 55fccc542b
parent 3cda2047f0
22 changed files with 80 additions and 164 deletions
--- a/src/renderer/components/+apps-helm-charts/helm-chart-details.tsx
+++ b/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: (
--- a/src/renderer/components/+apps-releases/release-rollback-dialog.tsx
+++ b/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}
--- a/src/renderer/components/+config-resource-quotas/add-quota-dialog.tsx
+++ b/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}
--- a/src/renderer/components/+config-secrets/add-secret-dialog.tsx
+++ b/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}
                />
--- a/src/renderer/components/+namespaces/add-namespace-dialog.tsx
+++ b/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>
--- a/src/renderer/components/+preferences/application.tsx
+++ b/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>
--- a/src/renderer/components/+preferences/editor.tsx
+++ b/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>

--- a/src/renderer/components/+preferences/helm-charts.tsx
+++ b/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
--- a/src/renderer/components/+preferences/kubectl-binaries.tsx
+++ b/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>

--- a/src/renderer/components/+preferences/terminal.tsx
+++ b/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,
--- a/src/renderer/components/+user-management/+cluster-role-bindings/dialog.tsx
+++ b/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}
--- a/src/renderer/components/+user-management/+role-bindings/dialog.tsx
+++ b/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}
--- a/src/renderer/components/+user-management/+roles/add-dialog.tsx
+++ b/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}
            />
--- a/src/renderer/components/+user-management/+service-accounts/create-dialog.tsx
+++ b/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}
            />
--- a/src/renderer/components/cluster-settings/components/cluster-metrics-setting.tsx
+++ b/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
--- a/src/renderer/components/cluster-settings/components/cluster-prometheus-setting.tsx
+++ b/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>
              </>
--- a/src/renderer/components/delete-cluster-dialog/delete-cluster-dialog.tsx
+++ b/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>
--- a/src/renderer/components/dock/create-resource.tsx
+++ b/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}
        />
--- a/src/renderer/components/dock/install-chart.tsx
+++ b/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}
        />
--- a/src/renderer/components/dock/upgrade-chart.tsx
+++ b/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}
--- a/src/renderer/components/select/select.scss
+++ b/src/renderer/components/select/select.scss
@ -7,13 +7,18 @@
 // Docs: https://react-select.com/styles

 html {
-  $menuBackgroundColor: var(--contentColor);
-
-  --select-menu-bgc: #{$menuBackgroundColor};
-  --select-menu-border-color: var(--halfGray);
-  --select-option-selected-color: var(--inputOptionHoverColor);
+  --select-menu-bgc: var(--inputControlBackground);
+  --select-menu-border-color: var(--inputControlBorder);
+  --select-option-selected-bgcolor: var(--menuSelectedOptionBgc);
+  --select-option-selected-color: var(--textColorAccent);
  --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 {
-    &.theme-light {
-      --select-menu-bgc: white;
-      --select-option-selected-color: var(--textColorSecondary);
-
-      .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);
-          }
-        }
-      }
+    &.lightTheme {
+      --select-menu-bgc: var(--light-select-menu-bgc);
+      --select-menu-border-color: var(--light-select-menu-border-color);
+      --select-option-selected-bgcolor: var(--light-select-option-selected-bgcolor);
+      --select-option-selected-color: var(--light-select-option-selected-color);
    }
  }
 }
--- a/src/renderer/components/select/select.tsx
+++ b/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() {
-    const themeName = this.props.themeName || ThemeStore.getInstance().activeTheme.type;
-
-    return `theme-${themeName}`;
+  @computed get lightTheme() {
+    return this.props.lightTheme || ThemeStore.getInstance().activeTheme.type == "light";
  }

  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)}
          />
        ),
      },