From fd6e788c4d1146dad0000f38497d0e8cd11ac681 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Fri, 30 Jun 2023 12:28:36 -0700
Subject: [PATCH] Update input

Make a consistent height with select triggers and fix props
---
 components/common/Input/index.module.scss | 14 +++++++++++---
 components/common/Input/index.tsx         | 10 +++++-----
 2 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/components/common/Input/index.module.scss b/components/common/Input/index.module.scss
index b6fc4f36..2381b0a2 100644
--- a/components/common/Input/index.module.scss
+++ b/components/common/Input/index.module.scss
@@ -1,3 +1,7 @@
+.full {
+  width: 100%;
+}
+
 .input {
   -webkit-font-smoothing: antialiased;
   background-color: var(--input-bg);
@@ -11,7 +15,7 @@
     padding: $unit * 1.5 $unit-2x;
   }
 
-  &.wrapper {
+  &.accessory {
     $offset: 2px;
 
     align-items: center;
@@ -25,7 +29,7 @@
       color: var(--text-tertiary);
       display: block;
       font-weight: $bold;
-      line-height: 42px;
+      line-height: 48px;
       position: absolute;
       right: $unit-2x;
       top: 0;
@@ -36,7 +40,7 @@
       border-radius: $input-corner;
       border: none;
       box-sizing: border-box;
-      padding: $unit * 1.5 $unit-2x;
+      padding: ($unit * 1.75) $unit-2x;
       width: 100%;
     }
   }
@@ -58,6 +62,10 @@
     }
   }
 
+  &.number {
+    min-width: $unit-8x;
+  }
+
   &.AlignRight {
     text-align: right;
   }
diff --git a/components/common/Input/index.tsx b/components/common/Input/index.tsx
index da194a24..0210d6c3 100644
--- a/components/common/Input/index.tsx
+++ b/components/common/Input/index.tsx
@@ -27,12 +27,12 @@ const Input = React.forwardRef<HTMLInputElement, Props>(function input(
   // Classes
   const wrapperClasses = classNames(
     {
-      [styles.wrapper]: showCounter,
+      [styles.wrapper]: true,
+      [styles.accessory]: showCounter,
       [styles.input]: showCounter,
       [styles.bound]: showCounter && bound,
     },
-    showCounter &&
-      props.className?.split(' ').map((className) => styles[className])
+    props.className?.split(' ').map((className) => styles[className])
   )
 
   const inputClasses = classNames(
@@ -43,7 +43,7 @@ const Input = React.forwardRef<HTMLInputElement, Props>(function input(
     !showCounter &&
       props.className?.split(' ').map((className) => styles[className])
   )
-  const { defaultValue, ...inputProps } = props
+  const { defaultValue, hide1Password, ...inputProps } = props
 
   // Hooks
   useEffect(() => {
@@ -67,7 +67,7 @@ const Input = React.forwardRef<HTMLInputElement, Props>(function input(
         type={props.type}
         name={props.name}
         placeholder={props.placeholder}
-        defaultValue={value || ''}
+        value={value || ''}
         onBlur={props.onBlur}
         onChange={handleChange}
         maxLength={props.maxLength}