From cacb3a898daba77ad337c0dab627d7443b9cf8c9 Mon Sep 17 00:00:00 2001 From: Mark Liang Date: Fri, 2 Nov 2018 17:27:59 +0800 Subject: [PATCH 1/3] update ui --- app/main.css | 52 ++++++++++-- app/routes.js | 2 +- app/ui/account.js | 4 +- app/ui/archiveTile.js | 100 +++++++++++++--------- app/ui/copyDialog.js | 12 +-- app/ui/download.js | 18 ++-- app/ui/error.js | 18 ++-- app/ui/footer.js | 6 +- app/ui/header.js | 2 +- app/ui/home.js | 10 +-- app/ui/intro.js | 14 +-- app/ui/legal.js | 6 +- app/ui/modal.js | 8 +- app/ui/notFound.js | 14 +-- app/ui/okDialog.js | 4 +- app/ui/selectbox.js | 2 +- app/ui/signupDialog.js | 8 +- app/ui/unsupported.js | 16 ++-- assets/addfiles.svg | 9 ++ package-lock.json | 189 +++++++++++++++++++++-------------------- tailwind.js | 16 ++-- 21 files changed, 298 insertions(+), 212 deletions(-) create mode 100644 assets/addfiles.svg diff --git a/app/main.css b/app/main.css index 773ddd68..28d8ec51 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: 1024px; + 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'); @@ -59,6 +83,14 @@ progress::-webkit-progress-value { white-space: nowrap; } +.bg-shades { + background-color: rgba(255, 255, 255, 0.8); +} + +.border-modal { + box-shadow: 0 0 5rem 5rem white; +} + .checkbox { @apply leading-normal; @apply select-none; @@ -116,15 +148,23 @@ progress::-webkit-progress-value { content: '\200b'; } +.max-h-half { + max-height: 50vh; +} + @screen md { .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% - 48px); 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} @@ -129,7 +131,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 +177,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 max-h-half', + 'bg-white px-2 mb-3 border border-grey-light rounded' )} -
+
@@ -197,10 +202,10 @@ module.exports.wip = function(state, emit) { ${password(state, emit)}
`; @@ -227,7 +232,7 @@ module.exports.wip = function(state, emit) { return html` `; @@ -245,11 +250,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 +265,10 @@ module.exports.uploading = function(state, emit) { expiresAt: Date.now() + 500 + state.timeLimit * 1000 })}
-
${progressPercent}
- ${progressPercent} +
${progressPercent}
+ ${progressPercent} @@ -276,8 +283,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 +319,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..e65a37bf 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`