Remove explicit "round-black" theme prop from all inputs

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

src/renderer/components/+config-maps/config-map-details.tsx

@@ -93,7 +93,6 @@ export class ConfigMapDetails extends React.Component<Props> {
                     <div className="flex gaps align-flex-start">
                       <Input
                         multiLine
-                        theme="round-black"
                         className="box grow"
                         value={value}
                         onChange={v => this.data.set(name, v)}

src/renderer/components/+config-secrets/secret-details.tsx

@@ -90,7 +90,6 @@ export class SecretDetails extends React.Component<Props> {
         <div className="flex gaps align-center">
           <Input
             multiLine
-            theme="round-black"
             className="box grow"
             value={value || ""}
             onChange={value => this.editData(name, value, !revealSecret)}

src/renderer/components/+custom-resources/crd-details.tsx

@@ -64,7 +64,6 @@ export class CRDDetails extends React.Component<Props> {
         <DrawerItem name="Conversion" className="flex gaps align-flex-start">
           <Input
             multiLine
-            theme="round-black"
             className="box grow"
             value={crd.getConversion()}
             readOnly

src/renderer/components/+custom-resources/crd-resource-details.tsx

@@ -33,7 +33,6 @@ function convertSpecValue(value: any): any {
       <Input
         readOnly
         multiLine
-        theme="round-black"
         className="box grow"
         value={JSON.stringify(value, null, 2)}
       />

src/renderer/components/+extensions/install.tsx

@@ -60,7 +60,6 @@ const NonInjectedInstall: React.FC<Dependencies & Props> = ({
       <div className="flex-1">
         <Input
           className="box grow mr-6"
-          theme="round-black"
           disabled={
             extensionInstallationStateStore.anyPreInstallingOrInstalling
           }

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

@@ -75,7 +75,6 @@ const NonInjectedApplication: React.FC<Dependencies> = ({ appPreferenceItems })
         </p>
 
         <Input
-          theme="round-black"
           validators={isUrl}
           value={customUrl}
           onChange={setCustomUrl}

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

@@ -61,7 +61,6 @@ export const Editor = observer(() => {
       <section>
         <SubTitle title="Tab size"/>
         <Input
-          theme="round-black"
           type="number"
           min={1}
           validators={InputValidators.isNumber}
@@ -72,7 +71,6 @@ export const Editor = observer(() => {
       <section>
         <SubTitle title="Font size"/>
         <Input
-          theme="round-black"
           type="number"
           min={10}
           validators={InputValidators.isNumber}
@@ -83,7 +81,6 @@ export const Editor = observer(() => {
       <section>
         <SubTitle title="Font family"/>
         <Input
-          theme="round-black"
           type="text"
           validators={InputValidators.isNumber}
           value={editorConfiguration.fontFamily}

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

@@ -62,7 +62,6 @@ const NonInjectedKubectlBinaries: React.FC<Dependencies> = (({ defaultPathForKub
       <section>
         <SubTitle title="Directory for binaries" />
         <Input
-          theme="round-black"
           value={downloadPath}
           placeholder={defaultPathForKubectlBinaries}
           validators={pathValidator}
@@ -78,7 +77,6 @@ const NonInjectedKubectlBinaries: React.FC<Dependencies> = (({ defaultPathForKub
       <section>
         <SubTitle title="Path to kubectl binary" />
         <Input
-          theme="round-black"
           placeholder={bundledKubectlPath()}
           value={binariesPath}
           validators={pathValidator}

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

@@ -20,7 +20,6 @@ export const LensProxy = observer(() => {
         <h2 data-testid="proxy-header">Proxy</h2>
         <SubTitle title="HTTP Proxy"/>
         <Input
-          theme="round-black"
           placeholder="Type HTTP proxy url (example: http://proxy.acme.org:8080)"
           value={proxy}
           onChange={v => setProxy(v)}

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

@@ -28,7 +28,6 @@ export const Terminal = observer(() => {
     <section id="shell">
       <SubTitle title="Terminal Shell Path"/>
       <Input
-        theme="round-black"
         placeholder={defaultShell}
         value={userStore.shell}
         onChange={(value) => userStore.shell = value}
@@ -61,7 +60,6 @@ export const Terminal = observer(() => {
     <section>
       <SubTitle title="Font size"/>
       <Input
-        theme="round-black"
         type="number"
         min={10}
         validators={InputValidators.isNumber}
@@ -72,7 +70,6 @@ export const Terminal = observer(() => {
     <section>
       <SubTitle title="Font family"/>
       <Input
-        theme="round-black"
         type="text"
         value={userStore.terminalConfig.fontFamily}
         onChange={(value) => userStore.terminalConfig.fontFamily=value}

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

@@ -215,6 +215,7 @@ export class ClusterRoleBindingDialog extends React.Component<Props> {
 
         <b>Users</b>
         <EditableList
+          lightTheme
           placeholder="Bind to User Account ..."
           add={(newUser) => this.selectedUsers.add(newUser)}
           items={Array.from(this.selectedUsers)}
@@ -223,6 +224,7 @@ export class ClusterRoleBindingDialog extends React.Component<Props> {
 
         <b>Groups</b>
         <EditableList
+          lightTheme
           placeholder="Bind to User Group ..."
           add={(newGroup) => this.selectedGroups.add(newGroup)}
           items={Array.from(this.selectedGroups)}

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

@@ -212,6 +212,7 @@ export class RoleBindingDialog extends React.Component<Props> {
 
         <b>Users</b>
         <EditableList
+          lightTheme
           placeholder="Bind to User Account ..."
           add={(newUser) => this.selectedUsers.add(newUser)}
           items={Array.from(this.selectedUsers)}
@@ -220,6 +221,7 @@ export class RoleBindingDialog extends React.Component<Props> {
 
         <b>Groups</b>
         <EditableList
+          lightTheme
           placeholder="Bind to User Group ..."
           add={(newGroup) => this.selectedGroups.add(newGroup)}
           items={Array.from(this.selectedGroups)}

src/renderer/components/catalog-entities/weblink-add-command.tsx

@@ -57,7 +57,6 @@ class NonInjectedWeblinkAddCommand extends React.Component<Dependencies> {
         <Input
           placeholder="Link URL"
           autoFocus={this.nameHidden}
-          theme="round-black"
           data-test-id="command-palette-weblink-add-url"
           validators={[isUrl]}
           dirty={this.dirty}
@@ -75,7 +74,6 @@ class NonInjectedWeblinkAddCommand extends React.Component<Dependencies> {
             <Input
               placeholder="Name (optional)"
               autoFocus={true}
-              theme="round-black"
               data-test-id="command-palette-weblink-add-name"
               onSubmit={(v) => this.onSubmit(v)}
               dirty={true}/>

src/renderer/components/cluster-settings/components/cluster-accessible-namespaces.tsx

@@ -40,7 +40,6 @@ export class ClusterAccessibleNamespaces extends React.Component<Props> {
             this.namespaces.delete(oldNamespace);
             this.props.cluster.accessibleNamespaces = Array.from(this.namespaces);
           }}
-          inputTheme="round-black"
         />
         <small className="hint">
         This setting is useful for manually specifying which namespaces you have access to. This is useful when you do not have permissions to list namespaces.

src/renderer/components/cluster-settings/components/cluster-local-terminal-settings.tsx

@@ -149,7 +149,6 @@ export const ClusterLocalTerminalSetting = observer(({ cluster }: Props) => {
       <section className="working-directory">
         <SubTitle title="Working Directory"/>
         <Input
-          theme="round-black"
           value={directory}
           data-testid="working-directory"
           onChange={setDirectory}
@@ -182,7 +181,6 @@ export const ClusterLocalTerminalSetting = observer(({ cluster }: Props) => {
       <section className="default-namespace">
         <SubTitle title="Default Namespace"/>
         <Input
-          theme="round-black"
           data-testid="default-namespace"
           value={defaultNamespace}
           onChange={setDefaultNamespaces}

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

@@ -47,7 +47,6 @@ export class ClusterNameSetting extends React.Component<Props> {
       <>
         <SubTitle title="Cluster Name" />
         <Input
-          theme="round-black"
           validators={isRequired}
           value={this.name}
           onChange={this.onChange}

src/renderer/components/cluster-settings/components/cluster-node-shell-setting.tsx

@@ -38,7 +38,6 @@ export class ClusterNodeShellSetting extends React.Component<Props> {
         <section>
           <SubTitle title="Node shell image" id="node-shell-image"/>
           <Input
-            theme="round-black"
             placeholder={`Default image: ${initialNodeShellImage}`}
             value={this.nodeShellImage}
             onChange={value => this.nodeShellImage = value}
@@ -63,7 +62,6 @@ export class ClusterNodeShellSetting extends React.Component<Props> {
           <SubTitle title="Image pull secret" id="image-pull-secret"/>
           <Input
             placeholder="Specify a secret name..."
-            theme="round-black"
             value={this.imagePullSecret}
             onChange={value => this.imagePullSecret = value}
             iconRight={

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

@@ -134,7 +134,6 @@ export class ClusterPrometheusSetting extends React.Component<Props> {
             <section>
               <SubTitle title="Prometheus service address" />
               <Input
-                theme="round-black"
                 value={this.path}
                 onChange={(value) => this.path = value}
                 onBlur={this.onSavePath}

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

@@ -44,7 +44,6 @@ export class ClusterProxySetting extends React.Component<Props> {
       <>
         <SubTitle title="HTTP Proxy" id="http-proxy" />
         <Input
-          theme="round-black"
           value={this.proxy}
           onChange={this.onChange}
           onBlur={this.save}

src/renderer/components/editable-list/editable-list.tsx

@@ -9,7 +9,7 @@ import { observer } from "mobx-react";
 import React from "react";
 
 import { Icon } from "../icon";
-import { Input, InputProps, InputValidator } from "../input";
+import { Input, InputValidator } from "../input";
 import { boundMethod } from "../../utils";
 
 export interface Props<T> {
@@ -22,13 +22,12 @@ export interface Props<T> {
   // An optional prop used to convert T to a displayable string
   // defaults to `String`
   renderItem?: (item: T, index: number) => React.ReactNode,
-  inputTheme?: InputProps["theme"];
+  lightTheme?: boolean;
 }
 
 const defaultProps: Partial<Props<any>> = {
   placeholder: "Add new item...",
   renderItem: (item: any, index: number) => <React.Fragment key={index}>{item}</React.Fragment>,
-  inputTheme: "round",
 };
 
 @observer
@@ -44,13 +43,13 @@ export class EditableList<T> extends React.Component<Props<T>> {
   }
 
   render() {
-    const { items, remove, renderItem, placeholder, validators, inputTheme } = this.props;
+    const { items, remove, renderItem, placeholder, validators, lightTheme } = this.props;
 
     return (
       <div className="EditableList">
         <div className="el-header">
           <Input
-            theme={inputTheme}
+            lightTheme={lightTheme}
             onSubmit={this.onSubmit}
             validators={validators}
             placeholder={placeholder}

src/renderer/components/hotbar/hotbar-add-command.tsx

@@ -33,7 +33,6 @@ const NonInjectedHotbarAddCommand = observer(({ closeCommandOverlay, addHotbar,
       <Input
         placeholder="Hotbar name"
         autoFocus={true}
-        theme="round-black"
         data-test-id="command-palette-hotbar-add-name"
         validators={uniqueHotbarName}
         onSubmit={onSubmit}

src/renderer/components/hotbar/hotbar-rename-command.tsx

@@ -55,7 +55,6 @@ const NonInjectedHotbarRenameCommand = observer(({ closeCommandOverlay, hotbarMa
           onChange={setHotbarName}
           placeholder="New hotbar name"
           autoFocus={true}
-          theme="round-black"
           validators={uniqueHotbarName}
           onSubmit={onSubmit}
           showValidationLine={true}

src/renderer/components/input/input.scss

@@ -43,7 +43,7 @@
     }
   }
 
-  &.light {
+  &.lightTheme {
     label {
       background: #f6f6f7; /* inputControlBackground from light theme */
       border-color: #cccdcf; /* inputControlBorder from light theme */

src/renderer/components/input/input.tsx

@@ -37,7 +37,7 @@ export interface IconDataFnArg {
 export type IconData = string | React.ReactNode | ((opt: IconDataFnArg) => React.ReactNode);
 
 export type InputProps = Omit<InputElementProps, "onChange" | "onSubmit"> & {
-  theme?: "round-black" | "round";
+  lightTheme?: boolean; // Forced light theme, may be used for dialogs which is always "bright"
   className?: string;
   value?: string;
   trim?: boolean;
@@ -313,20 +313,6 @@ export class Input extends React.Component<InputProps, State> {
     }
   }
 
-  get themeSelection(): Record<string, boolean> {
-    const { theme } = this.props;
-
-    if (!theme) {
-      return {};
-    }
-
-    return {
-      theme: true,
-      round: true,
-      black: theme === "round-black",
-    };
-  }
-
   @boundMethod
   bindRef(elem: InputElement) {
     this.input = elem;
@@ -348,7 +334,7 @@ export class Input extends React.Component<InputProps, State> {
 
   render() {
     const {
-      multiLine, showValidationLine, validators, theme, maxRows, children, showErrorsAsTooltip,
+      multiLine, showValidationLine, validators, lightTheme, maxRows, children, showErrorsAsTooltip,
       maxLength, rows, disabled, autoSelectOnFocus, iconLeft, iconRight, contentRight, id,
       dirty: _dirty, // excluded from passing to input-element
       defaultValue,
@@ -359,7 +345,7 @@ export class Input extends React.Component<InputProps, State> {
     const { focused, dirty, valid, validating, errors } = this.state;
 
     const className = cssNames("Input", this.props.className, {
-      ...this.themeSelection,
+      lightTheme,
       focused,
       disabled,
       invalid: !valid,

src/renderer/components/list/list.tsx

@@ -34,7 +34,6 @@ export function List({ columns, data, title, items, filters }: Props) {
         <div>
           <SearchInput
             value={search}
-            theme="round-black"
             onChange={setSearch}
             className={styles.searchInput}
           />