From c71c246959c23384674ebe13763d7cf8f2435588 Mon Sep 17 00:00:00 2001 From: Danny Coates Date: Mon, 9 Sep 2019 10:34:55 -0700 Subject: [PATCH] Dark theme --- README.md | 2 +- android/android.js | 4 +- android/pages/home.js | 2 +- app/main.css | 97 ++++++++++++++++----- app/ui/account.js | 11 ++- app/ui/archiveTile.js | 87 +++++++++++-------- app/ui/body.js | 2 +- app/ui/copyDialog.js | 8 +- app/ui/download.js | 4 +- app/ui/downloadCompleted.js | 4 +- app/ui/downloadPassword.js | 14 ++-- app/ui/error.js | 2 +- app/ui/footer.js | 7 +- app/ui/header.js | 18 +++- app/ui/intro.js | 2 +- app/ui/legal.js | 6 +- app/ui/modal.js | 5 +- app/ui/noStreams.js | 2 +- app/ui/notFound.js | 2 +- app/ui/promo.js | 4 +- app/ui/selectbox.js | 2 +- app/ui/shareDialog.js | 8 +- app/ui/signupDialog.js | 6 +- app/ui/surveyDialog.js | 4 +- app/ui/unsupported.js | 2 +- assets/addfiles.svg | 12 +-- assets/blue_file.svg | 17 ++-- assets/close-16.svg | 2 +- assets/copy-16.svg | 6 +- assets/dl.svg | 17 ++-- assets/icon.svg | 41 +++++++++ assets/logo.svg | 1 - assets/select-arrow.svg | 5 +- assets/share-24.svg | 3 +- assets/wordmark.svg | 6 ++ tailwind.config.js | 162 +++++++++++++++++++----------------- webpack.config.js | 1 + 37 files changed, 363 insertions(+), 215 deletions(-) create mode 100644 assets/icon.svg delete mode 100644 assets/logo.svg create mode 100644 assets/wordmark.svg diff --git a/README.md b/README.md index 48ea8d11..3a2014af 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -# [![Firefox Send](./assets/logo.svg)](https://send.firefox.com/) +# [![Firefox Send](./assets/icon.svg)](https://send.firefox.com/) Firefox Send [![CircleCI](https://img.shields.io/circleci/project/github/mozilla/send.svg)](https://circleci.com/gh/mozilla/send) diff --git a/android/android.js b/android/android.js index 0a1e4d24..22069ea1 100644 --- a/android/android.js +++ b/android/android.js @@ -60,9 +60,7 @@ function body(main) { `; */ return html` - + ${state.cache(Header, 'header').render()} ${main(state, emit)} `; diff --git a/android/pages/home.js b/android/pages/home.js index f1259dfb..5bc1cc15 100644 --- a/android/pages/home.js +++ b/android/pages/home.js @@ -25,7 +25,7 @@ module.exports = function(state, emit) { let content = ''; let button = html`
diff --git a/app/main.css b/app/main.css index 71161f6a..01a7dd44 100644 --- a/app/main.css +++ b/app/main.css @@ -39,7 +39,7 @@ body { } .btn { - @apply bg-blue-dark; + @apply bg-blue-60; @apply text-white; @apply cursor-pointer; @apply py-4; @@ -48,11 +48,11 @@ body { } .btn:hover { - @apply bg-blue-darker; + @apply bg-blue-70; } .btn:focus { - @apply bg-blue-darker; + @apply bg-blue-70; } .checkbox { @@ -70,7 +70,7 @@ body { } .checkbox > label::before { - /* @apply bg-grey-lightest; */ + /* @apply bg-grey-10; */ @apply border; @apply rounded-sm; @@ -82,16 +82,16 @@ body { } .checkbox > label:hover::before { - @apply border-blue-dark; + @apply border-blue-50; } .checkbox > input:focus + label::before { - @apply border-blue-dark; + @apply border-blue-50; } .checkbox > input:checked + label::before { - @apply bg-blue-dark; - @apply border-blue-dark; + @apply bg-blue-50; + @apply border-blue-50; background-image: url('../assets/lock.svg'); background-position: center; @@ -104,8 +104,8 @@ body { } .checkbox > input:disabled + label::before { - @apply bg-blue-dark; - @apply border-blue-dark; + @apply bg-blue-50; + @apply border-blue-50; background-image: url('../assets/lock.svg'); background-position: center; @@ -153,9 +153,21 @@ footer li:hover { white-space: nowrap; } +.link-blue { + @apply text-blue-60; +} + +.link-blue:hover { + @apply text-blue-70; +} + +.link-blue:focus { + @apply text-blue-70; +} + .main-header img { height: 32px; - width: 170px; + width: auto; } .intro { @@ -193,14 +205,14 @@ footer li:hover { } progress { - @apply bg-grey-light; + @apply bg-grey-30; @apply rounded-sm; @apply w-full; @apply h-1; } progress::-webkit-progress-bar { - @apply bg-grey-light; + @apply bg-grey-30; @apply rounded-sm; @apply w-full; @apply h-1; @@ -290,6 +302,55 @@ select { } } +@screen dark { + body { + @apply text-grey-10; + + background-image: unset; + } + + .btn { + @apply bg-blue-40; + @apply text-white; + } + + .btn:hover { + @apply bg-blue-50; + } + + .btn:focus { + @apply bg-blue-50; + } + + .link-blue { + @apply text-blue-40; + } + + .link-blue:hover { + @apply text-blue-50; + } + + .link-blue:focus { + @apply text-blue-50; + } + + .main > section { + @apply bg-grey-90; + } + + .mozilla-logo { + background-color: white; + border: 1px solid white; + } + + @screen md { + .main > section { + @apply border; + @apply border-grey-80; + } + } +} + @tailwind utilities; @responsive { @@ -325,8 +386,6 @@ select { .signin:hover, .signin:focus { - @apply shadow-btn; - transform: scale(1.0625); } @@ -337,19 +396,19 @@ select { /* begin signin button color experiment */ .white-blue { - @apply border-blue-dark; + @apply border-blue-60; @apply border-2; - @apply text-blue-dark; + @apply text-blue-60; } .white-blue:hover, .white-blue:focus { - @apply bg-blue-dark; + @apply bg-blue-60; @apply text-white; } .blue { - @apply bg-blue-dark; + @apply bg-blue-60; @apply text-white; } diff --git a/app/ui/account.js b/app/ui/account.js index a870d92b..a81117e7 100644 --- a/app/ui/account.js +++ b/app/ui/account.js @@ -64,8 +64,7 @@ class Account extends Component { return html`
`; @@ -106,7 +106,9 @@ function password(state) { function fileInfo(file, action) { return html` - + + +

${file.name}

${bytes( @@ -120,7 +122,9 @@ function fileInfo(file, action) { function archiveInfo(archive, action) { return html`

- + + +

${archive.name}

${bytes( @@ -140,7 +144,7 @@ function archiveDetails(translate, archive) { ontoggle="${toggled}" > - Share link + + + + Share link ` : html` `; @@ -191,12 +200,14 @@ module.exports = function(state, emit, archive) { platform() === 'web' ? html` - + + + ${state.translate('downloadButtonLabel')} ` @@ -206,7 +217,7 @@ module.exports = function(state, emit, archive) { return html` ${archiveInfo( archive, @@ -225,7 +236,7 @@ module.exports = function(state, emit, archive) { ${expiryInfo(state.translate, archive)}
${archiveDetails(state.translate, archive)} -
+
${dl} ${copyOrShare}
@@ -269,18 +280,21 @@ module.exports = function(state, emit, archive) { module.exports.wip = function(state, emit) { return html` - + ${list( Array.from(state.archive.files) .reverse() .map(f => fileInfo(f, remove(f, state.translate('deleteButtonHover'))) ), - 'flex-shrink bg-grey-lightest rounded-t overflow-y-auto px-6 py-4 md:h-full md:max-h-half-screen', - 'bg-white px-2 my-2 shadow-light rounded' + 'flex-shrink bg-grey-10 rounded-t overflow-y-auto px-6 py-4 md:h-full md:max-h-half-screen dark:bg-black', + 'bg-white px-2 my-2 shadow-light rounded dark:bg-grey-90 dark:border dark:border-grey-80' )}
- + + + ${state.translate('addFilesButton')} -
+
${state.translate('totalSize', { size: bytes(state.archive.size) })} @@ -378,22 +394,22 @@ module.exports.uploading = function(state, emit) { return html` ${archiveInfo(archive)} -
+
${expiryInfo(state.translate, { dlimit: state.archive.dlimit, dtotal: 0, expiresAt: Date.now() + 500 + state.archive.timeLimit * 1000 })}
-
+
${progressPercent}
${progressPercent}
`; return html` - -
+ +
${archiveInfo(archive)} ${details}