diff --git a/app/main.css b/app/main.css index 95ca22ad..1539d7a3 100644 --- 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 { diff --git a/app/routes.js b/app/routes.js index b2619599..cb616c42 100644 --- 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` + const b = html` ${banner(state, emit)} ${header(state, emit)} ${main(state, emit)} diff --git a/app/ui/archiveTile.js b/app/ui/archiveTile.js index 4b401a39..f1f37c92 100644 --- 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) {

-

${file.name}

+

${file.name}

${bytes( file.size )}
@@ -137,7 +137,7 @@ module.exports = function(state, emit, archive) { alt="Delete" src="${assets.get('close-16.svg')}" onclick=${del}/> -

${archive.name}

+

${archive.name}

${bytes( archive.size )}
@@ -199,7 +199,7 @@ module.exports.wip = function(state, emit) { ${password(state, emit)}
`; 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">

-

${archive.name}

+

${archive.name}

${bytes( archive.size )}
@@ -280,7 +281,7 @@ module.exports.uploading = function(state, emit) { module.exports.empty = function(state, emit) { return html` -
+
${state.translate( 'uploadDropDragMessage' @@ -319,7 +320,7 @@ module.exports.preview = function(state, emit) {

-

${archive.name}

+

${archive.name}

${bytes( archive.size )}
@@ -349,7 +350,7 @@ module.exports.downloading = function(state, emit) {

-

${archive.name}

+

${archive.name}

${bytes( archive.size )}
diff --git a/app/ui/copyDialog.js b/app/ui/copyDialog.js index 87f1456b..ebd4f368 100644 --- a/app/ui/copyDialog.js +++ b/app/ui/copyDialog.js @@ -6,7 +6,7 @@ module.exports = function(name, url) { return html`

${state.translate('notifyUploadDone')}

-

${state.translate( +

${state.translate( 'copyUrlFormLabelWithName', { filename: name } )}

diff --git a/app/ui/error.js b/app/ui/error.js index c0189d9c..fa2d0457 100644 --- 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`
-
-

${state.translate('errorPageHeader')}

+
+

${state.translate( + 'errorPageHeader' + )}

${state.translate('uploadPageExplainer')}

- + ${state.translate('sendYourFilesLink')}
diff --git a/app/ui/expiryOptions.js b/app/ui/expiryOptions.js index b94ffe7b..dbcf20e7 100644 --- a/app/ui/expiryOptions.js +++ b/app/ui/expiryOptions.js @@ -10,7 +10,8 @@ module.exports = function(state, emit) {
${raw( state.translate('frontPageExpireInfo', { - downloadCount: '', + downloadCount: + '', timespan: '' }) )} diff --git a/app/ui/footer.js b/app/ui/footer.js index b1023718..913b88bc 100644 --- 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')} -
  • - ${state.translate('footerLinkAbout')} -
  • ${state.translate('footerLinkTerms')} diff --git a/app/ui/fxPromo.js b/app/ui/fxPromo.js index cd472e17..b791f291 100644 --- a/app/ui/fxPromo.js +++ b/app/ui/fxPromo.js @@ -3,7 +3,7 @@ const assets = require('../../common/assets'); module.exports = function() { return html` -
    +
    +
    ${account(state, emit)}