From 0745c719339c182cafe824322e2445e60ac2aae5 Mon Sep 17 00:00:00 2001
From: CuriousMagpie <eilatan@gmail.com>
Date: Thu, 26 Sep 2024 16:58:59 -0400
Subject: [PATCH 1/2] first pass

---
 website/client/src/assets/scss/button.scss    | 85 +++++++++++--------
 website/client/src/assets/scss/dropdown.scss  |  8 +-
 .../user-support/privilegesAndGems.vue        |  2 +-
 website/client/src/components/appFooter.vue   | 47 ++++++++--
 .../src/components/settings/subscription.vue  |  2 +-
 .../client/src/components/static/header.vue   |  2 +-
 .../src/components/ui/filterDropdown.vue      | 21 ++++-
 7 files changed, 114 insertions(+), 53 deletions(-)

diff --git a/website/client/src/assets/scss/button.scss b/website/client/src/assets/scss/button.scss
index ae502322583..e3a063ecd98 100644
--- a/website/client/src/assets/scss/button.scss
+++ b/website/client/src/assets/scss/button.scss
@@ -3,15 +3,15 @@
   font-family: 'Roboto', sans-serif;
   font-size: 14px;
   font-weight: bold;
-  line-height: 1.71;
-  border: 1px solid transparent;
-  padding: 4px 12px;
+  line-height: 24px;
+  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;
 
   &:hover, &:focus {
-    box-shadow: 0 3px 6px 0 rgba($black, 0.16), 0 3px 6px 0 rgba($black, 0.24);
+    box-shadow: 0px 3px 6px 0px rgba(26, 24, 29, 0.16), 0px 3px 6px 0px rgba(26, 24, 29, 0.24);
 
     &.btn-flat {
       box-shadow: none;
@@ -19,7 +19,9 @@
   }
 
   &:focus {
+    border: 2px solid $purple-200;
     border-color: $purple-400;
+    box-shadow: 0px 3px 6px 0px rgba(26, 24, 29, 0.16), 0px 3px 6px 0px rgba(26, 24, 29, 0.24);
   }
 
   &:active, &.active:not(.btn-flat) {
@@ -32,7 +34,7 @@
     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);
     background-color: $gray-700;
-    border: 1px solid transparent;
+    border: 2px solid transparent;
 
     .svg {
       color: $gray-300;
@@ -40,7 +42,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;
@@ -49,39 +51,41 @@
 
 .btn-front {
   font-size: 16px;
-  line-height: 1.5;
+  line-height: 28px;
   padding: 7.5px 15.5px;
 }
 
 .btn-primary {
   background: $purple-200;
-  border: 1px solid transparent;
+  border: 2px solid transparent;
+  line-height: 24px;
   --icon-color: #{$purple-500};
 
   &:focus {
     background: $purple-200;
-    border-color: $purple-400;
+    border: 2px solid $purple-400;
+    box-shadow: 0px 3px 6px 0px rgba(26, 24, 29, 0.16), 0px 3px 6px 0px rgba(26, 24, 29, 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;
 
       --icon-color: #{$white};
     }
 
     &:active:focus, &.active:focus {
-      box-shadow: none;
-      border-color: $purple-400;
+      box-shadow: 0px 3px 6px 0px rgba(26, 24, 29, 0.16), 0px 3px 6px 0px rgba(26, 24, 29, 0.24);
+      border: 2px solid $purple-200;
     }
   }
 
@@ -97,7 +101,7 @@
 .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};
@@ -105,7 +109,8 @@
   &:focus, &:active {
     color: $gray-50;
     background: $white;
-    border-color: $purple-400;
+    border: 2px solid $purple-200;
+    box-shadow: 0px 3px 6px 0px rgba(26, 24, 29, 0.16), 0px 3px 6px 0px rgba(26, 24, 29, 0.24);
 
     --icon-color: #{$purple-300};
   }
@@ -117,19 +122,19 @@
 
       &:focus {
         color: $purple-300;
-        box-shadow: none;
-        border-color: $purple-400;
+        border: 2px solid $purple-200;
+        box-shadow: 0px 3px 6px 0px rgba(26, 24, 29, 0.16), 0px 3px 6px 0px rgba(26, 24, 29, 0.24);
       }
 
       background: $white;
-      border: 1px solid transparent;
+      border: 2px solid transparent;
     }
 
     &:hover {
       color: $purple-300;
 
       background: $white !important;
-      border: 1px solid transparent;
+      border: 2px solid transparent;
 
       --icon-color: #{$purple-300};
       .svg {
@@ -151,46 +156,50 @@
 
 .btn-danger {
   background: $maroon-100;
-  border: 1px solid transparent;
+  border: 2px solid transparent;
+  box-shadow: 0px 1px 3px 0px rgba(26, 24, 29, 0.16), 0px 1px 2px 0px rgba(26, 24, 29, 0.24);
+
 
   &:hover:not(:disabled):not(.disabled) {
-    background: #e14e4e;
-    border: 1px solid transparent;
+    background: $maroon-100;
+    border: 2px solid $purple-200;
+    box-shadow: 0px 3px 6px 0px rgba(26, 24, 29, 0.16), 0px 3px 6px 0px rgba(26, 24, 29, 0.24);
   }
 
   &:focus {
     background: $maroon-100;
-    border-color: $purple-400;
+    border: 2px solid $purple-200;
   }
 
   &:not(:disabled):not(.disabled):active:focus, &:not(:disabled):not(.disabled).active:focus {
     box-shadow: none;
-    border-color: $purple-400;
+    border: 2px solid $purple-200;
   }
 
   &:not(:disabled):not(.disabled):active, &:not(:disabled):not(.disabled).active {
     background: $maroon-100;
-    border: 1px solid transparent;
+    border: 2px solid transparent;
   }
 }
 
 .btn-warning {
   background: $orange-10;
+  box-shadow: 0px 1px 3px 0px rgba(26, 24, 29, 0.16), 0px 1px 26px 0px rgba(26, 24, 29, 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-200;
   }
 
   &:not(:disabled):not(.disabled):active:focus, &:not(:disabled):not(.disabled).active:focus {
-    box-shadow: none;
-    border-color: $purple-400;
+    border: 2px solid $purple-200;
+    box-shadow: 0px 3px 6px 0px rgba(26, 24, 29, 0.16), 0px 3px 6px 0px rgba(26, 24, 29, 0.24);
   }
 
   &:not(:disabled):not(.disabled):active, &:not(:disabled):not(.disabled).active {
@@ -200,26 +209,28 @@
 
 .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: 0px 3px 6px 0px rgba(26, 24, 29, 0.16), 0px 3px 6px 0px rgba(26, 24, 29, 0.24);
   }
 
   &:focus {
     background: $green-50;
-    border-color: $purple-400;
+    border: 2px solid $purple-200;
+    box-shadow: 0px 3px 6px 0px rgba(26, 24, 29, 0.16), 0px 3px 6px 0px rgba(26, 24, 29, 0.24);
   }
 
   &:not(:disabled):not(.disabled):active:focus, &:not(:disabled):not(.disabled).active:focus {
-    box-shadow: none;
-    border-color: $purple-400;
+    border: 2px solid $purple-200;
+    box-shadow: 0px 3px 6px 0px rgba(26, 24, 29, 0.16), 0px 3px 6px 0px rgba(26, 24, 29, 0.24);
   }
 
   &:not(:disabled):not(.disabled):active, &:not(:disabled):not(.disabled).active {
     background: $green-50;
-    border: 1px solid transparent;
+    border: 2px solid transparent;
   }
 }
 
diff --git a/website/client/src/assets/scss/dropdown.scss b/website/client/src/assets/scss/dropdown.scss
index f619baf1128..711fdf2208c 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: 24px;
+  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);
+  padding: 0;
 
 }
 
@@ -128,7 +129,6 @@
 
   .dropdown-toggle {
     width: 100% !important;
-    height: 32px;
     text-align: left;
   }
 
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..b2084eab342 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,21 +591,45 @@ h3 {
 }
 
 .debug {
-  margin-top: 16px;
+  border: 2px solid transparent;
   display: flex;
   justify-content: center;
+  margin-top: 16px;
+  padding: 2px 12px;
 }
 
 .debug-group {
+  background-color: $gray-600;
   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);
   font-weight: 700;
-  background-color: $gray-600;
+  padding: 2 px 16px;
 
  .btn {
   margin: 2px;
   }
+
+  a:hover {
+    text-decoration: none !important;
+  }
+}
+
+.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 {
@@ -614,12 +645,12 @@ h3 {
     &: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);
     }
-  }
 
   a {
     display: flex;
diff --git a/website/client/src/components/settings/subscription.vue b/website/client/src/components/settings/subscription.vue
index f83d36be3b8..b67a15ffbc8 100644
--- a/website/client/src/components/settings/subscription.vue
+++ b/website/client/src/components/settings/subscription.vue
@@ -395,7 +395,7 @@
 
   .btn-update-card {
     width: 12.5rem;
-    height: 2.5rem;
+    line-height: 24px;
     border-radius: 4px;
     font-size: 14px;
   }
diff --git a/website/client/src/components/static/header.vue b/website/client/src/components/static/header.vue
index 339c3678c7c..8fe93814bc1 100644
--- a/website/client/src/components/static/header.vue
+++ b/website/client/src/components/static/header.vue
@@ -152,7 +152,7 @@
   }
 
   .btn-primary.pull-right {
-    height: 2.5em;
+    line-height: 32px;
     margin: auto 0px auto auto;
   }
 
diff --git a/website/client/src/components/ui/filterDropdown.vue b/website/client/src/components/ui/filterDropdown.vue
index 75411467b32..f2031630042 100644
--- a/website/client/src/components/ui/filterDropdown.vue
+++ b/website/client/src/components/ui/filterDropdown.vue
@@ -12,12 +12,26 @@
       @select="selectItem($event)"
     >
       <template #item="{ item }">
-        <span :class="{'dropdown-icon-item': withIcon}">
+        <span
+        v-if="withIcon"
+        :class="{'dropdown-icon-item': withIcon}"
+        id="with-icon"
+        >
           <slot
             name="item"
             :item="item"
           ></slot>
         </span>
+        <span
+          v-else
+        >
+          <slot
+            name="item"
+            :item="item"
+          >
+          </slot>
+
+        </span>
       </template>
     </select-list>
   </span>
@@ -56,5 +70,10 @@ export default {
 </script>
 
 <style scoped lang="scss">
+#with-icon {
+  line-height: 1;
+  padding-top: 2px !important;
+  padding-bottom: 2px !important;
+}
 
 </style>

From f0865dcb5a0c21054af64a695ba5441b30ff5315 Mon Sep 17 00:00:00 2001
From: CuriousMagpie <eilatan@gmail.com>
Date: Fri, 27 Sep 2024 13:48:20 -0400
Subject: [PATCH 2/2] second pass

---
 website/client/src/assets/scss/button.scss    |  6 ++--
 website/client/src/components/appFooter.vue   | 30 +++++++------------
 .../challenges/leaveChallengeModal.vue        |  6 +++-
 .../client/src/components/shops/buyModal.vue  |  6 ++--
 .../components/shops/quests/buyQuestModal.vue |  8 ++---
 .../tasks/modal-controls/selectMulti.vue      |  2 +-
 website/client/src/pages/private-messages.vue |  5 ++--
 7 files changed, 30 insertions(+), 33 deletions(-)

diff --git a/website/client/src/assets/scss/button.scss b/website/client/src/assets/scss/button.scss
index e3a063ecd98..cfbd50a4362 100644
--- a/website/client/src/assets/scss/button.scss
+++ b/website/client/src/assets/scss/button.scss
@@ -109,7 +109,7 @@
   &:focus, &:active {
     color: $gray-50;
     background: $white;
-    border: 2px solid $purple-200;
+    border: 2px solid $purple-400;
     box-shadow: 0px 3px 6px 0px rgba(26, 24, 29, 0.16), 0px 3px 6px 0px rgba(26, 24, 29, 0.24);
 
     --icon-color: #{$purple-300};
@@ -122,7 +122,7 @@
 
       &:focus {
         color: $purple-300;
-        border: 2px solid $purple-200;
+        border: 2px solid $purple-400;
         box-shadow: 0px 3px 6px 0px rgba(26, 24, 29, 0.16), 0px 3px 6px 0px rgba(26, 24, 29, 0.24);
       }
 
@@ -162,7 +162,7 @@
 
   &:hover:not(:disabled):not(.disabled) {
     background: $maroon-100;
-    border: 2px solid $purple-200;
+    border: 2px solid transparent;
     box-shadow: 0px 3px 6px 0px rgba(26, 24, 29, 0.16), 0px 3px 6px 0px rgba(26, 24, 29, 0.24);
   }
 
diff --git a/website/client/src/components/appFooter.vue b/website/client/src/components/appFooter.vue
index b2084eab342..f446a2ae0bd 100644
--- a/website/client/src/components/appFooter.vue
+++ b/website/client/src/components/appFooter.vue
@@ -592,10 +592,19 @@ h3 {
 
 .debug {
   border: 2px solid transparent;
+  box-shadow: 0 1px 3px 0 rgba(26, 24, 29, 0.12), 0 1px 2px 0 rgba(26, 24, 29, 0.24);
   display: flex;
   justify-content: center;
   margin-top: 16px;
   padding: 2px 12px;
+
+  &:hover {
+    box-shadow: 0 3px 6px 0 rgba(26, 24, 29, 0.12), 0 3px 6px 0 rgba(26, 24, 29, 0.24);
+  }
+  &:focus, :active {
+    border: 2px solid $purple-400 !important;
+    box-shadow: 0 3px 6px 0 rgba(26, 24, 29, 0.12), 0 3px 6px 0 rgba(26, 24, 29, 0.24);
+  }
 }
 
 .debug-group {
@@ -603,7 +612,7 @@ h3 {
   border-radius: 4px;
   box-shadow: 0 1px 3px 0 rgba(26, 24, 29, 0.12), 0 1px 2px 0 rgba(26, 24, 29, 0.24);
   font-weight: 700;
-  padding: 2 px 16px;
+  padding: 8px 16px;
 
  .btn {
   margin: 2px;
@@ -633,24 +642,7 @@ h3 {
 }
 
 .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);
-    }
+  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..0b8aa1e4c46 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/shops/buyModal.vue b/website/client/src/components/shops/buyModal.vue
index 349f129cb8d..6371e0d4bd0 100644
--- a/website/client/src/components/shops/buyModal.vue
+++ b/website/client/src/components/shops/buyModal.vue
@@ -516,11 +516,11 @@
 
     button.btn.btn-primary {
       margin-top: 16px;
-      padding: 4px 16px;
-      height: 32px;
+      padding: 2px 12px;
+      line-height: 24px;
 
       &:focus {
-        border: 2px solid black;
+        border: 2px solid $purple-400;
       }
     }
 
diff --git a/website/client/src/components/shops/quests/buyQuestModal.vue b/website/client/src/components/shops/quests/buyQuestModal.vue
index 4981c9a94f9..6a033378a26 100644
--- a/website/client/src/components/shops/quests/buyQuestModal.vue
+++ b/website/client/src/components/shops/quests/buyQuestModal.vue
@@ -208,12 +208,12 @@
     }
 
     button.btn.btn-primary {
-      margin-top: 14px;
-      padding: 4px 16px;
-      height: 32px;
+      margin-top: 16px;
+      padding: 2px 12px;
+      line-height: 24px;
 
       &:focus {
-        border: 2px solid black;
+        border: 2px solid $purple-400;
       }
     }
 
diff --git a/website/client/src/components/tasks/modal-controls/selectMulti.vue b/website/client/src/components/tasks/modal-controls/selectMulti.vue
index 727d45c878f..d4b1c6e979f 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: 22px;
     padding-bottom: 0px;
   }
 }
diff --git a/website/client/src/pages/private-messages.vue b/website/client/src/pages/private-messages.vue
index 581970297be..b7a32b847a9 100644
--- a/website/client/src/pages/private-messages.vue
+++ b/website/client/src/pages/private-messages.vue
@@ -459,9 +459,10 @@
     }
 
     button {
-      height: 40px;
-      border-radius: 2px;
+      border-radius: 4px;
+      height: 32px;
       margin-left: 1.5rem;
+      padding: 2px 12px;
 
       &.disabled {
         cursor: default;