[#907] Add pixelated welcome message to login

with @tuliocasagrande and @thaissiqueira

7 files changed, 168 insertions, 16 deletions

diff --git a/web-ui/src/login/about/pixelated-welcome.scss b/web-ui/src/login/about/pixelated-welcome.scss
new file mode 100644
index 00000000..1e63f7c8
--- /dev/null
+++ b/web-ui/src/login/about/pixelated-welcome.scss
@@ -0,0 +1,50 @@
+/*
+ * 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 "~scss/base/colors";
+
+.pixelated-welcome {
+  display: none;
+}
+
+@media only screen and (min-width : 960px) {
+  .pixelated-welcome {
+    font-size: 0.9em;
+    color: $medium_grey;
+    display: flex;
+    font-weight: 300;
+    flex-direction: column;
+    align-self: flex-end;
+    float: right;
+    width: 34%;
+    margin-right: 8%;
+    margin-top: -7.8em;
+    padding: 0;
+
+    h3 {
+      font-weight: normal;
+      font-size: 1.2em;
+      margin-top: 0;
+    }
+  }
+
+  .welcome-logo {
+    order: 1;
+    width: 90%;
+    height: 15em;
+  }
+}
diff --git a/web-ui/src/login/about/pixelated_welcome.js b/web-ui/src/login/about/pixelated_welcome.js
new file mode 100644
index 00000000..82a7d7d0
--- /dev/null
+++ b/web-ui/src/login/about/pixelated_welcome.js
@@ -0,0 +1,36 @@
+/*
+ * 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 React from 'react';
+import { translate } from 'react-i18next';
+
+import './pixelated-welcome.scss';
+
+export const PixelatedWelcome = ({ t }) => (
+  <div className='pixelated-welcome'>
+    <img className='welcome-logo' src='/public/images/welcome.svg' alt={t('login.welcome-image-alt')} />
+    <div>
+      <h3>{t('login.welcome-message')}</h3>
+    </div>
+  </div>
+);
+
+PixelatedWelcome.propTypes = {
+  t: React.PropTypes.func.isRequired
+};
+
+export default translate('', { wait: true })(PixelatedWelcome);
diff --git a/web-ui/src/login/app.js b/web-ui/src/login/app.js
index 54f5fd66..7502c442 100644
--- a/web-ui/src/login/app.js
+++ b/web-ui/src/login/app.js
@@ -21,20 +21,26 @@ import InputField from 'src/common/input_field/input_field';
 import SubmitButton from 'src/common/submit_button/submit_button';
 import AuthError from 'src/login/error/auth_error';
 import GenericError from 'src/login/error/generic_error';
+import PixelatedWelcome from 'src/login/about/pixelated_welcome';
 
 import './app.scss';
 
-const errorMessage = (t, authError, error) => {
+const errorMessage = (t, authError) => {
   if (authError) return <AuthError />;
-  else if (error) return <GenericError />;
   return <div />;
 };
 
+const rightPanel = (t, error) => {
+  if (error) return <GenericError />;
+  return <PixelatedWelcome />;
+};
+
 export const App = ({ t, authError, error }) => (
   <div className='login'>
     <img className='logo' src='/public/images/logo-orange.svg' alt='Pixelated logo' />
-    {errorMessage(t, authError, error)}
+    {rightPanel(t, error)}
     <form className='standard' id='login_form' action='/login' method='post'>
+      {errorMessage(t, authError)}
       <InputField name='username' label={t('login.email')} />
       <InputField type='password' name='password' label={t('login.password')} />
       <SubmitButton buttonText={t('login.submit')} />
diff --git a/web-ui/src/login/app.scss b/web-ui/src/login/app.scss
index 61b618d8..6721a8ba 100644
--- a/web-ui/src/login/app.scss
+++ b/web-ui/src/login/app.scss
@@ -17,11 +17,6 @@
 
 @import "~scss/base/colors";
 
-.error {
-  color: $error;
-  margin: 10px 0 0 0;
-}
-
 .login {
   display: block;
   width: 90%;
@@ -38,6 +33,9 @@
 
 #login_form {
   width: 70%;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
 
   .input-field-group {
     width: 100%;
@@ -64,7 +62,38 @@
 }
 
 @media only screen and (min-width : 960px) {
+  .content {
+    font-size: 0.9em;
+  }
+
   .login {
-    width: 40%;
+    display: flex;
+    align-items: flex-start;
+    width: 70%;
+    max-width: 700px;
+    padding: 2.5em 0;
+    height: 22em;
+
+    &:after {
+      content: '';
+      height: 22em;
+      position: absolute;
+      box-shadow: 0px 0px 0px 0.3px $medium_light_grey;
+      left: 50%;
+    }
+  }
+
+  .logo {
+    height: 6em;
+    margin-top: 1.5em;
+  }
+
+  .logo, #login_form {
+    width: 34%;
+    margin-left: 8%;
+  }
+
+  #login_form {
+    margin-top: -11em;
   }
 }
diff --git a/web-ui/src/login/error/auth-error.scss b/web-ui/src/login/error/auth-error.scss
index 31210ae7..9d57eb87 100644
--- a/web-ui/src/login/error/auth-error.scss
+++ b/web-ui/src/login/error/auth-error.scss
@@ -15,7 +15,15 @@
  * along with Pixelated. If not, see <http://www.gnu.org/licenses/>.
  */
 
+@import "~scss/base/colors";
+
 .auth-error {
-  color: #D72A25;
-  margin: 10px 0 0 0;
+  color: $error;
+  margin: 0;
+}
+
+@media only screen and (min-width : 960px) {
+  .auth-error {
+    margin: -1em 0 0 0;
+  }
 }
diff --git a/web-ui/src/login/error/generic-error.scss b/web-ui/src/login/error/generic-error.scss
index a44de793..b08651b4 100644
--- a/web-ui/src/login/error/generic-error.scss
+++ b/web-ui/src/login/error/generic-error.scss
@@ -36,3 +36,19 @@
   margin-top: 1.7em;
   align-self: flex-start;
 }
+
+@media only screen and (min-width : 960px) {
+  .generic-error {
+    flex-direction: column;
+    align-self: flex-end;
+    width: 34%;
+    margin-right: 8%;
+    margin-top: -9em;
+    padding: 0;
+  }
+
+  .dead-mail {
+    order: 1;
+    width: 30%;
+  }
+}
diff --git a/web-ui/src/login/login.css b/web-ui/src/login/login.css
index d1206a39..5116875e 100644
--- a/web-ui/src/login/login.css
+++ b/web-ui/src/login/login.css
@@ -46,17 +46,24 @@ body {
 }
 
 @media only screen and (min-width : 500px) {
-  body {
-    font-size: 1.2em;
-  }
-
   .disclaimer {
     width: 60%;
   }
 }
 
 @media only screen and (min-width : 960px) {
+  body {
+    font-size: 1.2em;
+  }
+
   .disclaimer {
-    width: 40%;
+    width: 70%;
+    max-width: 700px;
+    padding: 0;
+    font-size: 1em;
+  }
+
+  .disclaimer-content {
+    font-size: 0.7em;
   }
 }