From 560747106befa319ec2a1b61bc48338a72a57dfa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marian=20H=C3=A4hnlein?= Date: Tue, 12 Apr 2022 15:58:58 +0200 Subject: [PATCH] Add ability to change the branding --- app/experiments.js | 2 +- app/main.css | 68 ++++++++++++++--------------- app/ui/account.js | 6 +-- app/ui/archiveTile.js | 30 ++++++------- app/ui/copyDialog.js | 2 +- app/ui/downloadCompleted.js | 4 +- app/ui/error.js | 4 +- app/ui/faviconProgressbar.js | 9 +++- app/ui/header.js | 21 +++++++-- app/ui/noStreams.js | 2 +- app/ui/notFound.js | 4 +- app/ui/selectbox.js | 13 ++++-- app/ui/shareDialog.js | 2 +- app/ui/signupDialog.js | 2 +- app/ui/surveyDialog.js | 2 +- app/ui/unsupported.js | 2 +- assets/blue_file.svg | 44 +++++++++---------- assets/completed.svg | 2 +- assets/error.svg | 4 +- assets/notFound.svg | 4 +- docs/docker.md | 32 ++++++++++++++ server/clientConstants.js | 7 ++- server/config.js | 62 ++++++++++++++++++++++++++ server/layout.js | 24 +++++------ server/routes/index.js | 6 +++ server/routes/webmanifest.js | 10 +++-- server/state.js | 24 ++++++++++- tailwind.config.js | 84 +----------------------------------- 28 files changed, 275 insertions(+), 201 deletions(-) diff --git a/app/experiments.js b/app/experiments.js index 8b7a19ee..8e432e0a 100644 --- a/app/experiments.js +++ b/app/experiments.js @@ -7,7 +7,7 @@ const experiments = { return true; }, variant: function() { - return ['white-blue', 'blue', 'white-violet', 'violet'][ + return ['white-primary', 'primary', 'white-violet', 'violet'][ Math.floor(Math.random() * 4) ]; }, diff --git a/app/main.css b/app/main.css index 8beaab8c..d5306936 100644 --- a/app/main.css +++ b/app/main.css @@ -39,7 +39,7 @@ body { } .btn { - @apply bg-blue-60; + @apply bg-primary; @apply text-white; @apply cursor-pointer; @apply py-4; @@ -48,11 +48,11 @@ body { } .btn:hover { - @apply bg-blue-70; + @apply bg-primary_accent; } .btn:focus { - @apply bg-blue-70; + @apply bg-primary_accent; } .checkbox { @@ -82,16 +82,16 @@ body { } .checkbox > label:hover::before { - @apply border-blue-50; + @apply border-primary; } .checkbox > input:focus + label::before { - @apply border-blue-50; + @apply border-primary; } .checkbox > input:checked + label::before { - @apply bg-blue-50; - @apply border-blue-50; + @apply bg-primary; + @apply border-primary; background-image: url('../assets/lock.svg'); background-position: center; @@ -104,8 +104,8 @@ body { } .checkbox > input:disabled + label::before { - @apply bg-blue-50; - @apply border-blue-50; + @apply bg-primary; + @apply border-primary; background-image: url('../assets/lock.svg'); background-position: center; @@ -153,16 +153,16 @@ footer li a:hover { white-space: nowrap; } -.link-blue { - @apply text-blue-60; +.link-primary { + @apply text-primary; } -.link-blue:hover { - @apply text-blue-70; +.link-primary:hover { + @apply text-primary_accent; } -.link-blue:focus { - @apply text-blue-70; +.link-primary:focus { + @apply text-primary_accent; } .main-header img { @@ -212,7 +212,7 @@ progress::-webkit-progress-value { rgba(255, 255, 255, 0.4) 80%, transparent 80% ), - -webkit-linear-gradient(left, #0a84ff, #0a84ff); + -webkit-linear-gradient(left, var(--color-primary), var(--color-primary)); /* stylelint-enable */ border-radius: 2px; background-size: 21px 20px, 100% 100%, 100% 100%; @@ -232,7 +232,7 @@ progress::-moz-progress-bar { rgba(255, 255, 255, 0.4) 80%, transparent 80% ), - -moz-linear-gradient(left, #0a84ff, #0a84ff); + -moz-linear-gradient(left, var(--color-primary), var(--color-primary)); /* stylelint-enable */ border-radius: 2px; background-size: 21px 20px, 100% 100%, 100% 100%; @@ -283,28 +283,28 @@ select { } .btn { - @apply bg-blue-40; + @apply bg-primary; @apply text-white; } .btn:hover { - @apply bg-blue-50; + @apply bg-primary_accent; } .btn:focus { - @apply bg-blue-50; + @apply bg-primary_accent; } - .link-blue { - @apply text-blue-40; + .link-primary { + @apply text-primary; } - .link-blue:hover { - @apply text-blue-50; + .link-primary:hover { + @apply text-primary_accent; } - .link-blue:focus { - @apply text-blue-50; + .link-primary:focus { + @apply text-primary_accent; } .main > section { @@ -363,20 +363,20 @@ select { /* begin signin button color experiment */ -.white-blue { - @apply border-blue-60; +.white-primary { + @apply border-primary; @apply border-2; - @apply text-blue-60; + @apply text-primary; } -.white-blue:hover, -.white-blue:focus { - @apply bg-blue-60; +.white-primary:hover, +.white-primary:focus { + @apply bg-primary; @apply text-white; } -.blue { - @apply bg-blue-60; +.primary { + @apply bg-primary; @apply text-white; } diff --git a/app/ui/account.js b/app/ui/account.js index 7f6430ec..7d200049 100644 --- a/app/ui/account.js +++ b/app/ui/account.js @@ -69,7 +69,7 @@ class Account extends Component { return html`