diff --git a/app/main.css b/app/main.css index 773ddd68..95ca22ad 100644 --- a/app/main.css +++ b/app/main.css @@ -32,18 +32,42 @@ progress::-webkit-progress-value { } .main { - min-height: calc(100vh - 6rem); + display: flex; + max-width: 64rem; + width: 100%; +} + +.main > section { + @apply bg-white; + @apply shadow; } .header-logo { background-image: url('../assets/send_logo.svg'); background-position: left; background-repeat: no-repeat; - background-size: 2rem; - padding-left: 2.5rem; + background-size: 1.8rem; + padding-left: 2.4rem; text-decoration: none; } +.header-logo h1 { + font-size: 1.5rem; +} + +.mozilla-logo { + background-image: url('../assets/mozilla-logo.svg'); + background-repeat: no-repeat; + background-size: 100px, 32px; + overflow: hidden; + text-indent: 120%; + white-space: nowrap; + display: inline-block; + height: 32px; + width: 100px; + flex-shrink: 0; +} + .feedback-link { background-color: #000; background-image: url('../assets/feedback.svg'); @@ -120,11 +144,15 @@ progress::-webkit-progress-value { .main { @apply flex-1; @apply self-center; - @apply bg-white; - @apply shadow-md; - @apply m-auto; + @apply items-center; + @apply my-10; + width: calc(100% - 3rem); min-height: 30rem; max-height: 40rem; } + + .main > section { + @apply shadow-md; + } } diff --git a/app/routes.js b/app/routes.js index cb616c42..b2619599 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/account.js b/app/ui/account.js index 5908144a..d9f92ff6 100644 --- a/app/ui/account.js +++ b/app/ui/account.js @@ -1,6 +1,6 @@ const html = require('choo/html'); const itemClass = - 'block p-2 text-grey-darkest hover:bg-blue hover:text-white cursor-pointer'; + 'block px-4 py-2 text-grey-darkest hover:bg-blue hover:text-white cursor-pointer'; module.exports = function(state, emit) { if (!state.capabilities.account) { @@ -22,7 +22,7 @@ module.exports = function(state, emit) { )}` ); } - return html`
+ return html`
-
+
+
-

-

${file.name}

-
${bytes(file.size)}
+

+

${file.name}

+
${bytes( + file.size + )}

${action} @@ -107,16 +109,13 @@ function fileInfo(file, action) { function archiveDetails(translate, archive) { if (archive.manifest.files.length > 1) { return html` -
${translate('fileCount', { num: archive.manifest.files.length })} - ${list( - archive.manifest.files.map(f => fileInfo(f)), - 'list-reset h-full overflow-y-scroll' - )} + ${list(archive.manifest.files.map(f => fileInfo(f)), 'list-reset h-full')}
`; } function toggled(event) { @@ -129,7 +128,7 @@ module.exports = function(state, emit, archive) { return html`
+ class="flex flex-col items-start border border-grey-light bg-white p-4">

-

${archive.name}

-
${bytes(archive.size)}
+

${archive.name}

+
${bytes( + archive.size + )}

${expiryInfo(state.translate, archive)}
${archiveDetails(state.translate, archive)} -
+
`; @@ -173,12 +174,13 @@ module.exports = function(state, emit, archive) { module.exports.wip = function(state, emit) { return html` -
+
${list( state.archive.files.map(f => fileInfo(f, remove(f))), - 'list-reset h-full overflow-y-scroll' + 'list-reset h-full overflow-y-scroll p-4 bg-blue-lightest md:max-h-half-screen', + 'bg-white px-2 mb-3 border border-grey-light rounded' )} -
+
@@ -197,10 +199,10 @@ module.exports.wip = function(state, emit) { ${password(state, emit)}
`; @@ -227,7 +229,7 @@ module.exports.wip = function(state, emit) { return html` `; @@ -245,11 +247,13 @@ module.exports.uploading = function(state, emit) { return html`
+ class="z-20 flex flex-col items-start border border-grey-light bg-white p-4">

-

${archive.name}

-
${bytes(archive.size)}
+

${archive.name}

+
${bytes( + archive.size + )}

${expiryInfo(state.translate, { @@ -258,10 +262,10 @@ module.exports.uploading = function(state, emit) { expiresAt: Date.now() + 500 + state.timeLimit * 1000 })}
-
${progressPercent}
- ${progressPercent} +
${progressPercent}
+ ${progressPercent} @@ -276,8 +280,14 @@ module.exports.uploading = function(state, emit) { module.exports.empty = function(state, emit) { return html` -
-
${state.translate('uploadDropDragMessage')}
+
+ +
${state.translate( + 'uploadDropDragMessage' + )}
+
${state.translate( + 'uploadDropClickMessage' + )}
@@ -306,17 +316,18 @@ module.exports.preview = function(state, emit) { archive.open = true; } return html` -
-

+

+

-

${archive.name}

-
${bytes(archive.size)}
+

${archive.name}

+
${bytes( + archive.size + )}

${archiveDetails(state.translate, archive)} -
- ${state.translate( + ${state.translate( 'okButton' )}
`; diff --git a/app/ui/download.js b/app/ui/download.js index 497f28fa..a4d89639 100644 --- a/app/ui/download.js +++ b/app/ui/download.js @@ -11,7 +11,7 @@ function password(state, emit) {
@@ -20,7 +20,7 @@ function password(state, emit) { -

${state.translate('downloadFinish')}

-

- ${state.translate( +

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

+

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

@@ -104,9 +106,9 @@ module.exports = function(state, emit) { } return html`
-
-
${content}
-
${intro(state)}
+
+
${content}
+
${intro(state)}
`; }; diff --git a/app/ui/error.js b/app/ui/error.js index 40be9108..c0189d9c 100644 --- a/app/ui/error.js +++ b/app/ui/error.js @@ -4,15 +4,15 @@ const assets = require('../../common/assets'); module.exports = function(state) { return html`
-
-

${state.translate('errorPageHeader')}

- -

- ${state.translate('uploadPageExplainer')} -

- - ${state.translate('sendYourFilesLink')} - +
+

${state.translate('errorPageHeader')}

+ +

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

+ + ${state.translate('sendYourFilesLink')} +
`; }; diff --git a/app/ui/footer.js b/app/ui/footer.js index 2654ce28..b1023718 100644 --- a/app/ui/footer.js +++ b/app/ui/footer.js @@ -5,7 +5,11 @@ 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`