From a36114e904c8c32df0fc3c7c81371ef9b5261b1d Mon Sep 17 00:00:00 2001
From: Kalista Payne <sabrecat@gmail.com>
Date: Thu, 21 Nov 2024 12:37:02 -0600
Subject: [PATCH] Squashed commit of the following:

commit 4d88df1c381c4136cfe4780b6b5464d9c984bb31
Author: CuriousMagpie <eilatan@gmail.com>
Date:   Wed Oct 30 14:24:53 2024 -0400

    fixing active/focus states

commit 630f74db6365625af210de81d577d43945f62df4
Author: CuriousMagpie <eilatan@gmail.com>
Date:   Wed Oct 23 13:25:14 2024 -0400

    sign-up/login/debug menu updates

commit f85ef1c58e367219923c46aeebe77d1aa846b6f3
Author: CuriousMagpie <eilatan@gmail.com>
Date:   Tue Oct 15 13:56:36 2024 -0400

    more color standardization

commit cd2ee3350fc51016cc75fb799debeefa0b1d9b64
Author: CuriousMagpie <eilatan@gmail.com>
Date:   Tue Oct 15 13:39:02 2024 -0400

    updates per comments

commit e91371522bb9a6dae5c6d02eb6f16f0b632f7a24
Author: CuriousMagpie <eilatan@gmail.com>
Date:   Fri Oct 4 14:25:45 2024 -0400

    class selection active state

commit 4fcdca1eb07eb67aacd84feb1c9357d52fd6f23f
Author: CuriousMagpie <eilatan@gmail.com>
Date:   Thu Oct 3 14:31:00 2024 -0400

    fixing a few more buttons

commit 475e21aae7733cfa072f828c559cc0930f0ad878
Author: CuriousMagpie <eilatan@gmail.com>
Date:   Wed Oct 2 15:57:25 2024 -0400

    line-heights converted to unitless multipliers

commit c5dca257274a60b02e1f12e3c6daf103cec53096
Author: CuriousMagpie <eilatan@gmail.com>
Date:   Fri Sep 27 13:48:20 2024 -0400

    second pass

commit 685f4d4d64b8b234afbb702d1b8a52d4670d3825
Author: CuriousMagpie <eilatan@gmail.com>
Date:   Thu Sep 26 16:58:59 2024 -0400

    first pass
---
 website/client/src/assets/scss/button.scss    | 118 ++++++++++++------
 website/client/src/assets/scss/dropdown.scss  |  14 ++-
 .../components/achievements/chooseClass.vue   |   5 +
 .../user-support/privilegesAndGems.vue        |   2 +-
 website/client/src/components/appFooter.vue   |  82 ++++++++----
 .../challenges/leaveChallengeModal.vue        |   6 +-
 .../src/components/settings/subscription.vue  |   2 +
 .../client/src/components/shops/buyModal.vue  |  19 +--
 .../src/components/shops/market/sellModal.vue |  11 +-
 .../components/shops/quests/buyQuestModal.vue |  21 ++--
 .../client/src/components/static/header.vue   |   5 +-
 website/client/src/components/static/home.vue |  14 ++-
 .../tasks/modal-controls/selectMulti.vue      |   2 +-
 .../client/src/components/tasks/taskModal.vue |  28 +++--
 .../src/components/ui/filterDropdown.vue      |   8 +-
 website/client/src/pages/private-messages.vue |   8 +-
 16 files changed, 232 insertions(+), 113 deletions(-)

diff --git a/website/client/src/assets/scss/button.scss b/website/client/src/assets/scss/button.scss
index ae502322583..cc63efed970 100644
--- a/website/client/src/assets/scss/button.scss
+++ b/website/client/src/assets/scss/button.scss
@@ -3,9 +3,9 @@
   font-family: 'Roboto', sans-serif;
   font-size: 14px;
   font-weight: bold;
-  line-height: 1.71;
-  border: 1px solid transparent;
-  padding: 4px 12px;
+  line-height: 1.714;
+  border: 2px solid transparent;
+  padding: 2px 12px;
   border-radius: 4px;
   box-shadow: 0 1px 3px 0 rgba($black, 0.12), 0 1px 2px 0 rgba($black, 0.24);
   color: $white;
@@ -19,7 +19,7 @@
   }
 
   &:focus {
-    border-color: $purple-400;
+    box-shadow: 0 3px 6px 0 rgba($black, 0.16), 0 3px 6px 0 rgba($black, 0.24);
   }
 
   &:active, &.active:not(.btn-flat) {
@@ -30,9 +30,9 @@
     cursor: default;
     color: $gray-50;
     opacity: 0.75;
-    box-shadow: 0 1px 3px 0 rgba(26, 24, 29, 0.12), 0 1px 2px 0 rgba(26, 24, 29, 0.24);
+    box-shadow: none;
     background-color: $gray-700;
-    border: 1px solid transparent;
+    border: 2px solid transparent;
 
     .svg {
       color: $gray-300;
@@ -40,7 +40,7 @@
   }
 
   &.with-icon {
-    height: 2rem; // otherwise would something set the height to 33px
+    height: 32px; // otherwise would something set the height to 33px
     display: flex;
     flex-direction: row;
     align-items: center;
@@ -48,40 +48,47 @@
 }
 
 .btn-front {
+  border: none !important;
   font-size: 16px;
-  line-height: 1.5;
-  padding: 7.5px 15.5px;
+  padding: 2px 17px;
+
+  &:hover {
+    border: none !important;
+  }
 }
 
 .btn-primary {
   background: $purple-200;
-  border: 1px solid transparent;
+  border: 2px solid transparent;
+  line-height: 1.714;
   --icon-color: #{$purple-500};
 
   &:focus {
     background: $purple-200;
-    border-color: $purple-400;
+    border: 2px solid $purple-400;
+    box-shadow: 0 3px 6px 0 rgba($black, 0.16), 0 3px 6px 0 rgba($black, 0.24);
     --icon-color: #{$white};
   }
 
   &:not(:disabled):not(.disabled) {
     &:hover {
-      background: #5d3b9c;
-      border: 1px solid transparent;
+      background: $purple-200;
+      border: 2px solid transparent;
 
       --icon-color: #{$white};
     }
 
     &:active, &.active {
       background: $purple-200;
-      border: 1px solid transparent;
+      border: 2px solid transparent;
+      box-shadow: none;
 
       --icon-color: #{$white};
     }
 
     &:active:focus, &.active:focus {
       box-shadow: none;
-      border-color: $purple-400;
+      border: 2px solid $purple-400;
     }
   }
 
@@ -97,39 +104,43 @@
 .show > .btn-secondary.dropdown-toggle:not(.btn-success)
 {
   background: $white;
-  border: 1px solid transparent;
+  border: 2px solid transparent;
   color: $gray-50;
 
   --icon-color: #{$gray-200};
 
   &:focus, &:active {
-    color: $gray-50;
     background: $white;
-    border-color: $purple-400;
+    border: 2px solid $purple-400;
+    color: $gray-50;
 
     --icon-color: #{$purple-300};
   }
 
   &:not(:disabled):not(.disabled) {
     &:active, &.active {
+      background: $white;
+      border: 2px solid $purple-400;
       color: $purple-300;
       --icon-color: #{$purple-300};
 
       &:focus {
         color: $purple-300;
+        border: 2px solid $purple-400;
+        box-shadow: 0 3px 6px 0 rgba($black, 0.16), 0 3px 6px 0 rgba($black, 0.24);
+      }
+
+      &:active {
         box-shadow: none;
-        border-color: $purple-400;
       }
 
-      background: $white;
-      border: 1px solid transparent;
     }
 
     &:hover {
       color: $purple-300;
 
       background: $white !important;
-      border: 1px solid transparent;
+      border: 2px solid transparent;
 
       --icon-color: #{$purple-300};
       .svg {
@@ -151,91 +162,116 @@
 
 .btn-danger {
   background: $maroon-100;
-  border: 1px solid transparent;
+  border: 2px solid transparent;
+  box-shadow: 0 1px 3px 0 rgba($black, 0.16), 0 1px 3px 0 rgba($black, 0.24);
+
 
   &:hover:not(:disabled):not(.disabled) {
-    background: #e14e4e;
-    border: 1px solid transparent;
+    background: $maroon-100;
+    border: 2px solid transparent;
+    box-shadow: 0 3px 6px 0 rgba($black, 0.16), 0 3px 6px 0 rgba($black, 0.24);
   }
 
   &:focus {
     background: $maroon-100;
-    border-color: $purple-400;
+    border: 2px solid $purple-400;
   }
 
   &:not(:disabled):not(.disabled):active:focus, &:not(:disabled):not(.disabled).active:focus {
     box-shadow: none;
-    border-color: $purple-400;
+    border: 2px solid $purple-400;
   }
 
   &:not(:disabled):not(.disabled):active, &:not(:disabled):not(.disabled).active {
     background: $maroon-100;
-    border: 1px solid transparent;
+    border: 2px solid $purple-400;
   }
 }
 
 .btn-warning {
   background: $orange-10;
+  box-shadow: 0 1px 3px 0 rgba($black, 0.16), 0 1px 3px 0 rgba($black, 0.24);
   color: $white !important;
 
   &:hover:not(:disabled):not(.disabled) {
-    background: $orange-100;
+    background: $orange-10;
     color: $white;
   }
 
   &:focus {
     background: $orange-10;
-    border-color: $purple-400;
+    border: 2px solid $purple-400;
   }
 
   &:not(:disabled):not(.disabled):active:focus, &:not(:disabled):not(.disabled).active:focus {
+    border: 2px solid $purple-400;
     box-shadow: none;
-    border-color: $purple-400;
   }
 
   &:not(:disabled):not(.disabled):active, &:not(:disabled):not(.disabled).active {
     background: $orange-10;
+    box-shadow: none;
   }
 }
 
 .btn-success {
   background: $green-50;
-  border: 1px solid transparent;
+  border: 2px solid transparent;
 
   &:hover:not(:disabled):not(.disabled) {
-    background: #32bd8a;
-    border: 1px solid transparent;
+    background: $green-50;
+    border: 2px solid transparent;
+    box-shadow: 0 3px 6px 0 rgba($black, 0.16), 0 3px 6px 0 rgba($black, 0.24);
   }
 
   &:focus {
     background: $green-50;
-    border-color: $purple-400;
+    border: 2px solid $purple-400;
+    box-shadow: 0 3px 6px 0 rgba($black, 0.16), 0 3px 6px 0 rgba($black, 0.24);
   }
 
   &:not(:disabled):not(.disabled):active:focus, &:not(:disabled):not(.disabled).active:focus {
+    border: 2px solid $purple-400;
     box-shadow: none;
-    border-color: $purple-400;
   }
 
   &:not(:disabled):not(.disabled):active, &:not(:disabled):not(.disabled).active {
     background: $green-50;
-    border: 1px solid transparent;
+    border: 2px solid $purple-400;
+    box-shadow: none;
   }
 }
 
 .btn-info {
   background: $blue-50;
+  border: 2px solid transparent;
+  box-shadow: 0 1px 3px 0 rgba($black, 0.16), 0 1px 3px 0 rgba($black, 0.24);
 
   &:disabled {
     background: $blue-50;
+    box-shadow: none;
+  }
+
+  &:hover {
+    border: 2px solid transparent;
+    box-shadow: 0 3px 6px 0 rgba($black, 0.16), 0 3px 6px 0 rgba($black, 0.24);
+  }
+
+  &:focus {
+    background: $blue-100;
+    border: 2px solid $purple-400;
+    box-shadow: 0 3px 6px 0 rgba($black, 0.16), 0 3px 6px 0 rgba($black, 0.24);
   }
 
   &:hover:not(:disabled):not(.disabled) {
     background-color: $blue-100;
+    box-shadow: 0 3px 6px 0 rgba($black, 0.16), 0 3px 6px 0 rgba($black, 0.24);
   }
 
   &:active:not(:disabled):not(.disabled), &.active:not(:disabled):not(.disabled) {
-    background: $blue-50;
+    background: $blue-100;
+    border: 2px solid $purple-400;
+    box-shadow: 0 3px 6px 0 rgba($black, 0.16), 0 3px 6px 0 rgba($black, 0.24);
   }
 }
 
@@ -244,7 +280,7 @@
   width: 100%;
   padding: 8px;
   font-size: 14px;
-  line-height: 1.43;
+  line-height: 1.714;
   font-weight: bold;
   text-align: center;
   background: $gray-500;
@@ -268,6 +304,6 @@
 
 .btn-small {
   font-size: 12px;
-  line-height: 1.33;
-  padding: 4px 8px;
+  line-height: 2;
+  padding: 2px 2px;
 }
diff --git a/website/client/src/assets/scss/dropdown.scss b/website/client/src/assets/scss/dropdown.scss
index f619baf1128..5626947a214 100644
--- a/website/client/src/assets/scss/dropdown.scss
+++ b/website/client/src/assets/scss/dropdown.scss
@@ -1,8 +1,9 @@
 .dropdown > .btn {
-  padding: 0.219rem 0.75rem;
   font-family: 'Roboto', sans-serif;
   font-size: 14px;
   font-weight: normal;
+  line-height: 1.714;
+  padding: 2px 12px;
 }
 
 .dropdown-toggle:hover {
@@ -33,10 +34,10 @@
 }
 
 .dropdown-menu {
-  padding: 0px;
-  border: none;
+  border: transparent;
   border-radius: 2px;
-  box-shadow: 0 3px 6px 0 rgba(26, 24, 29, 0.16), 0 3px 6px 0 rgba(26, 24, 29, 0.24);
+  box-shadow: 0 3px 6px 0 rgba($black, 0.16), 0 3px 6px 0 rgba($black, 0.24);
+  padding: 0;
 
 }
 
@@ -113,6 +114,10 @@
 }
 
 .dropdown-icon-item {
+  line-height: 1;
+  padding-top: 2px !important;
+  padding-bottom: 2px !important;
+
   .svg-icon {
     margin: 0px 16px 0px 0px;
     vertical-align: middle;
@@ -128,7 +133,6 @@
 
   .dropdown-toggle {
     width: 100% !important;
-    height: 32px;
     text-align: left;
   }
 
diff --git a/website/client/src/components/achievements/chooseClass.vue b/website/client/src/components/achievements/chooseClass.vue
index 60f81a857a7..5e3a0be7dcd 100644
--- a/website/client/src/components/achievements/chooseClass.vue
+++ b/website/client/src/components/achievements/chooseClass.vue
@@ -105,6 +105,11 @@
 <style lang="scss" scoped>
   @import '~@/assets/scss/colors.scss';
 
+  .btn-primary:active {
+      border: 2px solid $purple-400 !important;
+      box-shadow: none !important;
+    }
+
   .class-badge {
     $badge-size: 32px;
 
diff --git a/website/client/src/components/admin-panel/user-support/privilegesAndGems.vue b/website/client/src/components/admin-panel/user-support/privilegesAndGems.vue
index 36609ea1251..cb72a6e6c1d 100644
--- a/website/client/src/components/admin-panel/user-support/privilegesAndGems.vue
+++ b/website/client/src/components/admin-panel/user-support/privilegesAndGems.vue
@@ -7,7 +7,7 @@
           :class="{'open': expand}"
           @click="expand = !expand"
         >
-          Priviliges, Gem Balance
+          Privileges, Gem Balance
         </h3>
       </div>
       <div
diff --git a/website/client/src/components/appFooter.vue b/website/client/src/components/appFooter.vue
index 949a1025d44..b099b4bdf21 100644
--- a/website/client/src/components/appFooter.vue
+++ b/website/client/src/components/appFooter.vue
@@ -186,7 +186,7 @@
       </div>
       <div class="donate-button">
         <button
-          class="button btn-contribute"
+          class="btn button btn-secondary btn-contribute"
           @click="donate()"
         >
           <div class="text">
@@ -309,7 +309,7 @@
         <div class="my-2">
           Time Traveling! It is {{ new Date().toLocaleDateString() }}
           <a
-            class="btn btn-warning btn-small"
+            class="btn btn-small"
             @click="resetTime()"
           >
             Reset
@@ -341,7 +341,7 @@
         </button>
         <div
           v-if="debugMenuShown"
-          class="debug-toggle debug-group"
+          class="btn debug-toggle debug-group"
         >
           <div class="debug-pop">
             <a
@@ -512,7 +512,14 @@ li {
   grid-area: debug-pop;
    }
 
-.time-travel { grid-area: time-travel;}
+.time-travel {
+  grid-area: time-travel;
+
+  a:hover {
+    text-decoration: none !important;
+  }
+
+}
 
 footer {
   background-color: $gray-500;
@@ -584,42 +591,65 @@ h3 {
 }
 
 .debug {
-  margin-top: 16px;
+  border: 2px solid transparent;
+  box-shadow: 0 1px 3px 0 rgba($black, 0.12), 0 1px 2px 0 rgba($black, 0.24);
   display: flex;
   justify-content: center;
+  margin-top: 16px;
+  padding: 2px 12px;
+
+  &:hover {
+    box-shadow: 0 3px 6px 0 rgba($black, 0.12), 0 3px 6px 0 rgba($black, 0.24);
+  }
+  &:focus  {
+    border: 2px solid $purple-400 !important;
+    box-shadow: 0 3px 6px 0 rgba($black, 0.12), 0 3px 6px 0 rgba($black, 0.24);
+  }
+  :active {
+    border: 2px solid $purple-600 !important;
+    box-shadow: none;
+  }
 }
 
 .debug-group {
+  background-color: $gray-600;
+  border: 2px solid transparent;
   border-radius: 4px;
-  padding: 16px;
-  box-shadow: 0 1px 3px 0 rgba(26, 24, 29, 0.12), 0 1px 2px 0 rgba(26, 24, 29, 0.24);
+  box-shadow: 0 1px 3px 0 rgba($black, 0.12), 0 1px 2px 0 rgba($black, 0.24);
   font-weight: 700;
-  background-color: $gray-600;
+  padding: 8px 16px;
 
  .btn {
   margin: 2px;
   }
+
+  a:hover {
+    border: 2px solid transparent;
+    box-shadow: 0 1px 3px 0 rgba($black, 0.12), 0 1px 2px 0 rgba($black, 0.24);
+    text-decoration: none !important;
+  }
 }
 
-.btn-contribute {
-  background: $white;
-  border-radius: 2px;
-  width: 175px;
-  height: 32px;
-  color: $gray-50;
-  text-align: center;
-  vertical-align: middle;
-  padding: 0;
-  margin: 0;
-    &:hover {
-      color:$purple-300;
-      box-shadow: 0 3px 6px 0 rgba(26, 24, 29, 0.16), 0 3px 6px 0 rgba(26, 24, 29, 0.24);
-    &:active:not(:disabled) {
-      color:$purple-300;
-      border: 1px solid $purple-400;
-      box-shadow: 0 3px 6px 0 rgba(26, 24, 29, 0.16), 0 3px 6px 0 rgba(26, 24, 29, 0.24);
-    }
+.btn-small {
+  background-color: $maroon-100;
+  border: 2px solid transparent;
+  color: $white !important;
+  line-height: 18px;
+  &:hover {
+    background-color: $maroon-100;
+    text-decoration: none !important;
+    border: 2px solid $maroon-100;
   }
+}
+.btn-secondary {
+  padding: 2px 12px;
+}
+.btn-secondary a:hover {
+  text-decoration: none !important;
+}
+
+.btn-contribute {
+  border: 2px solid transparent;
 
   a {
     display: flex;
diff --git a/website/client/src/components/challenges/leaveChallengeModal.vue b/website/client/src/components/challenges/leaveChallengeModal.vue
index 87386512e12..5f30d6bedb5 100644
--- a/website/client/src/components/challenges/leaveChallengeModal.vue
+++ b/website/client/src/components/challenges/leaveChallengeModal.vue
@@ -25,9 +25,13 @@
   </b-modal>
 </template>
 
-<style scoped>
+<style scoped lang="scss">
   .modal-body {
     padding-bottom: 2em;
+
+    .btn {
+      margin: 0px 2px;
+    }
   }
 </style>
 
diff --git a/website/client/src/components/settings/subscription.vue b/website/client/src/components/settings/subscription.vue
index 51b61a5735a..4c89a083c6c 100644
--- a/website/client/src/components/settings/subscription.vue
+++ b/website/client/src/components/settings/subscription.vue
@@ -429,6 +429,7 @@
   }
 
   .btn-update-card {
+    line-height: 1.714;
     border-radius: 4px;
     font-size: 14px;
     padding: 4px 12px;
@@ -647,6 +648,7 @@
     border-radius: 8px;
     box-shadow: 0px 1px 3px 0px rgba($black, 0.12), 0px 1px 2px 0px rgba($black, 0.24);
     width: 448px;
+    background-color: $white;
   }
 
   .svg-amazon-pay {
diff --git a/website/client/src/components/shops/buyModal.vue b/website/client/src/components/shops/buyModal.vue
index 349f129cb8d..efad7fdee64 100644
--- a/website/client/src/components/shops/buyModal.vue
+++ b/website/client/src/components/shops/buyModal.vue
@@ -378,7 +378,7 @@
         height: 40px;
         border-radius: 2px;
         background-color: $white;
-        box-shadow: 0 2px 2px 0 rgba(26, 24, 29, 0.16), 0 1px 4px 0 rgba(26, 24, 29, 0.12);
+        box-shadow: 0 2px 2px 0 rgba($black, 0.16), 0 1px 4px 0 rgba($black, 0.12);
         margin-right: 24px;
 
         input {
@@ -462,17 +462,17 @@
 
       &.gems {
         color: $green-10;
-        background-color: rgba(36, 204, 143, 0.15);
+        background-color: rgba($green-100, 0.15);
       }
 
       &.gold {
         color: $yellow-5;
-        background-color: rgba(255, 190, 93, 0.15);
+        background-color: rgba($yellow-100, 0.15);
       }
 
       &.hourglasses {
         color: $hourglass-color;
-        background-color: rgba(41, 149, 205, 0.15);
+        background-color: rgba($blue-10, 0.15);
       }
     }
 
@@ -516,11 +516,16 @@
 
     button.btn.btn-primary {
       margin-top: 16px;
-      padding: 4px 16px;
-      height: 32px;
+      padding: 2px 12px;
+      line-height: 1.714;
 
       &:focus {
-        border: 2px solid black;
+        border: 2px solid $purple-400;
+      }
+
+      &:active {
+        border: 2px solid $purple-400 !important;
+        box-shadow:none;
       }
     }
 
diff --git a/website/client/src/components/shops/market/sellModal.vue b/website/client/src/components/shops/market/sellModal.vue
index 1f839c8fca9..b12f10215a1 100644
--- a/website/client/src/components/shops/market/sellModal.vue
+++ b/website/client/src/components/shops/market/sellModal.vue
@@ -297,11 +297,16 @@
 
     button.btn.btn-primary {
       margin-top: 16px;
-      padding: 4px 16px;
-      height: 32px;
+      padding: 2px 12px;
+      line-height: 1.714;
 
       &:focus {
-        border: 2px solid black;
+        border: 2px solid $purple-400;
+      }
+
+      &:active {
+        border: 2px solid $purple-400;
+        box-shadow: none;
       }
 
       .balance {
diff --git a/website/client/src/components/shops/quests/buyQuestModal.vue b/website/client/src/components/shops/quests/buyQuestModal.vue
index 4981c9a94f9..15faf6f1012 100644
--- a/website/client/src/components/shops/quests/buyQuestModal.vue
+++ b/website/client/src/components/shops/quests/buyQuestModal.vue
@@ -198,7 +198,7 @@
       top: 25px;
       border-radius: 8px;
       background-color: $gray-600;
-      box-shadow: 0 2px 16px 0 rgba(26, 24, 29, 0.32);
+      box-shadow: 0 2px 16px 0 rgba($black, 0.32);
       display: flex;
       align-items: center;
       flex-direction: column;
@@ -208,12 +208,17 @@
     }
 
     button.btn.btn-primary {
-      margin-top: 14px;
-      padding: 4px 16px;
-      height: 32px;
+      margin-top: 16px;
+      padding: 2px 12px;
+      line-height: 1.714;
 
       &:focus {
-        border: 2px solid black;
+        border: 2px solid $purple-400;
+      }
+
+      &:active {
+        border: 2px solid $purple-400;
+        box-shadow: none;
       }
     }
 
@@ -249,7 +254,7 @@
 
           &.gems {
             color: $green-10;
-            background-color: rgba(36, 204, 143, 0.15);
+            background-color: rgba($green-100, 0.15);
             line-height: 1.4;
             margin: 0 0 0 -4px;
             border-radius: 20px;
@@ -257,7 +262,7 @@
 
           &.gold {
             color: $yellow-5;
-            background-color: rgba(255, 190, 93, 0.15);
+            background-color: rgba($yellow-100, 0.15);
             line-height: 1.4;
             margin: 0 0 0 -4px;
             border-radius: 20px;
@@ -265,7 +270,7 @@
 
           &.hourglasses {
             color: $hourglass-color;
-            background-color: rgba(41, 149, 205, 0.15);
+            background-color: rgba($blue-10, 0.15);
             line-height: 1.4;
             margin: 0 0 0 -4px;
             border-radius: 20px;
diff --git a/website/client/src/components/static/header.vue b/website/client/src/components/static/header.vue
index 339c3678c7c..6edf7ac9f54 100644
--- a/website/client/src/components/static/header.vue
+++ b/website/client/src/components/static/header.vue
@@ -152,8 +152,11 @@
   }
 
   .btn-primary.pull-right {
-    height: 2.5em;
+    line-height: 2.25;
     margin: auto 0px auto auto;
+    &:focus, :active {
+      border: 2px solid $purple-400;
+    }
   }
 
   nav.navbar {
diff --git a/website/client/src/components/static/home.vue b/website/client/src/components/static/home.vue
index 89f17756b21..534ca417f4f 100644
--- a/website/client/src/components/static/home.vue
+++ b/website/client/src/components/static/home.vue
@@ -552,8 +552,16 @@
     }
 
     .sign-up {
+      border: 2px solid transparent;
+      box-shadow: 0 1px 3px 0 rgba($black, 0.16), 0 1px 3px 0 rgba($black, 0.24);
       padding-top: 11px;
       padding-bottom: 11px;
+
+      &:focus, &:active {
+        background-color: $blue-50;
+        border: 2px solid $purple-400;
+        box-shadow: 0 3px 6px 0 rgba($black, 0.16), 0 3px 6px 0 rgba($black, 0.24);
+      }
     }
 
     ::-webkit-input-placeholder { /* Chrome/Opera/Safari */
@@ -650,9 +658,9 @@
     .btn-primary {
       width: 411px;
       height: 48px;
-      border-radius: 2px;
+      border-radius: 4px;
       background-color: $purple-400;
-      box-shadow: 0 2px 2px 0 rgba(26, 24, 29, 0.24), 0 1px 4px 0 rgba(26, 24, 29, 0.16);
+      box-shadow: 0 2px 2px 0 rgba($black, 0.24), 0 1px 4px 0 rgba($black, 0.16);
       margin-bottom: 5em;
     }
 
@@ -669,7 +677,7 @@
 
       &:hover {
         background-color: $purple-50;
-        box-shadow: 0 4px 4px 0 rgba(26, 24, 29, 0.16), 0 1px 8px 0 rgba(26, 24, 29, 0.12);
+        box-shadow: 0 4px 4px 0 rgba($black, 0.16), 0 1px 8px 0 rgba($black, 0.12);
       }
     }
 
diff --git a/website/client/src/components/tasks/modal-controls/selectMulti.vue b/website/client/src/components/tasks/modal-controls/selectMulti.vue
index 727d45c878f..b8375f184e5 100644
--- a/website/client/src/components/tasks/modal-controls/selectMulti.vue
+++ b/website/client/src/components/tasks/modal-controls/selectMulti.vue
@@ -88,7 +88,7 @@ $itemHeight: 2rem;
 
 .inline-dropdown {
   &.select-multi .dropdown-toggle {
-    height: auto;
+    line-height: 1.571;
     padding-bottom: 0px;
   }
 }
diff --git a/website/client/src/components/tasks/taskModal.vue b/website/client/src/components/tasks/taskModal.vue
index 8d5c467e5cf..80a22ecc570 100644
--- a/website/client/src/components/tasks/taskModal.vue
+++ b/website/client/src/components/tasks/taskModal.vue
@@ -651,9 +651,9 @@
 
     input, textarea {
       transition-property: border-color, box-shadow, color, background;
-      background-color: rgba(255, 255, 255, 0.5);
+      background-color: rgba($white, 0.5);
       &:focus:not(:disabled), &:active:not(:disabled), &:hover:not(:disabled) {
-        background-color: rgba(255, 255, 255, 0.75);
+        background-color: rgba($white, 0.75);
       }
     }
 
@@ -810,11 +810,7 @@
         margin-right: 16px;
         color: $blue-10;
       }
-
-      .btn-footer {
-        height: 2rem;
-      }
-    }
+  }
 
     .weekday-check {
       margin-left: 0px;
@@ -884,6 +880,24 @@
         margin-bottom: 0;
       }
     }
+
+    .disabled {
+      background-color: $white;
+      border: 2px solid transparent;
+      color: $gray-200;
+      line-height: 1.714;
+      box-shadow: 0px 1px 3px 0px rgba(26, 24, 29, 0.12), 0px 1px 2px 0px rgba(26, 24, 29, 0.24);
+
+      &:focus {
+        background-color: $white;
+        border: 2px solid $purple-400;
+        box-shadow: none;
+      }
+
+      &:active {
+        box-shadow: 0px 1px 3px 0px rgba(26, 24, 29, 0.12), 0px 1px 2px 0px rgba(26, 24, 29, 0.24);
+      }
+    }
   }
 
   @media only screen and (max-width: 768px) {
diff --git a/website/client/src/components/ui/filterDropdown.vue b/website/client/src/components/ui/filterDropdown.vue
index 75411467b32..68f0975c8a4 100644
--- a/website/client/src/components/ui/filterDropdown.vue
+++ b/website/client/src/components/ui/filterDropdown.vue
@@ -12,7 +12,9 @@
       @select="selectItem($event)"
     >
       <template #item="{ item }">
-        <span :class="{'dropdown-icon-item': withIcon}">
+        <span
+          :class="{'dropdown-icon-item': withIcon}"
+        >
           <slot
             name="item"
             :item="item"
@@ -54,7 +56,3 @@ export default {
   },
 };
 </script>
-
-<style scoped lang="scss">
-
-</style>
diff --git a/website/client/src/pages/private-messages.vue b/website/client/src/pages/private-messages.vue
index 581970297be..70d48a0baf4 100644
--- a/website/client/src/pages/private-messages.vue
+++ b/website/client/src/pages/private-messages.vue
@@ -446,7 +446,6 @@
     padding: 1.5rem;
 
     .guidelines {
-      height: 32px;
       font-size: 12px;
       font-weight: normal;
       font-style: normal;
@@ -459,9 +458,10 @@
     }
 
     button {
-      height: 40px;
-      border-radius: 2px;
+      border-radius: 4px;
+      line-height: 1.714;
       margin-left: 1.5rem;
+      padding: 2px 12px;
 
       &.disabled {
         cursor: default;
@@ -540,7 +540,7 @@
     z-index: 1;
     pointer-events: none;
 
-    box-shadow: 0 3px 12px 0 rgba(26, 24, 29, 0.24);
+    box-shadow: 0 3px 12px 0 rgba($black, 0.24);
   }
 
   .center-avatar {