Add ability to change the branding

timvisee · May 2, 2022 · 5607471 · 5607471
1 parent 81741dc
commit 5607471
Show file tree

Hide file tree

Showing 28 changed files with 275 additions and 201 deletions.
diff --git 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
@@ -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
@@ -69,7 +69,7 @@ class Account extends Component {
       return html`
         <send-account>
           <button
-            class="px-4 py-2 md:px-8 md:py-4 focus:outline signin border-2 link-blue border-blue-60 hover:border-blue-70 dark:border-blue-40 dark:hover:border-blue-50"
+            class="px-4 py-2 md:px-8 md:py-4 focus:outline signin border-2 link-primary border-primary hover:border-primary dark:border-primary dark:hover:border-primary"
             onclick="${e => this.login(e)}"
             title="${translate('signInOnlyButton')}"
           >
@@ -83,7 +83,7 @@ class Account extends Component {
         <input
           type="image"
           alt="${user.email}"
-          class="w-8 h-8 rounded-full border text-blue-50 md:text-white focus:outline"
+          class="w-8 h-8 rounded-full border text-primary md:text-white focus:outline"
           src="${user.avatar}"
           onclick="${e => this.avatarClick(e)}"
         />
@@ -95,7 +95,7 @@ class Account extends Component {
           <li class="p-2 text-grey-60 dark:text-grey-50">${user.email}</li>
           <li>
             <button
-              class="block w-full text-left px-4 py-2 text-grey-80 dark:text-grey-30 hover:bg-blue-50 hover:text-white cursor-pointer focus:outline"
+              class="block w-full text-left px-4 py-2 text-grey-80 dark:text-grey-30 hover:bg-primary hover:text-white cursor-pointer focus:outline"
               onclick="${e => this.logout(e)}"
               title="${translate('signOut')}"
             >

diff --git a/app/ui/archiveTile.js b/app/ui/archiveTile.js
@@ -53,7 +53,7 @@ function password(state) {
           id="password-input"
           class="${state.archive.password
             ? ''
-            : 'invisible'} border rounded focus:border-blue-60 leading-normal my-1 py-1 px-2 h-8 dark:bg-grey-80"
+            : 'invisible'} border rounded focus:border-primary leading-normal my-1 py-1 px-2 h-8 dark:bg-grey-80"
           autocomplete="off"
           maxlength="${MAX_LENGTH}"
           type="password"
@@ -150,7 +150,7 @@ function password(state) {
 function fileInfo(file, action) {
   return html`
     <send-file class="flex flex-row items-center p-3 w-full">
-      <svg class="h-8 w-8 text-white dark:text-grey-90">
+      <svg class="h-8 w-8 text-primary">
         <use xlink:href="${assets.get('blue_file.svg')}#icon"/>
       </svg>
       <p class="ml-4 w-full">
@@ -166,7 +166,7 @@ function fileInfo(file, action) {
 function archiveInfo(archive, action) {
   return html`
     <p class="w-full flex items-center">
-      <svg class="h-8 w-6 mr-3 flex-shrink-0 text-white dark:text-grey-90">
+      <svg class="h-8 w-6 mr-3 flex-shrink-0 text-primary">
         <use xlink:href="${assets.get('blue_file.svg')}#icon"/>
       </svg>
       <p class="flex-grow">
@@ -188,7 +188,7 @@ function archiveDetails(translate, archive) {
         ontoggle="${toggled}"
       >
         <summary
-          class="flex items-center link-blue text-sm cursor-pointer outline-none"
+          class="flex items-center link-primary text-sm cursor-pointer outline-none"
         >
           <svg
             class="fill-current w-4 h-4 mr-1"
@@ -218,7 +218,7 @@ module.exports = function(state, emit, archive) {
     state.capabilities.share || platform() === 'android'
       ? html`
           <button
-            class="link-blue self-end flex items-start"
+            class="link-primary self-end flex items-start"
             onclick=${share}
             title="Share link"
           >
@@ -230,7 +230,7 @@ module.exports = function(state, emit, archive) {
         `
       : html`
           <button
-            class="link-blue focus:outline self-end flex items-center"
+            class="link-primary focus:outline self-end flex items-center"
             onclick=${copy}
             title="${state.translate('copyLinkButton')}"
           >
@@ -244,7 +244,7 @@ module.exports = function(state, emit, archive) {
     platform() === 'web'
       ? html`
           <a
-            class="flex items-baseline link-blue"
+            class="flex items-baseline link-primary"
             href="${archive.url}"
             title="${state.translate('downloadButtonLabel')}"
             tabindex="0"
@@ -358,7 +358,7 @@ module.exports.wip = function(state, emit) {
             class="flex items-center cursor-pointer"
             title="${state.translate('addFilesButton')}"
           >
-            <svg class="w-6 h-6 mr-2 link-blue">
+            <svg class="w-6 h-6 mr-2 link-primary">
               <use xlink:href="${assets.get('addfiles.svg')}#plus" />
             </svg>
             ${state.translate('addFilesButton')}
@@ -448,12 +448,12 @@ module.exports.uploading = function(state, emit) {
           expiresAt: Date.now() + 500 + state.archive.timeLimit * 1000
         })}
       </div>
-      <div class="link-blue text-sm font-medium mt-2">
+      <div class="link-primary text-sm font-medium mt-2">
         ${progressPercent}
       </div>
       <progress class="my-3" value="${progress}">${progressPercent}</progress>
       <button
-        class="link-blue self-end font-medium"
+        class="link-primary self-end font-medium"
         onclick=${cancel}
         title="${state.translate('deletePopupCancel')}"
       >
@@ -475,7 +475,7 @@ module.exports.empty = function(state, emit) {
       ? ''
       : html`
           <button
-            class="center font-medium text-sm link-blue mt-4 mb-2"
+            class="center font-medium text-sm link-primary mt-4 mb-2"
             onclick="${event => {
               event.stopPropagation();
               emit('signup-cta', 'drop');
@@ -495,7 +495,7 @@ module.exports.empty = function(state, emit) {
         }
       }}"
     >
-      <svg class="w-10 h-10 link-blue">
+      <svg class="w-10 h-10 link-primary">
         <use xlink:href="/${assets.get('addfiles.svg')}#plus" />
       </svg>
       <div class="pt-6 pb-2 text-center text-lg font-bold tracking-wide">
@@ -531,11 +531,11 @@ module.exports.empty = function(state, emit) {
   `;
 
   function focus(event) {
-    event.target.nextElementSibling.classList.add('bg-blue-70', 'outline');
+    event.target.nextElementSibling.classList.add('bg-primary', 'outline');
   }
 
   function blur(event) {
-    event.target.nextElementSibling.classList.remove('bg-blue-70', 'outline');
+    event.target.nextElementSibling.classList.remove('bg-primary', 'outline');
   }
 
   function add(event) {
@@ -593,7 +593,7 @@ module.exports.downloading = function(state) {
       class="flex flex-col bg-white rounded shadow-light p-4 w-full max-w-sm md:w-128 dark:bg-grey-90"
     >
       ${archiveInfo(archive)}
-      <div class="link-blue text-sm font-medium mt-2">
+      <div class="link-primary text-sm font-medium mt-2">
         ${progressPercent}
       </div>
       <progress class="my-3" value="${progress}">${progressPercent}</progress>

diff --git a/app/ui/copyDialog.js b/app/ui/copyDialog.js
@@ -42,7 +42,7 @@ module.exports = function(name, url) {
           ${state.translate('copyLinkButton')}
         </button>
         <button
-          class="link-blue my-4 font-medium cursor-pointer focus:outline"
+          class="link-primary my-4 font-medium cursor-pointer focus:outline"
           onclick="${close}"
           title="${state.translate('okButton')}"
         >

diff --git a/app/ui/downloadCompleted.js b/app/ui/downloadCompleted.js
@@ -11,7 +11,9 @@ module.exports = function(state) {
       <h1 class="text-center text-3xl font-bold my-2">
         ${state.translate('downloadFinish')}
       </h1>
-      <img src="${assets.get('completed.svg')}" class="my-8 h-48" />
+      <svg class="my-8 h-48 text-primary">
+        <use xlink:href="${assets.get('completed.svg')}#Page-1" />
+      </svg>
       <p
         class="text-grey-80 leading-normal dark:text-grey-40 ${state.user
           .loggedIn

diff --git a/app/ui/error.js b/app/ui/error.js
@@ -13,7 +13,9 @@ module.exports = function(state, emit) {
         <h1 class="text-center text-3xl font-bold my-2">
           ${state.translate('errorPageHeader')}
         </h1>
-        <img class="my-12 h-48" src="${assets.get('error.svg')}" />
+        <svg class="text-primary my-12 h-48">
+          <use xlink:href="${assets.get('error.svg')}#svg114" />
+        </svg>
         <p
           class="max-w-md text-center text-grey-80 leading-normal dark:text-grey-40 ${state
             .user.loggedIn

diff --git a/app/ui/faviconProgressbar.js b/app/ui/faviconProgressbar.js
@@ -1,9 +1,11 @@
+/*global WEB_UI*/
+
 const { platform } = require('../utils');
 const assets = require('../../common/assets');
 
 const size = 32;
 const loaderWidth = 5;
-const loaderColor = '#0090ed';
+const loaderColor = WEB_UI.COLORS.PRIMARY;
 
 function drawCircle(canvas, context, color, lineWidth, outerWidth, percent) {
   canvas.width = canvas.height = outerWidth;
@@ -32,7 +34,10 @@ module.exports.updateFavicon = function(progressRatio) {
     const progress = progressRatio * 100;
     if (progress === 0 || progress === 100) {
       link.type = 'image/png';
-      link.href = assets.get('favicon-32x32.png');
+      link.href =
+        WEB_UI.CUSTOM_ASSETS.favicon_32px !== ''
+          ? WEB_UI.CUSTOM_ASSETS.favicon_32px
+          : assets.get('favicon-32x32.png');
       return;
     }