Squashed commit of the following:

commit 4d88df1c381c4136cfe4780b6b5464d9c984bb31 Author: CuriousMagpie <[email protected]> Date: Wed Oct 30 14:24:53 2024 -0400 fixing active/focus states commit 630f74db6365625af210de81d577d43945f62df4 Author: CuriousMagpie <[email protected]> Date: Wed Oct 23 13:25:14 2024 -0400 sign-up/login/debug menu updates commit f85ef1c58e367219923c46aeebe77d1aa846b6f3 Author: CuriousMagpie <[email protected]> Date: Tue Oct 15 13:56:36 2024 -0400 more color standardization commit cd2ee3350fc51016cc75fb799debeefa0b1d9b64 Author: CuriousMagpie <[email protected]> Date: Tue Oct 15 13:39:02 2024 -0400 updates per comments commit e91371522bb9a6dae5c6d02eb6f16f0b632f7a24 Author: CuriousMagpie <[email protected]> Date: Fri Oct 4 14:25:45 2024 -0400 class selection active state commit 4fcdca1eb07eb67aacd84feb1c9357d52fd6f23f Author: CuriousMagpie <[email protected]> Date: Thu Oct 3 14:31:00 2024 -0400 fixing a few more buttons commit 475e21aae7733cfa072f828c559cc0930f0ad878 Author: CuriousMagpie <[email protected]> Date: Wed Oct 2 15:57:25 2024 -0400 line-heights converted to unitless multipliers commit c5dca257274a60b02e1f12e3c6daf103cec53096 Author: CuriousMagpie <[email protected]> Date: Fri Sep 27 13:48:20 2024 -0400 second pass commit 685f4d4d64b8b234afbb702d1b8a52d4670d3825 Author: CuriousMagpie <[email protected]> Date: Thu Sep 26 16:58:59 2024 -0400 first pass
HabitRPG · Nov 21, 2024 · a36114e · a36114e
1 parent 529f856
commit a36114e
Show file tree

Hide file tree

Showing 16 changed files with 232 additions and 113 deletions.
diff --git 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,58 +30,65 @@
     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;
     }
   }
 
   &.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;
   }
 }
 
 .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
@@ -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
@@ -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
@@ -7,7 +7,7 @@
           :class="{'open': expand}"
           @click="expand = !expand"
         >
-          Priviliges, Gem Balance
+          Privileges, Gem Balance
         </h3>
       </div>
       <div