From 99d03c1f4b2d4e10561fc4d0bef14ccd12ad0f9d Mon Sep 17 00:00:00 2001
From: Tayane Fernandes <tayane.rmf@gmail.com>
Date: Tue, 7 Mar 2017 14:22:49 -0300
Subject: [#923] Add material-ui framework

Added material-ui framework (http://www.material-ui.com/#/) to facilitate
the creation of UI components. I also adapted some colors to be compatible
with our style guide.
---
 web-ui/src/common/input_field/input_field.js      | 12 +++++---
 web-ui/src/common/input_field/input_field.scss    | 34 ++---------------------
 web-ui/src/common/input_field/input_field.spec.js |  4 +--
 3 files changed, 12 insertions(+), 38 deletions(-)

(limited to 'web-ui/src/common/input_field')

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');
   });
 });
-- 
cgit v1.2.3