wip

app/templates/archiveTile/archiveTile.css

@@ -0,0 +1,10 @@
+.archiveTile {
+  border: 1px solid #d7d7db;
+  border-radius: 4px;
+  width: 100%;
+  height: 100%;
+}
+
+.archiveTile:hover {
+  border: 1px solid lightblue;
+}

app/templates/archiveTile/index.js

@@ -0,0 +1,8 @@
+const html = require('choo/html');
+
+module.exports = function(archive) {
+  return html`
+  <li id="${archive.id}" class="archiveTile">
+    <a href="/share/${archive.id}">${archive.name}</a>
+  </li>`;
+};

app/templates/controlArea/controlArea.css

@@ -0,0 +1,22 @@
+.controlArea {
+  border-right: 1px solid #d7d7db;
+}
+
+.controlArea > ul {
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.controlArea > ul > li {
+  margin: 12px;
+}
+
+@media (max-device-width: 720px), (max-width: 720px) {
+  .controlArea > ul {
+    flex-direction: row;
+  }
+}

app/templates/controlArea/index.js

@@ -0,0 +1,28 @@
+const html = require('choo/html');
+const assets = require('../../../common/assets');
+const userAccount = require('../userAccount');
+
+module.exports = function(state, emit) {
+  const account = state.capabilities.account
+    ? html`<li>
+  ${userAccount(state, emit)}
+</li>`
+    : null;
+  return html`
+    <nav class="controlArea">
+      <ul>
+        ${account}
+        <li>
+          <a href="/">
+            <img src="${assets.get('addfile.svg')}"/>
+          </a>
+        </li>
+        <li>
+          <a href="/uploads">
+            <img src="${assets.get('blue_file.svg')}"/>
+          </a>
+        </li>
+      </ul>
+    </nav>
+  `;
+};

app/templates/footer/footer.css

@@ -6,6 +6,7 @@
   display: flex;
   flex-direction: row;
   justify-content: flex-end;
+  align-items: center;
 }
 
 .legalSection {
@@ -34,6 +35,24 @@
   display: none;
 }
 
+.feedback {
+  background-color: #000;
+  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: 12px;
+}
+
 @media (max-device-width: 720px), (max-width: 720px) {
   .footer {
     justify-content: flex-start;

app/templates/footer/index.js

@@ -1,7 +1,11 @@
 const html = require('choo/html');
 const assets = require('../../../common/assets');
+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}`;
   const footer = html`<footer class="footer">
     <div class="legalSection">
       <a class="legalSection__link"
@@ -39,7 +43,12 @@ module.exports = function(state) {
         Twitter
       </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">

app/templates/header/header.css

@@ -3,7 +3,7 @@
   display: flex;
   flex-direction: row;
   align-items: center;
-  justify-content: space-between;
+  justify-content: center;
   width: 100%;
   height: 64px;
   background-color: white;
@@ -13,28 +13,3 @@
 .header h1 {
   margin: 0;
 }
-
-.header__controls {
-  justify-self: end;
-  display: grid;
-  grid-auto-flow: column;
-  grid-gap: 8px;
-  align-items: center;
-}
-
-.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;
-}

app/templates/header/index.js

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

app/templates/signupPromo/signupPromo.css

@@ -10,9 +10,9 @@
   justify-content: center;
   transition: background 100ms;
   margin: 24px;
-  position: absolute;
-  top: 0;
-  right: 0;
+  grid-area: content;
+  justify-self: right;
+  z-index: 1;
 }
 
 .signupPromo:hover {
@@ -30,3 +30,13 @@
   padding: 6px;
   color: black;
 }
+
+@media (max-device-width: 720px), (max-width: 720px) {
+  .signupPromo {
+    grid-area: promo;
+    margin: 0;
+    justify-self: auto;
+    height: 100%;
+    width: 100%;
+  }
+}

app/templates/userAccount/userAccount.css

@@ -1,5 +1,6 @@
 .account {
-  padding: 0;
+  /* padding: 12px; */
+  position: relative;
 }
 
 .account__avatar {
@@ -18,6 +19,7 @@
   box-shadow: 0 5px 12px 0 rgba(0, 0, 0, 0.2);
   padding: 11px 0;
   visibility: hidden;
+  white-space: nowrap;
   outline: 0;
 }