From 625031974d474d2f1049e096e3f443c2b4dc0adf Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Fri, 23 Jun 2023 19:14:49 -0700
Subject: [PATCH] Fix input styles

---
 components/common/Input/index.module.scss |  8 ++++----
 components/common/Input/index.tsx         | 19 ++++++++++++-------
 2 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/components/common/Input/index.module.scss b/components/common/Input/index.module.scss
index 241bf51b..3557fa93 100644
--- a/components/common/Input/index.module.scss
+++ b/components/common/Input/index.module.scss
@@ -1,4 +1,4 @@
-.Input {
+.input {
   -webkit-font-smoothing: antialiased;
   background-color: var(--input-bg);
   border: 2px solid transparent;
@@ -17,7 +17,7 @@
     outline: none;
   }
 
-  &.Bound {
+  &.bound {
     background-color: var(--input-bound-bg);
 
     &:hover {
@@ -39,7 +39,7 @@
   }
 }
 
-.InputError {
+.inputError {
   color: $error;
   font-size: $font-tiny;
   margin: $unit 0;
@@ -48,7 +48,7 @@
   width: 0;
 }
 
-.Input::placeholder {
+.input::placeholder {
   /* Chrome, Firefox, Opera, Safari 10.1+ */
   color: var(--text-secondary);
   opacity: 1; /* Firefox */
diff --git a/components/common/Input/index.tsx b/components/common/Input/index.tsx
index 56659fda..6744cf37 100644
--- a/components/common/Input/index.tsx
+++ b/components/common/Input/index.tsx
@@ -8,6 +8,7 @@ interface Props
     React.InputHTMLAttributes<HTMLInputElement>,
     HTMLInputElement
   > {
+  bound?: boolean
   visible?: string
   error?: string
   label?: string
@@ -18,20 +19,26 @@ const defaultProps = {
 }
 
 const Input = React.forwardRef<HTMLInputElement, Props>(function Input(
-  props: Props,
+  { value, visible, bound, error, label, ...props }: Props,
   forwardedRef
 ) {
   // States
   const [inputValue, setInputValue] = useState('')
 
   // Classes
-  const classes = classNames({ Input: true }, props.className)
+  const classes = classNames(
+    {
+      [styles.input]: true,
+      [styles.bound]: bound,
+    },
+    props.className
+  )
   const { defaultValue, ...inputProps } = props
 
   // Change value when prop updates
   useEffect(() => {
-    if (props.value) setInputValue(`${props.value}`)
-  }, [props.value])
+    if (value) setInputValue(`${value}`)
+  }, [value])
 
   function handleChange(event: React.ChangeEvent<HTMLInputElement>) {
     setInputValue(event.target.value)
@@ -49,9 +56,7 @@ const Input = React.forwardRef<HTMLInputElement, Props>(function Input(
         onChange={handleChange}
         formNoValidate
       />
-      {props.error && props.error.length > 0 && (
-        <p className="InputError">{props.error}</p>
-      )}
+      {error && error.length > 0 && <p className="InputError">{error}</p>}
     </React.Fragment>
   )
 })