fix: make textinput style guide compliant

fix: correct input spacing

fix: correct label color

fix: correct input width

fix: move formik stuff out of base TextInput

new-lamassu-admin/src/components/inputs/base/TextInput.js

@@ -1,20 +1,24 @@
+import React, { memo } from 'react'
+import classnames from 'classnames'
 import InputAdornment from '@material-ui/core/InputAdornment'
 import TextField from '@material-ui/core/TextField'
 import { makeStyles } from '@material-ui/core/styles'
-import React, { memo } from 'react'
 
 import {
   fontColor,
+  offColor,
+  secondaryColor,
   inputFontSize,
   inputFontSizeLg,
   inputFontWeight
-} from '../../../styling/variables'
+} from 'src/styling/variables'
 
 const useStyles = makeStyles({
   inputRoot: {
     fontSize: inputFontSize,
     color: fontColor,
-    fontWeight: inputFontWeight
+    fontWeight: inputFontWeight,
+    paddingLeft: 4
   },
   inputRootLg: {
     fontSize: inputFontSizeLg,
@@ -22,7 +26,43 @@ const useStyles = makeStyles({
     fontWeight: inputFontWeight
   },
   labelRoot: {
-    color: fontColor
+    color: fontColor,
+    paddingLeft: 4
+  },
+  root: {
+    '& .MuiInput-underline:before': {
+      borderBottom: [[2, 'solid', fontColor]]
+    },
+    '& .Mui-focused': {
+      color: fontColor
+    },
+    '& input': {
+      paddingTop: 4,
+      paddingBottom: 3
+    },
+    '& .MuiInputBase-input': {
+      width: 282
+    },
+    '& .MuiInputBase-inputMultiline': {
+      width: 500,
+      paddingRight: 20
+    }
+  },
+  empty: {
+    '& .MuiInputLabel-root:not(.MuiFormLabel-filled):not(.MuiInputLabel-shrink)': {
+      color: offColor
+    },
+    '& .MuiInputLabel-formControl:not(.MuiInputLabel-shrink)': {
+      top: -2
+    }
+  },
+  filled: {
+    '& .MuiInput-underline:before': {
+      borderBottomColor: secondaryColor
+    },
+    '& .MuiInput-underline:hover:not(.Mui-disabled)::before': {
+      borderBottomColor: secondaryColor
+    }
   }
 })
 
@@ -32,22 +72,29 @@ const TextInput = memo(
     onChange,
     onBlur,
     value,
-    touched,
-    errors,
+    error,
     suffix,
     large,
+    className,
     ...props
   }) => {
     const classes = useStyles()
 
+    const classNames = {
+      [className]: true,
+      [classes.filled]: !error && value,
+      [classes.empty]: !value || value === ''
+    }
+
     return (
       <TextField
         id={name}
         onChange={onChange}
         onBlur={onBlur}
-        error={!!(touched[name] && errors[name])}
+        error={error}
         value={value}
         classes={{ root: classes.root }}
+        className={classnames(classNames)}
         InputProps={{
           className: large ? classes.inputRootLg : classes.inputRoot,
           endAdornment: suffix ? (