Fix text field labels of first time flow. Add text fields to storybook (#4389)

mascara/src/app/first-time/create-password-screen.js

@@ -143,6 +143,7 @@ class CreatePasswordScreen extends Component {
               autoComplete="new-password"
               margin="normal"
               fullWidth
+              largeLabel
             />
             <TextField
               id="confirm-password"
@@ -155,6 +156,7 @@ class CreatePasswordScreen extends Component {
               autoComplete="confirm-password"
               margin="normal"
               fullWidth
+              largeLabel
             />
             <button
               className="first-time-flow__button"

mascara/src/app/first-time/import-seed-phrase-screen.js

@@ -146,6 +146,7 @@ class ImportSeedPhraseScreen extends Component {
               error={passwordError}
               autoComplete="new-password"
               margin="normal"
+              largeLabel
             />
             <TextField
               id="confirm-password"
@@ -157,6 +158,7 @@ class ImportSeedPhraseScreen extends Component {
               error={confirmPasswordError}
               autoComplete="confirm-password"
               margin="normal"
+              largeLabel
             />
             <button
               className="first-time-flow__button"

ui/app/components/text-field/text-field.component.js

@@ -1,8 +1,15 @@
-import React, { Component } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import { withStyles } from '@material-ui/core/styles'
 import { default as MaterialTextField } from '@material-ui/core/TextField'
 
+const inputLabelBase = {
+  transform: 'none',
+  transition: 'none',
+  position: 'initial',
+  color: '#5b5b5b',
+}
+
 const styles = {
   materialLabel: {
     '&$materialFocused': {
@@ -46,29 +53,18 @@ const styles = {
       border: '1px solid #2f9ae0',
     },
   },
+  largeInputLabel: {
+    ...inputLabelBase,
+    fontSize: '1rem',
+  },
   inputLabel: {
+    ...inputLabelBase,
     fontSize: '.75rem',
-    transform: 'none',
-    transition: 'none',
-    position: 'initial',
-    color: '#5b5b5b',
   },
 }
 
-class TextField extends Component {
+const TextField = props => {
-  static defaultProps = {
+  const { error, classes, material, startAdornment, largeLabel, ...textFieldProps } = props
-    error: null,
-  }
-
-  static propTypes = {
-    error: PropTypes.string,
-    classes: PropTypes.object,
-    material: PropTypes.bool,
-    startAdornment: PropTypes.element,
-  }
-
-  render () {
-    const { error, classes, material, startAdornment, ...textFieldProps } = this.props
 
   return (
     <MaterialTextField
@@ -76,7 +72,7 @@ class TextField extends Component {
       helperText={error}
       InputLabelProps={{
         shrink: material ? undefined : true,
-          className: material ? '' : classes.inputLabel,
+        className: material ? '' : (largeLabel ? classes.largeInputLabel : classes.inputLabel),
         FormLabelClasses: {
           root: material ? classes.materialLabel : classes.formLabel,
           focused: material ? classes.materialFocused : classes.formLabelFocused,
@@ -96,7 +92,18 @@ class TextField extends Component {
       {...textFieldProps}
     />
   )
-  }
+}
+
+TextField.defaultProps = {
+  error: null,
+}
+
+TextField.propTypes = {
+  error: PropTypes.string,
+  classes: PropTypes.object,
+  material: PropTypes.bool,
+  startAdornment: PropTypes.element,
+  largeLabel: PropTypes.bool,
 }
 
 export default withStyles(styles)(TextField)

ui/app/components/text-field/text-field.stories.js

@@ -22,3 +22,32 @@ storiesOf('TextField', module)
       error="Invalid value"
     />
   )
+  .add('Mascara text', () =>
+    <TextField
+      label="Text"
+      type="text"
+      largeLabel
+    />
+  )
+  .add('Material text', () =>
+    <TextField
+      label="Text"
+      type="text"
+      material
+    />
+  )
+  .add('Material password', () =>
+    <TextField
+      label="Password"
+      type="password"
+      material
+    />
+  )
+  .add('Material error', () =>
+    <TextField
+      type="text"
+      label="Name"
+      error="Invalid value"
+      material
+    />
+  )