update ui

app/base.css

@@ -4,7 +4,7 @@
   --primaryControlBGColor: #0a84ff;
   --primaryControlFGColor: #fff;
   --primaryControlHoverColor: #0473e2;
-  --inputTextColor: #737373;
+  --inputTextColor: #000;
   --errorColor: #d70022;
   --linkColor: #0094fb;
   --textColor: #0c0c0d;
@@ -12,21 +12,39 @@
   --lightTextColor: #737373;
   --successControlBGColor: #12bc00;
   --successControlFGColor: #fff;
+  --large-box-shadow: 0 4px 16px rgba(12, 12, 13, 0.1);
+  --edge-size: 96px;
+  --grid-basis: 12px;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: inherit;
 }
 
 html {
-  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'segoe ui',
+  font-family: Futura, -apple-system, BlinkMacSystemFont, 'SF Pro Text',
-    'helvetica neue', helvetica, ubuntu, roboto, noto, arial, sans-serif;
+    'segoe ui', 'helvetica neue', helvetica, ubuntu, roboto, noto, arial,
-  font-weight: 200;
+    sans-serif;
+  box-sizing: border-box;
 }
 
 body {
-  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'segoe ui',
+  display: grid;
-    'helvetica neue', helvetica, ubuntu, roboto, noto, arial, sans-serif;
+  grid-template-columns: minmax(500px, 1080px);
-  display: flex;
+  grid-template-rows: 54px 700px 54px;
-  flex-direction: column;
+  align-content: center;
-  margin: 0;
+  align-items: center;
+  justify-items: stretch;
+  justify-content: center;
+  font-family: Futura, -apple-system, BlinkMacSystemFont, 'SF Pro Text',
+    'segoe ui', 'helvetica neue', helvetica, ubuntu, roboto, noto, arial,
+    sans-serif;
   height: 100vh;
+  background: #f9f9fa;
+  margin: 0;
+  padding: var(--grid-basis);
 }
 
 input,
@@ -42,64 +60,50 @@ a {
 }
 
 .main {
-  display: flex;
+  background: var(--pageBGColor);
-  flex: auto;
+  box-shadow: var(--large-box-shadow);
-  padding: 0 25px;
+  display: grid;
-  box-sizing: border-box;
+  grid-template-columns: minmax(400px, 1fr) 1fr;
-  min-height: 500px;
+  width: 100%;
-  max-height: 800px;
   height: 100%;
 }
 
-.stripedBox {
-  flex: none;
-  position: relative;
-  width: 400px;
-  margin-top: 32px;
-  background-color: white;
-  border-radius: 6px;
-  border: 3px solid rgba(12, 12, 12, 0.2);
-  background-clip: padding-box;
-  background-image: repeating-linear-gradient(
-    45deg,
-    white,
-    white 5px,
-    #ea000e 5px,
-    #ea000e 25px,
-    white 25px,
-    white 30px,
-    #0083ff 30px,
-    #0083ff 50px
-  );
-}
-
-.mainContent {
-  height: 100%;
-  background-color: white;
-  box-sizing: border-box;
-  margin: 0 10px;
-  padding: 10px 10px 28px;
-  display: flex;
-  flex-direction: column;
-}
-
-.spacer {
-  flex: auto;
-}
-
-.uploads {
-  flex: 0 0 262px;
-  box-sizing: border-box;
-  padding-top: 180px;
-  display: flex;
-}
-
 .noscript {
   text-align: center;
   border: 3px solid var(--errorColor);
   border-radius: 6px;
 }
 
+.main__file-manager,
+.main__context {
+  padding: calc(var(--grid-basis) * 2);
+}
+
+.main__file-manager {
+  border-right: 2px solid black;
+}
+
+.main__context {
+  display: flex;
+  flex-direction: column;
+}
+
+.main__context-footer,
+.main__signup-promo {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.main__file-list {
+  flex: 1;
+}
+
+.footer__mozLogo {
+  width: 112px;
+  height: 32px;
+  margin-bottom: -5px;
+}
+
 .btn {
   display: flex;
   width: 100%;
@@ -108,17 +112,15 @@ a {
   align-items: center;
   justify-content: center;
   padding: 0 10px;
-  box-sizing: border-box;
   font-size: 17px;
   font-weight: 500;
   text-transform: uppercase;
   text-align: center;
   letter-spacing: 0.56px;
-  color: var(--primaryControlFGColor);
+  color: white;
-  background: var(--primaryControlBGColor);
+  background: black;
   cursor: pointer;
   border: 0;
-  border-radius: 5px;
 }
 
 .btn:hover {

app/pages/welcome/index.js

@@ -30,7 +30,7 @@ module.exports = function(state, emit) {
   }
 
   return html`
-  <div id="page-one" class="page ${fade}">
+  <div class="${fade}">
     ${title(state)}
 
     <label class="uploadArea"

app/pages/welcome/welcome.css

@@ -4,10 +4,9 @@
   flex-direction: column;
   justify-content: center;
   text-align: center;
-  border: 1px dashed rgba(12, 12, 13, 0.2);
+  border: 2px dashed rgba(12, 12, 13, 0.2);
   margin: 0 0 10px;
   height: 400px;
-  border-radius: 4px;
   overflow: scroll;
   transition: transform 150ms;
   flex: 1;

app/routes/index.js

@@ -8,6 +8,8 @@ const signupPromo = require('../templates/signupPromo');
 const fileList = require('../templates/fileList');
 const profile = require('../templates/userAccount');
 const modal = require('../templates/modal');
+const assets = require('../../common/assets');
+const header = require('../templates/header');
 
 nanotiming.disabled = true;
 
@@ -31,6 +33,7 @@ module.exports = function() {
       const b = html`<body>
       ${modalDialog(state, emit)}
       ${banner(state, emit)}
+      ${header(state)}
       <main class="main">
         <noscript>
           <div class="noscript">
@@ -43,20 +46,28 @@ module.exports = function() {
             <p>${state.translate('enableJavascript')}</p>
           </div>
         </noscript>
-        ${signupPromo(state)}
+        <div class="main__file-manager">
-        <div class="stripedBox">
-          <div class="mainContent">
-
           ${profile(state, emit)}
-
           ${template(state, emit)}
         </div>
+        <div class="main__context">
+          <div class="main__signup-promo">
+            ${signupPromo(state)}
           </div>
-
+          <div class="main__file-list">
-        <div class="spacer"></div>
-        <div class="uploads">
             ${fileList(state)}
           </div>
+          <div class="main__context-footer">
+            <a
+              href="https://www.mozilla.org"
+              class="socialSection__link">
+              <img
+                class="footer__mozLogo"
+                src="${assets.get('mozilla-logo.svg')}"
+                alt="mozilla"/>
+            </a>
+          </div>
+        </div>
       </main>
       ${footer(state)}
     </body>`;

app/templates/footer/footer.css

@@ -1,15 +1,14 @@
 .footer {
-  bottom: 0;
+  margin: 0 auto;
-  left: 0;
+  font-size: 12px;
-  font-size: 13px;
   font-weight: 600;
   display: flex;
   flex-direction: row;
-  padding: 50px 31px 41px;
-  width: 100%;
   box-sizing: border-box;
   justify-content: flex-end;
-  align-items: flex-end;
+  align-items: center;
+  padding-top: var(--grid-basis);
+  width: 100%;
 }
 
 .legalSection {
@@ -21,49 +20,17 @@
 .legalSection__link {
   color: var(--lightTextColor);
   white-space: nowrap;
-  margin-right: 2vw;
+  margin-left: calc(var(--grid-basis) * 2);
 }
 
 .legalSection__link:hover {
   color: var(--textColor);
 }
 
-.footer__mozLogo {
-  width: 112px;
-  height: 32px;
-  margin-bottom: -5px;
-}
-
 .socialSection__icon {
   width: 32px;
   height: 32px;
-  margin: 0 0 -5px 4px;
+  margin: 0 0 -5px calc(var(--grid-basis) * 2);
-}
-
-.feedback {
-  background-color: #000;
-  background-image: url('../assets/feedback.svg');
-  background-position: 2px 4px;
-  background-repeat: no-repeat;
-  background-size: 18px;
-  border-radius: 3px;
-  border: 1px solid #000;
-  color: var(--primaryControlFGColor);
-  cursor: pointer;
-  display: block;
-  font-size: 12px;
-  line-height: 12px;
-  padding: 5px 5px 5px 20px;
-  overflow: hidden;
-  min-width: 30px;
-  max-width: 300px;
-  text-indent: 2px;
-  transition: all 250ms ease-in-out;
-  white-space: nowrap;
-}
-
-.feedback:active {
-  background-color: var(--primaryControlHoverColor);
 }
 
 .dropDownArrow {
@@ -77,7 +44,6 @@
 @media (max-device-width: 750px), (max-width: 750px) {
   .footer {
     align-items: flex-end;
-    padding: 20px 25px;
     margin: 0;
     min-width: 455px;
   }

app/templates/footer/index.js

@@ -1,12 +1,7 @@
 const html = require('choo/html');
-const version = require('../../../package.json').version;
 const assets = require('../../../common/assets');
-const { browserName } = require('../../utils');
 
 module.exports = function(state) {
-  const browser = browserName();
-  const feedbackUrl = `https://qsurvey.mozilla.com/s3/txp-firefox-send?ver=${version}&browser=${browser}`;
-
   const footer = html`<footer class="footer">
     <div class="legalSection"
       onmouseover=${showDropDown}
@@ -52,13 +47,6 @@ module.exports = function(state) {
       </a>
     </div>
 
-    <a href="${feedbackUrl}"
-      rel="noreferrer noopener"
-      class="feedback"
-      alt="Feedback"
-      target="_blank">${state.translate('siteFeedback')}
-    </a>
-
     <a
       href="https://github.com/mozilla/send"
       class="socialSection__link footer_hiddenIcon">
@@ -75,15 +63,6 @@ module.exports = function(state) {
         src="${assets.get('twitter-icon.svg')}"
         alt="Twitter"/>
     </a>
-
-    <a
-      href="https://www.mozilla.org"
-      class="socialSection__link">
-      <img
-        class="footer__mozLogo"
-        src="${assets.get('mozilla-logo.svg')}"
-        alt="mozilla"/>
-    </a>
   </footer>`;
   // HACK
   // We only want to render this once because we

app/templates/fxPromo/fxPromo.css

@@ -10,6 +10,10 @@
   align-content: center;
   align-items: center;
   justify-content: center;
+  position: fixed;
+  top: 0;
+  right: 0;
+  left: 0;
 }
 
 .fxPromo > div {

app/templates/header/header.css

@@ -1,9 +1,31 @@
 .header {
-  align-items: flex-start;
+  align-items: flex-end;
-  box-sizing: border-box;
   display: flex;
+  flex-direction: row;
+  height: calc(var(--grid-basis) * 4);
   justify-content: space-between;
-  height: 32px;
-  padding: 10px;
   width: 100%;
 }
+
+.header h1 {
+  margin: 0;
+}
+
+.feedback {
+  background-color: #979797;
+  background-image: url('../assets/feedback.svg');
+  background-position: 2px 4px;
+  background-repeat: no-repeat;
+  background-size: 18px;
+  color: var(--primaryControlFGColor);
+  cursor: pointer;
+  display: block;
+  font-size: 12px;
+  line-height: 12px;
+  padding: 5px 5px 5px 20px;
+  text-indent: 2px;
+  transition: all 250ms ease-in-out;
+  white-space: nowrap;
+  margin-left: calc(var(--grid-basis) * 2);
+  margin-bottom: 8px;
+}

app/templates/header/index.js

@@ -1,8 +1,20 @@
 const html = require('choo/html');
+const version = require('../../../package.json').version;
+const { browserName } = require('../../utils');
+
+module.exports = function(state) {
+  const browser = browserName();
+  const feedbackUrl = `https://qsurvey.mozilla.com/s3/txp-firefox-send?ver=${version}&browser=${browser}`;
 
-module.exports = function() {
   const header = html`
   <header class="header">
+    <h1>Firefox Send</h1>
+    <a href="${feedbackUrl}"
+      rel="noreferrer noopener"
+      class="feedback"
+      alt="Feedback"
+      target="_blank">${state.translate('siteFeedback')}
+    </a>
   </header>`;
   // HACK
   // We only want to render this once because we

app/templates/signupPromo/index.js

@@ -8,9 +8,6 @@ module.exports = function(state) {
   <a href="/signin" class="signupPromo">
     <div class="signupPromo__title">${state.translate('signInPromoText')}</div>
     <div class="signupPromo__info">${state.translate('signInExplanation')}</div>
-    <div class="link signupPromo__link">${state.translate(
-      'signInLearnMore'
-    )}</div>
   </a>
   `;
 };

app/templates/signupPromo/signupPromo.css

@@ -1,85 +1,28 @@
 .signupPromo {
   display: flex;
   flex-direction: column;
-  position: absolute;
+  height: calc(var(--grid-basis) * 12.5);
-  right: 0;
+  width: calc(var(--grid-basis) * 12.5);
-  height: 140px;
+  border: 3px solid black;
-  width: 150px;
-  background: #ffe900;
   font-size: 13px;
   font-weight: 500;
   text-align: center;
   justify-content: center;
+  transition: background 100ms;
 }
 
-.signupPromo::before {
+.signupPromo:hover {
-  content: '';
+  background: #ff1ad9;
-  width: 0;
-  height: 0;
-  border-style: solid;
-  border-width: 0 35px 140px 0;
-  border-color: transparent #ffe900 transparent;
-  position: absolute;
-  right: 100%;
-}
-
-.signupPromo::after {
-  content: '';
-  width: 0;
-  height: 0;
-  border-style: solid;
-  border-width: 0 150px 35px 0;
-  border-color: transparent #ffe900 transparent;
-  position: absolute;
-  top: 100%;
-  left: 0%;
 }
 
 .signupPromo__title {
-  color: #0a84ff;
+  color: black;
   font-size: 22px;
-  font-style: italic;
+  font-weight: 900;
-  font-weight: 600;
   padding: 6px;
 }
 
 .signupPromo__info {
-  color: var(--lightTextColor);
   padding: 6px;
-}
+  color: black;
-
-.signupPromo__link {
-  z-index: 5;
-}
-
-.signupPromo__link:hover {
-  text-decoration: underline;
-}
-
-@media (max-device-width: 700px), (max-width: 700px) {
-  .signupPromo {
-    flex-direction: row;
-    align-items: center;
-    height: 40px;
-    width: 100%;
-  }
-
-  .signupPromo::before {
-    visibility: hidden;
-  }
-
-  .signupPromo::after {
-    border-width: 15px 50vw 0 50vw;
-    border-color: #ffe900 transparent transparent;
-  }
-}
-
-@media (max-device-width: 500px), (max-width: 500px) {
-  .signupPromo__link {
-    display: none;
-  }
-
-  .signupPromo {
-    overflow: hidden;
-  }
 }

app/templates/title/title.css

@@ -1,14 +1,10 @@
 .boxTitle {
-  font-size: 15px;
+  margin: -2px 0 9px;
-  text-align: center;
+  text-align: left;
-  font-weight: 500;
+  font-weight: bold;
-  margin: 9px 0 19px 0;
-  padding: 0 42px;
-  color: var(--lightTextColor);
 }
 
 .boxSubtitle {
-  font-size: 12px;
+  text-align: left;
-  font-weight: 300;
+  font-weight: normal;
-  font-style: italic;
 }

app/templates/userAccount/userAccount.css

@@ -1,8 +1,6 @@
 .account {
-  position: absolute;
-  right: 0;
-  margin: 0 21px;
   padding: 0;
+  margin-bottom: var(--grid-basis);
 }
 
 .account__avatar {

public/locales/en-US/send.ftl

@@ -152,8 +152,8 @@ addPasswordMessage = Protect with password
 addPasswordLabel = Password:
 copyUrlLabel = Copy and share this link:
 passwordReminder = don't forget the password too
-signInPromoText = Sign In/Up!
+signInPromoText = Sign In/Up
-signInExplanation = It's free and gives you many more Send options
+signInExplanation = It's free and you can send bigger files.
 signInLearnMore = Learn more!
 downloadProgressButton = Downloading... { $progress }
 downloadMessage2 = Firefox Send lets you share files with a safe, private, and encrypted link that automatically expires to ensure your stuff does not remain online forever.