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,
+    error,
-    errors,
     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 ? (

new-lamassu-admin/src/components/inputs/formik/RadioGroup.js

@@ -9,7 +9,8 @@ const styles = {
   label: {
     height: 16,
     lineHeight: '16px',
-    margin: [[0, 0, 4, 0]]
+    margin: [[0, 0, 4, 0]],
+    paddingLeft: 3
   }
 }
 

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

@@ -6,14 +6,15 @@ const TextInputFormik = memo(({ ...props }) => {
   const { name, onChange, onBlur, value } = props.field
   const { touched, errors } = props.form
 
+  const error = !!(touched[name] && errors[name])
+
   return (
     <TextInput
       name={name}
       onChange={onChange}
       onBlur={onBlur}
       value={value}
-      touched={touched}
+      error={error}
-      errors={errors}
       {...props}
     />
   )

new-lamassu-admin/src/components/inputs/formik/TextInput.styles.js

@@ -1,4 +1,9 @@
-import { fontColor, offColor } from 'src/styling/variables'
+import {
+  fontColor,
+  offColor,
+  inputFontSize,
+  inputFontWeight
+} from 'src/styling/variables'
 import typographyStyles from 'src/components/typography/styles'
 
 const { info3 } = typographyStyles
@@ -7,7 +12,10 @@ const styles = {
   masked: {
     position: 'absolute',
     bottom: 5,
-    color: fontColor
+    left: 4,
+    color: fontColor,
+    fontSize: inputFontSize,
+    fontWeight: inputFontWeight
   },
   secretSpan: {
     extend: info3,

new-lamassu-admin/src/pages/OperatorInfo/ContactInfo.js

@@ -30,7 +30,7 @@ const fieldStyles = {
     position: 'relative',
     width: 280,
     height: 46,
-    padding: [[0, 4, 4, 4]]
+    padding: [[0, 4, 4, 0]]
   },
   notEditing: {
     display: 'flex',
@@ -38,10 +38,12 @@ const fieldStyles = {
     '& > p:first-child': {
       height: 16,
       lineHeight: '16px',
-      margin: [[0, 0, 4, 0]]
+      paddingLeft: 3,
+      margin: [[0, 0, 5, 0]]
     },
     '& > p:last-child': {
-      margin: 0
+      margin: 0,
+      paddingLeft: 4
     }
   }
 }
@@ -57,27 +59,25 @@ const Field = ({ editing, field, displayValue, ...props }) => {
   }
 
   return (
-    <>
+    <div className={classnames(classNames)}>
-      <div className={classnames(classNames)}>
+      {!editing && (
-        {!editing && (
+        <>
-          <>
+          <Label1>{field.label}</Label1>
-            <Label1>{field.label}</Label1>
+          <Info3>{displayValue(field.value)}</Info3>
-            <Info3>{displayValue(field.value)}</Info3>
+        </>
-          </>
+      )}
-        )}
+      {editing && (
-        {editing && (
+        <FormikField
-          <FormikField
+          id={field.name}
-            id={field.name}
+          name={field.name}
-            name={field.name}
+          component={field.component}
-            component={field.component}
+          placeholder={field.placeholder}
-            placeholder={field.placeholder}
+          type={field.type}
-            type={field.type}
+          label={field.label}
-            label={field.label}
+          {...props}
-            {...props}
+        />
-          />
+      )}
-        )}
+    </div>
-      </div>
-    </>
   )
 }
 
@@ -115,7 +115,7 @@ const ContactInfo = () => {
 
   useQuery(GET_CONFIG, {
     onCompleted: data => {
-      const operatorInfo = data.config
+      const { operatorInfo } = data.config
       setInfo(operatorInfo ?? {})
     }
   })
@@ -178,41 +178,58 @@ const ContactInfo = () => {
 
   const displayTextValue = value => value
 
+  const form = {
+    initialValues: {
+      infoCardEnabled: findValue('infoCardEnabled'),
+      fullName: findValue('fullName'),
+      phoneNumber: info.phoneNumber ?? '',
+      email: findValue('email'),
+      website: findValue('website'),
+      companyNumber: findValue('companyNumber')
+    },
+    validationSchema: Yup.object().shape({
+      fullName: Yup.string()
+        .max(100, 'Too long')
+        .required(),
+      phoneNumber: Yup.string()
+        .matches(mask, { excludeEmptyString: true })
+        .max(100, 'Too long')
+        .required(),
+      email: Yup.string()
+        .email('Please enter a valid email address')
+        .max(100, 'Too long')
+        .required(),
+      website: Yup.string()
+        .url('Please enter a valid url')
+        .max(100, 'Too long')
+        .required(),
+      companyNumber: Yup.string()
+        .max(30, 'Too long')
+        .required()
+    })
+  }
+
   return (
     <>
       <div className={classes.header}>
         <Info2>Contact information</Info2>
         {!editing && (
-          <button onClick={() => setEditing(true)}>
+          <div>
-            <EditIcon />
+            <button onClick={() => setEditing(true)}>
-          </button>
+              <EditIcon />
+            </button>
+          </div>
         )}
       </div>
       <div className={classes.section}>
         <Formik
-          initialValues={{
+          enableReinitialize
-            infoCardEnabled: findValue('infoCardEnabled'),
+          initialValues={form.initialValues}
-            fullName: findValue('fullName'),
+          validationSchema={form.validationSchema}
-            phoneNumber: info.phoneNumber ?? '',
+          onSubmit={values => save(values)}
-            email: findValue('email'),
+          onReset={(values, bag) => {
-            website: findValue('website'),
+            setEditing(false)
-            companyNumber: findValue('companyNumber')
+            setError(null)
-          }}
-          validationSchema={Yup.object().shape({
-            fullName: Yup.string().max(100, 'Too long'),
-            phoneNumber: Yup.string()
-              .matches(mask, { excludeEmptyString: true })
-              .max(100, 'Too long'),
-            email: Yup.string()
-              .email('Please enter a valid email address')
-              .max(100, 'Too long'),
-            website: Yup.string()
-              .url('Please enter a valid url')
-              .max(100, 'Too long'),
-            companyNumber: Yup.string().max(30, 'Too long')
-          })}
-          onSubmit={values => {
-            save(values)
           }}>
           <Form>
             <div className={classnames(classes.row, classes.radioButtonsRow)}>
@@ -270,12 +287,7 @@ const ContactInfo = () => {
                   <Link color="primary" type="submit">
                     Save
                   </Link>
-                  <Link
+                  <Link color="secondary" type="reset">
-                    color="secondary"
-                    onClick={() => {
-                      setEditing(false)
-                      setError(null)
-                    }}>
                     Cancel
                   </Link>
                   {error && (

new-lamassu-admin/src/pages/OperatorInfo/OperatorInfo.styles.js

@@ -3,11 +3,16 @@ import { offColor } from 'src/styling/variables'
 const styles = {
   header: {
     display: 'flex',
-    '& > button': {
+    '& > p': {
-      border: 'none',
+      marginTop: 0
-      backgroundColor: 'transparent',
+    },
+    '& > div': {
       marginLeft: 20,
-      cursor: 'pointer'
+      '& > button': {
+        border: 'none',
+        backgroundColor: 'transparent',
+        cursor: 'pointer'
+      }
     }
   },
   section: {
@@ -20,6 +25,7 @@ const contactInfoStyles = {
     display: 'flex',
     justifyContent: 'space-between',
     marginBottom: 28,
+    width: 600,
     '&:last-child': {
       marginBottom: 0
     }
@@ -35,11 +41,13 @@ const contactInfoStyles = {
     }
   },
   radioButtonsRow: {
-    height: 60
+    height: 60,
+    marginBottom: 14
   },
   radioButtons: {
     display: 'flex',
-    flexDirection: 'row'
+    flexDirection: 'row',
+    paddingLeft: 4
   },
   submit: {
     justifyContent: 'flex-start',

new-lamassu-admin/src/styling/variables.js

@@ -78,7 +78,7 @@ if (version === 8) {
 }
 
 const smallestFontSize = fontSize5
-const inputFontSize = fontSize4
+const inputFontSize = fontSize3
 const inputFontSizeLg = fontSize1
 const inputFontWeight = 500
 const inputFontFamily = fontSecondary