hook multifile to ui

app/pages/unsupported/index.js

@@ -1,11 +1,13 @@
 const html = require('choo/html');
 const assets = require('../../../common/assets');
+const title = require('../../templates/title');
 
 module.exports = function(state) {
   let strings = {};
   let why = '';
   let url = '';
   let buttonAction = '';
+
   if (state.params.reason !== 'outdated') {
     strings = unsupportedStrings(state);
     why = html`
@@ -28,20 +30,26 @@ module.exports = function(state) {
         ${strings.button}
       </div>`;
   }
+
   return html`
-    <div class="unsupportedPage">
-      <div class="title">${strings.title}</div>
-      <div class="description">
+    <div class="page unsupportedPage">
+      ${title(state)}
+      <div class="error unsupportedPage__error">${strings.header}</div>
+      <div class="description flexible">
         ${strings.description}
+        ${why}
       </div>
-      ${why}
-      <a href="${url}" class="firefoxDownload">
-        <img
-          src="${assets.get('firefox_logo-only.svg')}"
-          class="firefoxDownload__logo"
-          alt="Firefox"/>
-        ${buttonAction}
-      </a>
+
+      <div class="flexible firefoxDownload">
+        <a href="${url}" class="firefoxDownload__button">
+          <img
+            src="${assets.get('firefox_logo-only.svg')}"
+            class="firefoxDownload__logo"
+            alt="Firefox"/>
+          ${buttonAction}
+        </a>
+      </div>
+
       <div class="unsupportedPage__info">
         ${strings.explainer}
       </div>
@@ -50,7 +58,7 @@ module.exports = function(state) {
 
 function outdatedStrings(state) {
   return {
-    title: state.translate('notSupportedHeader'),
+    header: state.translate('notSupportedHeader'),
     description: state.translate('notSupportedOutdatedDetail'),
     button: state.translate('updateFirefox'),
     explainer: state.translate('uploadPageExplainer')
@@ -59,7 +67,7 @@ function outdatedStrings(state) {
 
 function unsupportedStrings(state) {
   return {
-    title: state.translate('notSupportedHeader'),
+    header: state.translate('notSupportedHeader'),
     description: state.translate('notSupportedDetail'),
     button: state.translate('downloadFirefoxButtonSub'),
     explainer: state.translate('uploadPageExplainer')

app/pages/unsupported/unsupported.css

@@ -1,26 +1,30 @@
 .unsupportedPage {
-  display: flex;
   justify-content: center;
   align-items: center;
-  flex-direction: column;
+}
+
+.unsupportedPage__error {
+  margin: 10px 0 20px;
 }
 
 .unsupportedPage__info {
   font-size: 13px;
-  line-height: 23px;
-  text-align: center;
   color: var(--lightTextColor);
-  margin: 0 auto 23px;
+  margin: 0 auto 10px;
 }
 
 .firefoxDownload {
-  margin-bottom: 181px;
-  height: 80px;
-  background: #98e02b;
+  flex: 2;
+}
+
+.firefoxDownload__button {
+  margin: 0 auto 20px;
+  height: 70px;
+  width: 250px;
+  background: #12bc00;
   border-radius: 3px;
   cursor: pointer;
   border: 0;
-  box-shadow: 0 5px 3px rgb(234, 234, 234);
   font-family: 'Fira Sans', 'segoe ui', sans-serif;
   font-weight: 500;
   color: var(--primaryControlFGColor);
@@ -29,21 +33,22 @@
   justify-content: center;
   align-items: center;
   line-height: 1;
-  padding: 0 25px;
+  padding: 8px;
 }
 
 .firefoxDownload__logo {
-  width: 70px;
+  width: 55px;
 }
 
 .firefoxDownload__action {
   text-align: left;
-  margin-left: 20.4px;
+  text-transform: uppercase;
+  margin-left: 20px;
 }
 
 .firefoxDownload__text {
+  text-transform: none;
   font-family: 'Fira Sans', 'segoe ui', sans-serif;
   font-weight: 300;
-  font-size: 18px;
-  letter-spacing: -0.69px;
+  font-size: 17px;
 }