Merge pull request #967 from pixelated/backup-email-page

Add header and footer
author: Tayane Fernandes <tayane.rmf@gmail.com> 2017-02-10 10:55:02 -0200
committer: GitHub <noreply@github.com> 2017-02-10 10:55:02 -0200
commit: 2753ec89b925f5038a85d6bc1fad7b5c887dbf1e (patch)
tree: 6a1526c1e2ec94bb8904635988236cb01b4c9f4b /web-ui/src
parent: 0d4cf4ad3a5da62f65730d6c3e3665fc12d72590 (diff)
parent: 1783265383a16bf702f2206ded569d3ee1af3cbc (diff)
9 files changed, 304 insertions, 43 deletions
diff --git a/web-ui/src/account_recovery/account_recovery.html b/web-ui/src/account_recovery/account_recovery.html
deleted file mode 100644
index bd451ebc..00000000
--- a/web-ui/src/account_recovery/account_recovery.html
+++ /dev/null
@@ -1,12 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8"/>
-    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
-    <title>Pixelated Account Recovery</title>
-  </head>
-  <body>
-    <div id="root"/>
-    <script type="text/javascript" src="/assets/account_recovery.js"></script>
-  </body>
-</html>
diff --git a/web-ui/src/backup_account/backup_account.html b/web-ui/src/backup_account/backup_account.html
new file mode 100644
index 00000000..ec6213be
--- /dev/null
+++ b/web-ui/src/backup_account/backup_account.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <link rel="icon" type="image/png" href="assets/images/Favicon.png" />
+    <meta charset="utf-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
+    <title>Pixelated Backup Account</title>
+  </head>
+  <body>
+    <div id="root"/>
+    <script type="text/javascript" src="/assets/backup_account.js"></script>
+  </body>
+</html>
diff --git a/web-ui/src/account_recovery/account_recovery.js b/web-ui/src/backup_account/backup_account.js
index d4e0f4e8..d4e0f4e8 100644
--- a/web-ui/src/account_recovery/account_recovery.js
+++ b/web-ui/src/backup_account/backup_account.js
diff --git a/web-ui/src/backup_account/page.js b/web-ui/src/backup_account/page.js
new file mode 100644
index 00000000..b5f343a9
--- /dev/null
+++ b/web-ui/src/backup_account/page.js
@@ -0,0 +1,63 @@
+/*
+ * 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 DocumentTitle from 'react-document-title';
+import SubmitButton from 'src/common/submit_button/submit_button';
+import InputField from 'src/common/input_field/input_field';
+import Footer from 'src/common/footer/footer';
+import Header from 'src/common/header/header';
+
+import './page.scss';
+
+export const Page = ({ t }) => (
+  <DocumentTitle title={t('backup-account.page-title')}>
+    <div className='page'>
+      <Header />
+      <section>
+        <div className='container'>
+          <img
+            className='backup-account-image'
+            src='assets/images/forgot-my-password.svg'
+            alt={t('backup-account.image-description')}
+          />
+          <form>
+            <h1>{t('backup-account.title')}</h1>
+            <p>{t('backup-account.paragraph1')}</p>
+            <p>{t('backup-account.paragraph2')}</p>
+            <InputField name='email' label={t('backup-account.input-label')} />
+            <SubmitButton buttonText={t('backup-account.button')} />
+            <div>
+              <a href='/' className='link'>
+                <i className='fa fa-angle-left' aria-hidden='true' />
+                <span>{t('back-to-inbox')}</span>
+              </a>
+            </div>
+          </form>
+        </div>
+      </section>
+      <Footer />
+    </div>
+  </DocumentTitle>
+);
+
+Page.propTypes = {
+  t: React.PropTypes.func.isRequired
+};
+
+export default translate('', { wait: true })(Page);
diff --git a/web-ui/src/account_recovery/page.scss b/web-ui/src/backup_account/page.scss
index 619d1105..9d94c156 100644
--- a/web-ui/src/account_recovery/page.scss
+++ b/web-ui/src/backup_account/page.scss
@@ -19,11 +19,19 @@
 @import "~scss/base/colors";
 @import "~scss/base/fonts";
 
-html {
+html, body, #root {
+  height: 100%;
+}
+
+body, #root {
   min-height: 100%;
 }
 
-body {
+a {
+  text-decoration: none;
+}
+
+.page {
   font-family: "Open Sans", "Microsoft YaHei", "Hiragino Sans GB", "Hiragino Sans GB W3", "微软雅黑", "Helvetica Neue", Arial, sans-serif;
   background: $dark_blue; /* For browsers that do not support gradients */
   background: -webkit-linear-gradient(left top, $dark_blue, $middle_blue); /* For Safari 5.1 to 6.0 */
@@ -32,6 +40,16 @@ body {
   background: linear-gradient(to bottom right, $dark_blue, $middle_blue); /* Standard syntax */
   color: $dark_grey_text;
   min-height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+section {
+  flex: 1 0 auto;
+}
+
+form {
+  width: 100%;
 }
 
 h1 {
@@ -40,14 +58,11 @@ h1 {
 }
 
 p {
-  -webkit-margin-before: 0.5em;
-  -webkit-margin-after: 0.5em;
-  margin-before: 0.5em;
-  margin-after: 0.5em;
+  margin-top: 0.5em;
+  margin-bottom: 0.5em;
 }
 
-a {
-  text-decoration: none;
+.link {
   color: $dark_blue;
   font-style: italic;
 
@@ -68,10 +83,12 @@ a {
   display: flex;
   align-items: flex-start;
   flex-direction: column;
+  box-shadow: 0 2px 3px 0 $shadow;
 }
 
-img {
+.backup-account-image {
   width: 50%;
+  height: 100%;
   align-self: center;
 }
 
@@ -94,7 +111,7 @@ img {
 @media only screen and (min-width : 960px) {
   .container{
     width: 60%;
-    padding: 3%;
+    padding: 3em;
     align-items: flex-start;
     flex-direction: row;
     max-width: 700px;
@@ -109,7 +126,7 @@ img {
     }
   }
 
-  img {
+  .backup-account-image {
     width: 300px;
   }
 }
diff --git a/web-ui/src/common/footer/footer.js b/web-ui/src/common/footer/footer.js
new file mode 100644
index 00000000..254a19f7
--- /dev/null
+++ b/web-ui/src/common/footer/footer.js
@@ -0,0 +1,40 @@
+/*
+ * 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 './footer.scss';
+
+export const Footer = ({ t }) => (
+  <footer className='footer-wrapper'>
+    <div className='footer-content'>
+      <img className='footer-image' src='/assets/images/lab.svg' alt='' />
+      <div>
+        {t('footer-text')}
+        <a className='footer-link' href='mailto:team@pixelated-project.org'>
+          {' team@pixelated-project.org'}
+        </a>
+      </div>
+    </div>
+  </footer>
+);
+
+Footer.propTypes = {
+  t: React.PropTypes.func.isRequired
+};
+
+export default translate('', { wait: true })(Footer);
diff --git a/web-ui/src/common/footer/footer.scss b/web-ui/src/common/footer/footer.scss
new file mode 100644
index 00000000..c1d6a285
--- /dev/null
+++ b/web-ui/src/common/footer/footer.scss
@@ -0,0 +1,53 @@
+/*
+ * 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";
+
+.footer-wrapper {
+  display: flex;
+  justify-content: center;
+  font-size: 0.8em;
+  color: $dark_slate_gray;
+}
+
+.footer-content {
+  display: inline;
+  margin: 2% 3%;
+  margin-bottom: 1em;
+  display: flex;
+  align-items: center;
+}
+
+.footer-image {
+  margin: 0 0.7em;
+}
+
+.footer-link {
+  color: $white;
+  font-style: normal;
+  font-weight: 500;
+}
+
+@media only screen and (min-width : 500px) {
+  .footer-wrapper {
+    font-size: 0.6em;
+  }
+
+  .footer-content {
+    margin: 0;
+    margin-bottom: 1em;
+  }
+}
diff --git a/web-ui/src/account_recovery/page.js b/web-ui/src/common/header/header.js
index ac01529d..9e5f6bc7 100644
--- a/web-ui/src/account_recovery/page.js
+++ b/web-ui/src/common/header/header.js
@@ -17,32 +17,30 @@
 
 import React from 'react';
 import { translate } from 'react-i18next';
-import SubmitButton from 'src/common/submit_button/submit_button';
-import InputField from 'src/common/input_field/input_field';
+import './header.scss';
 
-import './page.scss';
-
-export const Page = ({ t }) => (
-  <div className='container'>
-    <img src='assets/images/forgot-my-password.svg' alt={t('backup-account.image-description')} />
-    <form>
-      <h1>{t('backup-account.title')}</h1>
-      <p>{t('backup-account.paragraph1')}</p>
-      <p>{t('backup-account.paragraph2')}</p>
-      <InputField name='email' label={t('backup-account.input-label')} />
-      <SubmitButton buttonText={t('backup-account.button')} />
-      <div>
+export const Header = ({ t }) => (
+  <header className='header-wrapper'>
+    <div className='header-content'>
+      <a href='/'>
+        <img
+          className='header-logo'
+          src='/startup-assets/pixelated-logo-orange.svg'
+          alt='Pixelated'
+        />
+      </a>
+      <div className='header-icons'>
         <a href='/'>
-          <i className='fa fa-angle-left' aria-hidden='true' />
-          <span>{t('back-to-inbox')}</span>
+          <span>{t('logout')}</span>
+          <i className='fa fa-sign-out' aria-hidden='true' />
         </a>
       </div>
-    </form>
-  </div>
+    </div>
+  </header>
 );
 
-Page.propTypes = {
+Header.propTypes = {
   t: React.PropTypes.func.isRequired
 };
 
-export default translate('', { wait: true })(Page);
+export default translate('', { wait: true })(Header);
diff --git a/web-ui/src/common/header/header.scss b/web-ui/src/common/header/header.scss
new file mode 100644
index 00000000..d56629bf
--- /dev/null
+++ b/web-ui/src/common/header/header.scss
@@ -0,0 +1,88 @@
+/*
+ * 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";
+
+.header-wrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  background: $white;
+  box-shadow: 0 2px 3px 0 $shadow;
+  padding: 7px 0;
+}
+
+.header-content {
+  display: flex;
+  align-items: center;
+}
+
+.header-logo {
+  width: 120px;
+}
+
+.header-icons {
+  display: flex;
+  align-items: center;
+
+  position: absolute;
+  right: 6%;
+  top: 13px;
+
+  span {
+    display: none;
+  }
+
+  .fa {
+    font-size: 1.3em;
+    margin-left: 0.4em;
+    color: $medium_light_grey;
+  }
+}
+
+
+@media only screen and (min-width : 960px) {
+  .header-content {
+    flex-basis: 64%;
+    max-width: 820px;
+    justify-content: space-between;
+  }
+
+  .header-icons {
+    position: relative;
+    right: 0;
+    top: 0;
+
+    a {
+      display: flex;
+      align-items: center;
+    }
+
+    span {
+      display: inline;
+      color: $medium_light_grey;
+      font-style: normal;
+      font-size: 0.7em;
+      padding-bottom: 0.1em;
+    }
+
+    .fa {
+      font-size: 1em;
+      margin-right: 0;
+    }
+  }
+}
author	Tayane Fernandes <tayane.rmf@gmail.com>	2017-02-10 10:55:02 -0200
committer	GitHub <noreply@github.com>	2017-02-10 10:55:02 -0200
commit	2753ec89b925f5038a85d6bc1fad7b5c887dbf1e (patch)
tree	6a1526c1e2ec94bb8904635988236cb01b4c9f4b /web-ui/src
parent	0d4cf4ad3a5da62f65730d6c3e3665fc12d72590 (diff)
parent	1783265383a16bf702f2206ded569d3ee1af3cbc (diff)