[#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.

8 files changed, 58 insertions, 47 deletions

diff --git a/web-ui/package.json b/web-ui/package.json
index 07449cf3..613613c4 100644
--- a/web-ui/package.json
+++ b/web-ui/package.json
@@ -53,6 +53,7 @@
     "karma-junit-reporter": "0.2.2",
     "karma-phantomjs-launcher": "1.0.1",
     "karma-requirejs": "1.0.0",
+    "material-ui": "^0.17.0",
     "minify": "^2.0.13",
     "mocha": "^3.2.0",
     "mocha-webpack": "^0.7.0",
@@ -67,6 +68,7 @@
     "react-document-title": "^2.0.2",
     "react-dom": "^15.4.2",
     "react-i18next": "^2.1.0",
+    "react-tap-event-plugin": "^2.0.1",
     "requirejs": "2.2.0",
     "sass-loader": "^4.1.1",
     "style-loader": "^0.13.1",
diff --git a/web-ui/src/common/app.js b/web-ui/src/common/app.js
index 03a69fc9..b8302000 100644
--- a/web-ui/src/common/app.js
+++ b/web-ui/src/common/app.js
@@ -19,11 +19,18 @@ import React from 'react';
 import { I18nextProvider } from 'react-i18next';
 
 import internationalization from 'src/common/i18n';
+import injectTapEventPlugin from 'react-tap-event-plugin';
+import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
+import materialPixTheme from 'src/common/materialPixTheme';
+
+injectTapEventPlugin();
 
 const App = ({ i18n = internationalization, child }) => (
-  <I18nextProvider i18n={i18n}>
-    {child}
-  </I18nextProvider>
+  <MuiThemeProvider muiTheme={materialPixTheme}>
+    <I18nextProvider i18n={i18n}>
+      {child}
+    </I18nextProvider>
+  </MuiThemeProvider>
 );
 
 App.propTypes = {
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');
   });
 });
diff --git a/web-ui/src/common/materialPixTheme.js b/web-ui/src/common/materialPixTheme.js
new file mode 100644
index 00000000..34be7870
--- /dev/null
+++ b/web-ui/src/common/materialPixTheme.js
@@ -0,0 +1,31 @@
+/*
+ * Copyright (c) 2017 ThoughtWorks, Inc.
+ *
+ * Pixelated is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * Pixelated is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with Pixelated. If not, see <http://www.gnu.org/licenses/>.
+ */
+import getMuiTheme from 'material-ui/styles/getMuiTheme';
+
+const mediumLightGrey = '#999999';
+const darkBlue = '#178ca6';
+
+const materialPixTheme = getMuiTheme({
+  fontFamily: 'Open Sans, sans-serif',
+  palette: {
+    disabledColor: mediumLightGrey,
+    primary1Color: darkBlue,
+    borderColor: darkBlue
+  }
+});
+
+export default materialPixTheme;
diff --git a/web-ui/src/login/page.js b/web-ui/src/login/page.js
index 621cf846..21acee3f 100644
--- a/web-ui/src/login/page.js
+++ b/web-ui/src/login/page.js
@@ -43,7 +43,7 @@ export const Page = ({ t, authError, error }) => (
       alt='Pixelated logo'
     />
     {rightPanel(t, error)}
-    <form className='standard' id='login_form' action='/login' method='post' noValidate >
+    <form className='standard' id='login_form' action='/login' method='post' noValidate>
       {errorMessage(t, authError)}
       <InputField name='username' label={t('login.email')} autoFocus />
       <InputField type='password' name='password' label={t('login.password')} />
diff --git a/web-ui/src/login/page.scss b/web-ui/src/login/page.scss
index 14e2d131..05c0abc2 100644
--- a/web-ui/src/login/page.scss
+++ b/web-ui/src/login/page.scss
@@ -37,10 +37,11 @@
 
   .input-field-group {
     width: 100%;
-    margin: 0 0 1.5em 0;
+    margin: 0;
   }
 
   .submit-button {
+    margin-top: 1.5em;
     width: 100%;
   }
 }
@@ -56,10 +57,6 @@
 }
 
 @media only screen and (min-width : 500px) {
-  #login_form {
-    margin-top: 1em;
-  }
-
   .login {
     width: 60%;
   }