summaryrefslogtreecommitdiff
path: root/web-ui/src/common/input_field
diff options
context:
space:
mode:
Diffstat (limited to 'web-ui/src/common/input_field')
-rw-r--r--web-ui/src/common/input_field/input_field.js12
-rw-r--r--web-ui/src/common/input_field/input_field.scss34
-rw-r--r--web-ui/src/common/input_field/input_field.spec.js4
3 files changed, 12 insertions, 38 deletions
diff --git a/web-ui/src/common/input_field/input_field.js b/web-ui/src/common/input_field/input_field.js
index 332d5911..438241e1 100644
--- a/web-ui/src/common/input_field/input_field.js
+++ b/web-ui/src/common/input_field/input_field.js
@@ -16,16 +16,20 @@
*/
import React from 'react';
+import TextField from 'material-ui/TextField';
import './input_field.scss';
const InputField = ({ label, name, type = 'text', ...other }) => (
<div className='input-field-group'>
- <input
- type={type} name={name} className='input-field'
- required {...other}
+ <TextField
+ hintText={label}
+ floatingLabelText={label}
+ name={name}
+ type={type}
+ fullWidth
+ {...other}
/>
- <label className='input-field-label' htmlFor={name}>{label}</label>
</div>
);
diff --git a/web-ui/src/common/input_field/input_field.scss b/web-ui/src/common/input_field/input_field.scss
index dd8e8927..d550a281 100644
--- a/web-ui/src/common/input_field/input_field.scss
+++ b/web-ui/src/common/input_field/input_field.scss
@@ -23,37 +23,8 @@
width: 100%;
}
-.input-field-label {
- font-size: 0.9em;
- margin-bottom: 10px;
- display: inline-block;
- color:#999;
- position:absolute;
- pointer-events:none;
- left: 6px;
- top:10px;
- transition:0.2s ease all;
-}
-
-.input-field {
- display: block;
- border: none;
- border-bottom: solid 1px $dark_blue;
- width: 100%;
- height: auto;
- padding: 0.3em 0px;
-
- &:focus {
- outline:none;
- border-width: 2px;
- }
-}
-
-.input-field:focus ~ .input-field-label, .input-field:valid ~ .input-field-label {
- top:-12px;
- left: 0;
- font-size:0.7em;
- color: $dark_blue;
+input:-webkit-autofill {
+ -webkit-box-shadow: 0 0 0px 1000px white inset;
}
@media only screen and (min-width : 500px) {
@@ -67,7 +38,6 @@
.input-field-group {
width: 300px;
align-self: flex-start;
- margin-top: 3em;
font-size: 1em;
}
}
diff --git a/web-ui/src/common/input_field/input_field.spec.js b/web-ui/src/common/input_field/input_field.spec.js
index 0c044ce1..ae55653d 100644
--- a/web-ui/src/common/input_field/input_field.spec.js
+++ b/web-ui/src/common/input_field/input_field.spec.js
@@ -11,10 +11,10 @@ describe('InputField', () => {
});
it('renders an input of type text for email', () => {
- expect(inputField.find('input[type="text"]').props().name).toEqual('email');
+ expect(inputField.find('TextField').props().name).toEqual('email');
});
it('renders a label for the email', () => {
- expect(inputField.find('label').text()).toEqual('Email');
+ expect(inputField.find('TextField').props().floatingLabelText).toEqual('Email');
});
});