1 files changed, 79 insertions, 38 deletions
diff --git a/ui/app/components/text-field/text-field.component.js b/ui/app/components/text-field/text-field.component.js
index 6fd3b82b4..4107068b5 100644
--- a/ui/app/components/text-field/text-field.component.js
+++ b/ui/app/components/text-field/text-field.component.js
@@ -1,59 +1,100 @@
-import React from 'react'
+import React, { Component } from 'react'
 import PropTypes from 'prop-types'
-import { withStyles } from 'material-ui/styles'
-import { default as MaterialTextField } from 'material-ui/TextField'
+import { withStyles } from '@material-ui/core/styles'
+import { default as MaterialTextField } from '@material-ui/core/TextField'
 
 const styles = {
-  cssLabel: {
-    '&$cssFocused': {
+  materialLabel: {
+    '&$materialFocused': {
       color: '#aeaeae',
     },
-    '&$cssError': {
+    '&$materialError': {
       color: '#aeaeae',
     },
     fontWeight: '400',
     color: '#aeaeae',
   },
-  cssFocused: {},
-  cssUnderline: {
+  materialFocused: {},
+  materialUnderline: {
     '&:after': {
-      backgroundColor: '#f7861c',
+      borderBottom: '2px solid #f7861c',
     },
   },
-  cssError: {},
+  materialError: {},
+  // Non-material styles
+  formLabel: {
+    '&$formLabelFocused': {
+      color: '#5b5b5b',
+    },
+    '&$materialError': {
+      color: '#5b5b5b',
+    },
+  },
+  formLabelFocused: {},
+  inputRoot: {
+    'label + &': {
+      marginTop: '8px',
+    },
+    border: '1px solid #d2d8dd',
+    height: '48px',
+    borderRadius: '4px',
+    padding: '0 16px',
+    display: 'flex',
+    alignItems: 'center',
+    '&:focus': {
+      border: '1px solid #2f9ae0',
+    },
+  },
+  inputLabel: {
+    fontSize: '.75rem',
+    transform: 'none',
+    transition: 'none',
+    position: 'initial',
+    color: '#5b5b5b',
+  },
 }
 
-const TextField = props => {
-  const { error, classes, ...textFieldProps } = props
+class TextField extends Component {
+  static defaultProps = {
+    error: null,
+  }
 
-  return (
-    <MaterialTextField
-      error={Boolean(error)}
-      helperText={error}
-      InputLabelProps={{
-        FormLabelClasses: {
-          root: classes.cssLabel,
-          focused: classes.cssFocused,
-          error: classes.cssError,
-        },
-      }}
-      InputProps={{
-        classes: {
-          underline: classes.cssUnderline,
-        },
-      }}
-      {...textFieldProps}
-    />
-  )
-}
+  static propTypes = {
+    error: PropTypes.string,
+    classes: PropTypes.object,
+    material: PropTypes.bool,
+    startAdornment: PropTypes.element,
+  }
 
-TextField.defaultProps = {
-  error: null,
-}
+  render () {
+    const { error, classes, material, startAdornment, ...textFieldProps } = this.props
 
-TextField.propTypes = {
-  error: PropTypes.string,
-  classes: PropTypes.object,
+    return (
+      <MaterialTextField
+        error={Boolean(error)}
+        helperText={error}
+        InputLabelProps={{
+          shrink: material ? undefined : true,
+          className: material ? '' : classes.inputLabel,
+          FormLabelClasses: {
+            root: material ? classes.materialLabel : classes.formLabel,
+            focused: material ? classes.materialFocused : classes.formLabelFocused,
+            error: classes.materialError,
+          },
+        }}
+        InputProps={{
+          startAdornment: startAdornment || undefined,
+          disableUnderline: !material,
+          classes: {
+            root: material ? '' : classes.inputRoot,
+            input: material ? '' : classes.input,
+            underline: material ? classes.materialUnderline : '',
+          },
+        }}
+        {...textFieldProps}
+      />
+    )
+  }
 }
 
 export default withStyles(styles)(TextField)