Dark theme

datagovsg · Oct 4, 2019 · c71c246 · c71c246
1 parent ea1ea2a
commit c71c246
Show file tree

Hide file tree

Showing 37 changed files with 363 additions and 215 deletions.
diff --git 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
@@ -60,9 +60,7 @@ function body(main) {
       </a>`;
     */
     return html`
-      <body
-        class="flex flex-col items-center font-sans bg-grey-lightest h-screen"
-      >
+      <body class="flex flex-col items-center font-sans bg-grey-10 h-screen">
         ${state.cache(Header, 'header').render()} ${main(state, emit)}
       </body>
     `;

diff --git a/android/pages/home.js b/android/pages/home.js
@@ -25,7 +25,7 @@ module.exports = function(state, emit) {
   let content = '';
   let button = html`
     <div
-      class="bg-blue rounded-full m-4 flex items-center justify-center shadow-lg"
+      class="bg-blue-50 rounded-full m-4 flex items-center justify-center shadow-lg"
       style="width: 56px; height: 56px"
       onclick="${onclick}"
     >

diff --git 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
@@ -64,8 +64,7 @@ class Account extends Component {
       return html`
         <send-account>
           <button
-            class="px-4 py-2 md:px-8 md:py-4 focus:outline signin ${this
-              .buttonClass}"
+            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"
             onclick="${e => this.login(e)}"
             title="${translate('signInOnlyButton')}"
           >
@@ -79,19 +78,19 @@ class Account extends Component {
         <input
           type="image"
           alt="${user.email}"
-          class="w-8 h-8 rounded-full border text-blue md:text-white focus:outline"
+          class="w-8 h-8 rounded-full border text-blue-50 md:text-white focus:outline"
           src="${user.avatar}"
           onclick="${e => this.avatarClick(e)}"
         />
         <ul
           id="accountMenu"
-          class="invisible absolute top-0 right-0 mt-10 pt-2 pb-2 bg-white shadow-md whitespace-no-wrap outline-none z-50"
+          class="invisible absolute top-0 right-0 mt-10 pt-2 pb-2 bg-white shadow-md whitespace-no-wrap outline-none z-50 dark:bg-grey-80"
           onblur="${e => this.hideMenu(e)}"
         >
-          <li class="p-2 text-grey-dark">${user.email}</li>
+          <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-darkest hover:bg-blue 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-blue-50 hover:text-white cursor-pointer focus:outline"
               onclick="${e => this.logout(e)}"
               title="${translate('signOut')}"
             >