Convert Input styles to css modules

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

src/renderer/components/input/input.module.scss

@@ -0,0 +1,114 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+
+.Input {
+  position: relative;
+  text-align: left;
+
+  &.invalid.dirty:not(.validating) {
+    label {
+      border-color: var(--colorSoftError);
+    }
+  }
+
+  label {
+    position: relative;
+    background: var(--inputControlBackground);
+    border-radius: 4px;
+    border: 1px solid var(--inputControlBorder);
+    color: var(--textColorTertiary);
+    padding: var(--padding);
+
+    &:hover {
+      border-color: var(--inputControlHoverBorder);
+    }
+
+    &:focus-within {
+      border-color: var(--colorInfo);
+    }
+
+    &:after {
+      display: none;
+    }
+  }
+
+  &.validatingLine {
+    label:after {
+      display: block;
+      width: 100%;
+      @include stripeLinesAnimation;
+    }
+  }
+
+  &.lightTheme {
+    label {
+      background: #f6f6f7; /* inputControlBackground from light theme */
+      border-color: #cccdcf; /* inputControlBorder from light theme */
+    }
+  }
+
+  input[type=number]::-webkit-inner-spin-button {
+    -webkit-appearance: none; // hide browser controls (top/bottom arrows)
+  }
+
+  input, textarea {
+    background: none;
+    color: inherit;
+    font: inherit;
+    text-align: inherit;
+    text-transform: inherit;
+
+    &:invalid {
+      box-shadow: none;
+    }
+
+    &::placeholder {
+      color: inherit;
+      opacity: .75;
+    }
+  }
+
+  textarea {
+    @include hidden-scrollbar;
+    line-height: 1.2;
+    resize: none;
+  }
+
+  fieldset:disabled &,
+  &.disabled {
+    opacity: .5;
+    pointer-events: none;
+  }
+
+  .InputInfo {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+
+    .errors {
+      color: var(--colorError);
+      font-size: $font-size-small;
+    }
+
+    .maxLengthIndicator {
+      text-align: right;
+      font-size: 80%;
+      padding: $padding * 0.33333;
+    }
+  }
+
+  .InputArea {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+}
+
+:global(.Tooltip.InputTooltipError) {
+  --bgc: var(--colorError);
+  --border: none;
+  --color: white;
+}

src/renderer/components/input/input.tsx

@@ -3,7 +3,7 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 
-import "./input.scss";
+import styles from "./input.module.scss";
 
 import React, { DOMAttributes, InputHTMLAttributes, TextareaHTMLAttributes } from "react";
 import { boundMethod, cssNames, debouncePromise, getRandId } from "../../utils";
@@ -342,16 +342,15 @@ export class Input extends React.Component<InputProps, State> {
       blurOnEnter,
       ...inputProps
     } = this.props;
-    const { focused, dirty, valid, validating, errors } = this.state;
+    const { dirty, valid, validating, errors } = this.state;
 
-    const className = cssNames("Input", this.props.className, {
-      lightTheme,
-      focused,
-      disabled,
-      invalid: !valid,
-      dirty,
-      validating,
-      validatingLine: validating && showValidationLine,
+    const className = cssNames(styles.Input, this.props.className, {
+      [styles.lightTheme]: lightTheme,
+      [styles.disabled]: disabled,
+      [styles.invalid]: !valid,
+      [styles.dirty]: dirty,
+      [styles.validating]: validating,
+      [styles.validatingLine]: validating && showValidationLine,
     });
 
     // prepare input props
@@ -368,7 +367,7 @@ export class Input extends React.Component<InputProps, State> {
     });
     const showErrors = errors.length > 0 && !valid && dirty;
     const errorsInfo = (
-      <div className="errors box grow">
+      <div className={styles.errors}>
         {errors.map((error, i) => <p key={i}>{error}</p>)}
       </div>
     );
@@ -392,16 +391,16 @@ export class Input extends React.Component<InputProps, State> {
     return (
       <div id={componentId} className={className}>
         {tooltipError}
-        <label className="input-area flex gaps align-center" id="">
+        <label className={styles.InputArea} id="">
           {this.renderIcon(iconLeft)}
           {multiLine ? <textarea {...inputProps as any} /> : <input {...inputProps as any} />}
           {this.renderIcon(iconRight)}
           {contentRight}
         </label>
-        <div className="input-info flex gaps">
+        <div className={styles.InputInfo}>
           {!showErrorsAsTooltip && showErrors && errorsInfo}
           {this.showMaxLenIndicator && (
-            <div className="maxLengthIndicator box right">
+            <div className={styles.maxLengthIndicator}>
               {this.getValue().length} / {maxLength}
             </div>
           )}