From 38c73f2e67173d5358dd4bb7e17b1e5b9c283f22 Mon Sep 17 00:00:00 2001 From: Anike Arni Date: Wed, 22 Feb 2017 10:52:52 -0300 Subject: [#907] Add pixelated welcome message to login with @tuliocasagrande and @thaissiqueira --- web-ui/src/login/about/pixelated-welcome.scss | 50 +++++++++++++++++++++++++++ web-ui/src/login/about/pixelated_welcome.js | 36 +++++++++++++++++++ web-ui/src/login/app.js | 12 +++++-- web-ui/src/login/app.scss | 41 ++++++++++++++++++---- web-ui/src/login/error/auth-error.scss | 12 +++++-- web-ui/src/login/error/generic-error.scss | 16 +++++++++ web-ui/src/login/login.css | 17 ++++++--- 7 files changed, 168 insertions(+), 16 deletions(-) create mode 100644 web-ui/src/login/about/pixelated-welcome.scss create mode 100644 web-ui/src/login/about/pixelated_welcome.js (limited to 'web-ui/src/login') 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 . + */ + +@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 . + */ + +import React from 'react'; +import { translate } from 'react-i18next'; + +import './pixelated-welcome.scss'; + +export const PixelatedWelcome = ({ t }) => ( +
+ {t('login.welcome-image-alt')} +
+

{t('login.welcome-message')}

+
+
+); + +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 ; - else if (error) return ; return
; }; +const rightPanel = (t, error) => { + if (error) return ; + return ; +}; + export const App = ({ t, authError, error }) => (
Pixelated logo - {errorMessage(t, authError, error)} + {rightPanel(t, error)}
+ {errorMessage(t, authError)} 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 . */ +@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; } } -- cgit v1.2.3