Merge pull request #995 from mozilla/ui-fix

fix #985-#988, #990-#993
2018-11-05 15:53:20 -08:00 · 2018-11-05 15:53:20 -08:00 · d60eb5e022
parent 77a5a377e3 1ef80febcb
commit d60eb5e022
18 changed files with 62 additions and 51 deletions
--- a/app/main.css
+++ b/app/main.css
@ -31,19 +31,23 @@ progress::-webkit-progress-value {
  @apply rounded-sm;
 }

+.word-break-all {
+  word-break: break-all;
+}
+
 .main {
  display: flex;
  max-width: 64rem;
  width: 100%;
+  height: 100%;
 }

 .main > section {
  @apply bg-white;
-  @apply shadow;
 }

 .header-logo {
-  background-image: url('../assets/send_logo.svg');
+  background-image: url('../assets/send_logo_white.svg');
  background-position: left;
  background-repeat: no-repeat;
  background-size: 1.8rem;
@ -145,11 +149,16 @@ progress::-webkit-progress-value {
    @apply flex-1;
    @apply self-center;
    @apply items-center;
-    @apply my-10;
+    @apply m-auto;
+    @apply py-8;

-    width: calc(100% - 3rem);
-    min-height: 30rem;
+    min-height: 33rem;
    max-height: 40rem;
+    width: calc(100% - 3rem);
+  }
+
+  .header-logo {
+    background-image: url('../assets/send_logo.svg');
  }

  .main > section {
--- a/app/routes.js
+++ b/app/routes.js
@ -16,7 +16,7 @@ function banner(state, emit) {

 function body(main) {
  return function(state, emit) {
-    const b = html`<body class="flex flex-col items-center font-sans bg-blue-lightest md:h-screen md:bg-grey-lightest justify-between">
+    const b = html`<body class="flex flex-col items-center font-sans bg-blue-lightest md:h-screen md:bg-grey-lightest">
    ${banner(state, emit)}
    ${header(state, emit)}
    ${main(state, emit)}
--- a/app/ui/archiveTile.js
+++ b/app/ui/archiveTile.js
@ -36,7 +36,7 @@ function password(state) {
      id="password-input"
      class="${
        state.password ? '' : 'invisible'
-      } border rounded-sm focus:border-blue leading-normal mt-2 py-1 px-2 h-8"
+      } border rounded-sm focus:border-blue leading-normal my-2 py-1 px-2 h-8"
      autocomplete="off"
      maxlength="${MAX_LENGTH}"
      type="password"
@ -96,7 +96,7 @@ function fileInfo(file, action) {
    <article class="flex flex-row items-center p-3">
      <img class="" src="${assets.get('blue_file.svg')}"/>
      <p class="ml-4 w-full">
-        <h1 class="text-sm font-medium">${file.name}</h1>
+        <h1 class="text-sm font-medium word-break-all">${file.name}</h1>
        <div class="text-xs font-normal opacity-75 pt-1">${bytes(
          file.size
        )}</div>
@ -137,7 +137,7 @@ module.exports = function(state, emit, archive) {
        alt="Delete"
        src="${assets.get('close-16.svg')}"
        onclick=${del}/>
-      <h1 class="text-sm font-medium">${archive.name}</h1>
+      <h1 class="text-sm font-medium word-break-all">${archive.name}</h1>
      <div class="text-xs font-normal opacity-75 pt-1">${bytes(
        archive.size
      )}</div>
@ -199,7 +199,7 @@ module.exports.wip = function(state, emit) {
    ${password(state, emit)}
    <button
      id="upload-btn"
-      class="rounded bg-blue hover\:bg-blue-dark focus\:bg-blue-darker cursor-pointer text-center text-white py-2 px-6 h-12 mt-4 flex flex-no-shrink items-center justify-center font-semibold"
+      class="rounded bg-blue hover\:bg-blue-dark focus\:bg-blue-darker cursor-pointer text-center text-white py-2 px-6 h-12 flex flex-no-shrink items-center justify-center font-semibold"
      title="${state.translate('uploadSuccessConfirmHeader')}"
      onclick=${upload}>
      ${state.translate('uploadSuccessConfirmHeader')}
@ -207,6 +207,7 @@ module.exports.wip = function(state, emit) {
  </article>`;

  function upload(event) {
+    window.scrollTo(0, 0);
    event.preventDefault();
    event.target.disabled = true;
    if (!state.uploading) {
@ -250,7 +251,7 @@ module.exports.uploading = function(state, emit) {
    class="z-20 flex flex-col items-start border border-grey-light bg-white p-4">
    <p class="w-full">
      <img class="float-left mr-3" src="${assets.get('blue_file.svg')}"/>
-      <h1 class="text-sm font-medium">${archive.name}</h1>
+      <h1 class="text-sm font-medium word-break-all">${archive.name}</h1>
      <div class="text-xs font-normal opacity-75 pt-1">${bytes(
        archive.size
      )}</div>
@ -280,7 +281,7 @@ module.exports.uploading = function(state, emit) {

 module.exports.empty = function(state, emit) {
  return html`
-  <article class="flex flex-col items-center justify-center border border-dashed border-blue-light px-6 py-16 h-full">
+  <article class="flex flex-col items-center justify-center border-2 border-dashed border-blue-light px-6 py-16 h-full">
    <img src="${assets.get('addfiles.svg')}" width="48" height="48"/>
    <div class="pt-6 pb-2 text-center text-lg font-bold uppercase tracking-wide">${state.translate(
      'uploadDropDragMessage'
@ -319,7 +320,7 @@ module.exports.preview = function(state, emit) {
    <article class="flex flex-col max-h-full bg-white border border-grey-light p-4 z-20">
      <p class="w-full mb-4">
      <img class="float-left mr-3" src="${assets.get('blue_file.svg')}"/>
-      <h1 class="text-sm font-medium">${archive.name}</h1>
+      <h1 class="text-sm font-medium word-break-all">${archive.name}</h1>
      <div class="text-xs font-normal opacity-75 pt-1">${bytes(
        archive.size
      )}</div>
@ -349,7 +350,7 @@ module.exports.downloading = function(state, emit) {
  <article class="flex flex-col bg-white border border-grey-light p-4 z-20">
    <p class="w-full mb-4">
      <img class="float-left mr-3" src="${assets.get('blue_file.svg')}"/>
-      <h1 class="text-sm font-medium">${archive.name}</h1>
+      <h1 class="text-sm font-medium word-break-all">${archive.name}</h1>
      <div class="text-xs font-normal opacity-75 pt-1">${bytes(
        archive.size
      )}</div>
--- a/app/ui/copyDialog.js
+++ b/app/ui/copyDialog.js
@ -6,7 +6,7 @@ module.exports = function(name, url) {
    return html`
    <div class="flex flex-col items-center text-center p-4 max-w-sm">
      <h1 class="font-bold my-4">${state.translate('notifyUploadDone')}</h1>
-      <p class="font-normal leading-normal text-grey-darker">${state.translate(
+      <p class="font-normal leading-normal text-grey-darker word-break-all">${state.translate(
        'copyUrlFormLabelWithName',
        { filename: name }
      )}</p>
--- a/app/ui/error.js
+++ b/app/ui/error.js
@ -4,13 +4,15 @@ const assets = require('../../common/assets');
 module.exports = function(state) {
  return html`
  <main class="main container">
-    <div class="flex flex-col items-center bg-white m-6 p-6 border border-grey-light md:border-none md:px-12 md:py-16 shadow w-full md:h-full">
-      <h1 class="text-2xl">${state.translate('errorPageHeader')}</h1>
+    <div class="flex flex-col items-center bg-white m-6 px-6 py-8 border border-grey-light md:border-none md:px-12 md:py-16 shadow w-full md:h-full">
+      <h1 class="text-2xl text-center">${state.translate(
+        'errorPageHeader'
+      )}</h1>
      <img class="my-16" src="${assets.get('illustration_error.svg')}"/>
      <p class="max-w-md leading-normal">
        ${state.translate('uploadPageExplainer')}
      </p>
-      <a class="text-blue my-10 font-medium" href="/">
+      <a class="text-blue mt-10 font-medium" href="/">
        ${state.translate('sendYourFilesLink')}
      </a>
    </div>
--- a/app/ui/expiryOptions.js
+++ b/app/ui/expiryOptions.js
@ -10,7 +10,8 @@ module.exports = function(state, emit) {
  <div class="">
    ${raw(
      state.translate('frontPageExpireInfo', {
-        downloadCount: '<select id="dlCount"></select>',
+        downloadCount:
+          '<span class="lg:inline-block md:block sm:inline-block block"></span><select id="dlCount"></select>',
        timespan: '<select id="timespan"></select>'
      })
    )}
--- a/app/ui/footer.js
+++ b/app/ui/footer.js
@ -15,10 +15,6 @@ module.exports = function(state) {
        href="https://www.mozilla.org/about/legal">
        ${state.translate('footerLinkLegal')}
      </a></li>
-      <li class="m-2"><a
-        href="https://testpilot.firefox.com/about">
-        ${state.translate('footerLinkAbout')}
-      </a></li>
      <li class="m-2"><a
        href="/legal">
        ${state.translate('footerLinkTerms')}
--- a/app/ui/fxPromo.js
+++ b/app/ui/fxPromo.js
@ -3,7 +3,7 @@ const assets = require('../../common/assets');

 module.exports = function() {
  return html`
-    <div class="w-full flex-none flex flex-row items-center content-center justify-center text-sm bg-grey-light text-grey-darkest h-12 px-4">
+    <div class="w-full flex-none flex flex-row items-center content-center justify-center text-sm bg-grey-light leading-tight text-grey-darkest px-4 py-3">
      <div class="flex items-center mx-auto">
        <img
          src="${assets.get('firefox_logo-only.svg')}"
--- a/app/ui/header.js
+++ b/app/ui/header.js
@ -3,11 +3,11 @@ const account = require('./account');

 module.exports = function(state, emit) {
  const header = html`
-  <header class="relative flex-none flex flex-row items-center justify-between bg-white w-full px-6 h-16 shadow z-20">
+  <header class="relative flex-none flex flex-row items-center justify-between bg-blue md:bg-white w-full px-6 h-16 md:shadow z-20">
    <a
      class="header-logo"
      href="/">
-      <h1 class="text-black font-normal">Firefox <b>Send</b></h1>
+      <h1 class="text-white md:text-black font-normal">Firefox <b>Send</b></h1>
    </a>
    ${account(state, emit)}
    <div class="invisible absolute pin-t pin-l mt-12 w-full flex flex-col items-center pointer-events-none">
--- a/app/ui/home.js
+++ b/app/ui/home.js
@ -23,11 +23,11 @@ module.exports = function(state, emit) {
      : list(archives, 'list-reset h-full overflow-y-scroll', 'mb-3');

  return html`
-  <main class="main md:relative">
+  <main class="main relative">
    ${state.modal && modal(state, emit)}
    <section class="h-full w-full p-6 md:flex md:flex-row z-10">
      <div class="md:mr-6 md:w-1/2">${left}</div>
-      <div class="md:w-1/2 overflow-y-scroll mt-6 md:mt-0">${right}</div>
+      <div class="md:w-1/2 mt-6 md:mt-0">${right}</div>
    </section>
  </main>`;
 };
--- a/app/ui/intro.js
+++ b/app/ui/intro.js
@ -3,18 +3,20 @@ const assets = require('../../common/assets');

 module.exports = function intro(state) {
  return html`
-  <article class="flex flex-col items-center justify-between bg-white border border-grey-light md:border-none px-6 md:py-10 py-6 md:mb-0 mb-6">
-    <p class="text-center">
-      <div class="font-semibold leading-normal">${state.translate(
-        'uploadPageHeader'
-      )}</div>
-      <div class="italic text-sm opacity-75 leading-normal">${state.translate(
-        'pageHeaderCredits'
-      )}</div>
-    </p>
-    <img class="my-6" src="${assets.get('illustration_download.svg')}"/>
-    <p class="md:mx-6 max-w-sm text-sm opacity-50 leading-normal">${state.translate(
-      'uploadPageExplainer'
-    )}</p>
+  <article class="flex flex-col items-center justify-center bg-white border border-grey-light md:border-none px-6 text-center md:py-0 py-6 md:mb-0 mb-6 h-full">
+    <div class="flex flex-col items-center justify-between h-full py-8">
+      <p class="text-center">
+        <div class="font-semibold leading-normal">${state.translate(
+          'uploadPageHeader'
+        )}</div>
+        <div class="italic text-sm opacity-75 leading-normal">${state.translate(
+          'pageHeaderCredits'
+        )}</div>
+      </p>
+      <img class="my-6" src="${assets.get('illustration_download.svg')}"/>
+      <p class="md:mx-6 max-w-sm text-sm opacity-50 leading-normal">${state.translate(
+        'uploadPageExplainer'
+      )}</p>
+    </div>
  </article>`;
 };
--- a/app/ui/legal.js
+++ b/app/ui/legal.js
@ -4,8 +4,8 @@ const raw = require('choo/html/raw');
 module.exports = function(state) {
  return html`
  <main class="main container">
-  <div class="flex flex-col items-center bg-white m-6 p-6 border border-grey-light md:border-none md:px-12 md:py-16 shadow w-full md:h-full">
-      <h1 class="text-2xl">${state.translate('legalHeader')}</h1>
+  <div class="flex flex-col items-center bg-white m-6 px-6 py-8 border border-grey-light md:border-none md:px-12 md:py-16 shadow w-full md:h-full">
+      <h1 class="text-2xl text-center">${state.translate('legalHeader')}</h1>
      ${raw(
        replaceLinks(state.translate('legalNoticeTestPilot'), [
          'https://testpilot.firefox.com/terms',
--- a/app/ui/modal.js
+++ b/app/ui/modal.js
@ -2,7 +2,7 @@ const html = require('choo/html');

 module.exports = function(state, emit) {
  return html`
-  <div class="absolute pin flex items-center justify-center overflow-hidden z-40 bg-cloud" onclick=${close}>
+  <div class="absolute pin flex items-center justify-center overflow-hidden z-40 bg-cloud md:my-8" onclick=${close}>
    <div class="h-full max-h-screen absolute pin-t flex items-center">
      <div class="shadow-cloud bg-white" onclick=${e => e.stopPropagation()}>
        ${state.modal(state, emit, close)}
--- a/app/ui/notFound.js
+++ b/app/ui/notFound.js
@ -4,8 +4,8 @@ const assets = require('../../common/assets');
 module.exports = function(state) {
  return html`
  <main class="main container">
-    <div class="flex flex-col items-center bg-white m-6 p-6 border border-grey-light md:border-none md:px-12 md:py-16 shadow w-full md:h-full">
-      <h1 class="text-pink-dark text-2xl">${state.translate(
+    <div class="flex flex-col items-center bg-white m-6 px-6 py-8 border border-grey-light md:border-none md:px-12 md:py-16 shadow w-full md:h-full">
+      <h1 class="text-pink-dark text-2xl text-center">${state.translate(
        'expiredPageHeader'
      )}</h1>
      <img class="my-16" src="${assets.get(
@ -14,7 +14,7 @@ module.exports = function(state) {
      <p class="max-w-md leading-normal">
        ${state.translate('uploadPageExplainer')}
      </p>
-      <a class="text-blue my-10 font-medium" href="/">
+      <a class="text-blue mt-10 font-medium" href="/">
        ${state.translate('sendYourFilesLink')}
      </a>
    </div>
--- a/app/ui/selectbox.js
+++ b/app/ui/selectbox.js
@ -4,7 +4,7 @@ module.exports = function(selected, options, translate, changed) {
  let x = selected;

  return html`
-    <select class="appearance-none cursor-pointer border rounded-sm bg-blue-lightest hover:border-blue focus:border-blue px-2 py-1 mx-1 h-8" onchange=${choose}>
+    <select class="appearance-none cursor-pointer border rounded-sm bg-blue-lightest hover:border-blue focus:border-blue px-2 py-1 my-2 h-8" onchange=${choose}>
      ${options.map(
        i =>
          html`<option value="${i}" ${
--- a/app/ui/unsupported.js
+++ b/app/ui/unsupported.js
@ -31,13 +31,13 @@ module.exports = function(state) {

  return html`
    <main class="main container">
-      <div class="flex flex-col items-center bg-white m-6 p-6 border border-grey-light md:border-none md:px-12 md:py-16 shadow w-full md:h-full">
+      <div class="flex flex-col items-center bg-white m-6 px-6 py-8 border border-grey-light md:border-none md:px-12 md:py-16 shadow w-full md:h-full">
      <h1 class="text-center text-2xl">${strings.header}</h1>
      <p class="my-10 max-w-md leading-normal">
        ${strings.description}
      </p>
      ${why}
-      <a href="${url}" class="border border-green-light rounded bg-green hover\:bg-green-dark focus\:bg-green-darker flex items-center justify-center text-2xl text-white my-10 py-4 px-6">
+      <a href="${url}" class="border border-green-light rounded bg-green hover\:bg-green-dark focus\:bg-green-darker flex items-center justify-center text-2xl text-white mt-10 py-4 px-6">
        <img
          src="${assets.get('firefox_logo-only.svg')}"
          class="w-10"
--- a/assets/send_logo_white.svg
+++ b/assets/send_logo_white.svg
@ -0,0 +1 @@
+<svg width="30" height="27" viewBox="0 0 30 27" xmlns="http://www.w3.org/2000/svg"><title>send logo</title><g stroke="#ffffff" fill="none" fill-rule="evenodd" transform="translate(-0.231,0.11948695)"><path d="M22.364 19.989l-2.153-2.103a2.046 2.046 0 0 0-2.665-.151l3.402 3.323a.531.531 0 0 1 0 .766l-2.466 2.408a.563.563 0 0 1-.784 0l-3.398-3.32a1.932 1.932 0 0 0 .188 2.564l2.153 2.103c.788.77 2.066.77 2.855 0l2.868-2.802a1.94 1.94 0 0 0 0-2.788M8.77 14.745a.534.534 0 0 0 0 .766l3.399 3.32a2.05 2.05 0 0 1-2.625-.184l-2.153-2.102a1.94 1.94 0 0 1 0-2.79l2.869-2.801a2.052 2.052 0 0 1 2.854 0l2.153 2.103c.73.713.775 1.83.154 2.603l-3.401-3.323a.565.565 0 0 0-.784 0L8.77 14.745zm9.464 5.682a.777.777 0 0 1 0 1.118.822.822 0 0 1-1.144 0l-5.6-5.47a.777.777 0 0 1 0-1.118.822.822 0 0 1 1.144 0l5.6 5.47z" stroke-width=".618" fill="#ffffff"/><path d="M6.065 20.606c-2.913-1.586-3.988-3.656-3.988-6.468 0-2.81 2.265-6.425 5.786-6.289.1.004.55-.006.649 0 .895-3.27 2.508-6.353 6.898-6.353 4.557 0 7.336 3.716 6.75 7.785.08-.005 1.232.17 1.31.186 3.096.644 4.915 3.275 4.915 5.18 0 1.905-.107 3.029-2.023 4.947" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/></g></svg>
--- a/test/integration/homepage-tests.js
+++ b/test/integration/homepage-tests.js
@ -8,7 +8,6 @@ describe('Firefox Send homepage', function() {
  const footerLinks = [
    'mozilla',
    'legal',
-    'about',
    'legal',
    'cookies',
    'report-infringement',
				`@ -0,0 +1 @@`
				<svg width="30" height="27" viewBox="0 0 30 27" xmlns="http://www.w3.org/2000/svg"><title>send logo</title><g stroke="#ffffff" fill="none" fill-rule="evenodd" transform="translate(-0.231,0.11948695)"><path d="M22.364 19.989l-2.153-2.103a2.046 2.046 0 0 0-2.665-.151l3.402 3.323a.531.531 0 0 1 0 .766l-2.466 2.408a.563.563 0 0 1-.784 0l-3.398-3.32a1.932 1.932 0 0 0 .188 2.564l2.153 2.103c.788.77 2.066.77 2.855 0l2.868-2.802a1.94 1.94 0 0 0 0-2.788M8.77 14.745a.534.534 0 0 0 0 .766l3.399 3.32a2.05 2.05 0 0 1-2.625-.184l-2.153-2.102a1.94 1.94 0 0 1 0-2.79l2.869-2.801a2.052 2.052 0 0 1 2.854 0l2.153 2.103c.73.713.775 1.83.154 2.603l-3.401-3.323a.565.565 0 0 0-.784 0L8.77 14.745zm9.464 5.682a.777.777 0 0 1 0 1.118.822.822 0 0 1-1.144 0l-5.6-5.47a.777.777 0 0 1 0-1.118.822.822 0 0 1 1.144 0l5.6 5.47z" stroke-width=".618" fill="#ffffff"/><path d="M6.065 20.606c-2.913-1.586-3.988-3.656-3.988-6.468 0-2.81 2.265-6.425 5.786-6.289.1.004.55-.006.649 0 .895-3.27 2.508-6.353 6.898-6.353 4.557 0 7.336 3.716 6.75 7.785.08-.005 1.232.17 1.31.186 3.096.644 4.915 3.275 4.915 5.18 0 1.905-.107 3.029-2.023 4.947" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/></g></svg>