From 207179484c11784e10e75eae8ef468126e90df5e Mon Sep 17 00:00:00 2001
From: Danny Coates <dannycoates@gmail.com>
Date: Wed, 20 Jun 2018 15:23:15 -0700
Subject: [PATCH] added striped box

---
 app/base.css                            | 38 +++++++++++++++++++++++--
 app/routes/index.js                     |  8 +++++-
 app/templates/activeBackground/index.js | 12 +++++---
 app/templates/header/index.js           | 11 -------
 4 files changed, 50 insertions(+), 19 deletions(-)

diff --git a/app/base.css b/app/base.css
index a66388b7..2360a33a 100644
--- a/app/base.css
+++ b/app/base.css
@@ -40,12 +40,44 @@ a {
 }
 
 .main {
+  display: flex;
+  flex-direction: row;
   flex: auto;
-  max-width: 650px;
-  margin: 0 auto;
   padding: 0 20px;
   box-sizing: border-box;
-  width: 96%;
+}
+
+.stripedBox {
+  width: 480px;
+  background-color: white;
+  border-radius: 6px;
+  box-shadow: 0 0 0 3px rgba(155, 155, 155, 0.4);
+  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;
+  margin: 0 10px;
+  padding: 1px 10px 0 10px; /* top wtf? */
+}
+
+.spacer {
+  flex: auto;
+}
+
+.uploads {
+  flex: auto;
 }
 
 .noscript {
diff --git a/app/routes/index.js b/app/routes/index.js
index 90db1e63..368c3f1e 100644
--- a/app/routes/index.js
+++ b/app/routes/index.js
@@ -34,7 +34,13 @@ function body(template) {
             <p>${state.translate('enableJavascript')}</p>
           </div>
         </noscript>
-        ${template(state, emit)}
+        <div class="stripedBox">
+          <div class="mainContent">
+            ${template(state, emit)}
+          </div>
+        </div>
+        <div class="spacer"></div>
+        <div class="uploads"></div>
       </main>
       ${footer(state)}
     </body>`;
diff --git a/app/templates/activeBackground/index.js b/app/templates/activeBackground/index.js
index ac718129..8312b69b 100644
--- a/app/templates/activeBackground/index.js
+++ b/app/templates/activeBackground/index.js
@@ -1,10 +1,14 @@
 const html = require('choo/html');
 const assets = require('../../../common/assets');
 
-module.exports = function() {
-  const backgrounds = assets.match(/background/);
-  const src = backgrounds[Math.floor(Math.random() * backgrounds.length)];
+module.exports = function(state) {
+  if (!state.backgroundUrl) {
+    const backgrounds = assets.match(/background/);
+    state.backgroundUrl =
+      backgrounds[Math.floor(Math.random() * backgrounds.length)];
+  }
+
   return html`<div class="background">
-    <img src="${src}">
+    <img src="${state.backgroundUrl}">
   </div>`;
 };
diff --git a/app/templates/header/index.js b/app/templates/header/index.js
index f5fd56f2..a2f749fb 100644
--- a/app/templates/header/index.js
+++ b/app/templates/header/index.js
@@ -1,5 +1,4 @@
 const html = require('choo/html');
-const assets = require('../../../common/assets');
 /*
   The current weback config uses package.json to generate
   version.json for /__version__ meaning `require` returns the
@@ -18,16 +17,6 @@ module.exports = function(state) {
   const header = html`
   <header class="header">
     <div class="logo">
-      <a class="logo__link" href="/">
-        <img
-          src="${assets.get('send_logo.svg')}"
-          alt="Send"/>
-        <h1 class="logo__title">Send</h1>
-      </a>
-      <div class="logo__subtitle">
-        <a class="logo__subtitle-link" href="https://testpilot.firefox.com">Firefox Test Pilot</a>
-        <div>${state.translate('siteSubtitle')}</div>
-      </div>
     </div>
     <a href="${feedbackUrl}"
       rel="noreferrer noopener"