Update fields to have a custom component

resources/scripts/components/elements/Field.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Field as FormikField, FieldProps } from 'formik';
 import classNames from 'classnames';
+import Input from '@/components/elements/Input';
 
 interface OwnProps {
     name: string;
@@ -20,13 +21,12 @@ const Field = ({ id, name, light = false, label, description, validate, classNam
                     {label &&
                     <label htmlFor={id} className={light ? undefined : 'input-dark-label'}>{label}</label>
                     }
-                    <input
+                    <Input
                         id={id}
                         {...field}
                         {...props}
-                        className={classNames((className || (light ? 'input' : 'input-dark')), {
-                            error: touched[field.name] && errors[field.name],
-                        })}
+                        isLight={light}
+                        hasError={!!(touched[field.name] && errors[field.name])}
                     />
                     {touched[field.name] && errors[field.name] ?
                         <p className={'input-help error'}>

resources/scripts/components/elements/Input.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import styled, { css } from 'styled-components/macro';
+import tw from 'twin.macro';
+
+export interface Props {
+    isLight?: boolean;
+    hasError?: boolean;
+}
+
+const light = css<Props>`
+    ${tw`bg-white border-neutral-200 text-neutral-800`};    
+    &:focus { ${tw`border-primary-400`} }
+        
+    &:disabled {
+        ${tw`bg-neutral-100 border-neutral-200`};
+    }
+`;
+
+const Input = styled.input<Props>`
+    // Reset to normal styling.
+    ${tw`appearance-none w-full min-w-0`};
+    ${tw`p-3 border rounded text-sm transition-all duration-150`};
+    ${tw`bg-neutral-600 border-neutral-500 hover:border-neutral-400 text-neutral-200 shadow-none`};
+    
+    ${props => props.hasError && tw`text-red-600 border-red-500 hover:border-red-600`};
+    & + .input-help {
+        ${tw`mt-1 text-xs`};
+        ${props => props.hasError ? tw`text-red-400` : tw`text-neutral-400`};
+    }
+    
+    &:required, &:invalid {
+        ${tw`shadow-none`};
+    }
+    
+    &:focus {
+        ${tw`shadow-md border-neutral-400`};
+    }
+
+    &:disabled {
+        ${tw`opacity-75`};
+    }
+    
+    ${props => props.isLight && light};
+`;
+
+export default Input;