Fix input styles

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 */

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}`)
+    if (value) setInputValue(`${value}`)
-  }, [props.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 && (
+      {error && error.length > 0 && <p className="InputError">{error}</p>}
-        <p className="InputError">{props.error}</p>
-      )}
     </React.Fragment>
   )
 })