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/app.js                          | 13 +++++++--
 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 +--
 web-ui/src/common/materialPixTheme.js             | 31 +++++++++++++++++++++
 5 files changed, 53 insertions(+), 41 deletions(-)
 create mode 100644 web-ui/src/common/materialPixTheme.js

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

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