Standardize Button Height

website/client/src/assets/scss/button.scss

@@ -1,10 +1,11 @@
+/* use of "border: 2px solid transparent;" from https://stackoverflow.com/a/9612782 */
+
 .btn {
   cursor: pointer;
   font-family: 'Roboto', sans-serif;
   font-size: 14px;
   font-weight: bold;
-  line-height: 1.71;
-  border: 1px solid transparent;
+  line-height: 1.714;
   padding: 4px 12px;
   border-radius: 4px;
   box-shadow: 0 1px 3px 0 rgba($black, 0.12), 0 1px 2px 0 rgba($black, 0.24);
@@ -19,10 +20,11 @@
   }
 
   &:focus {
-    border-color: $purple-400;
+    border: 2px solid $purple-400;
   }
 
   &:active, &.active:not(.btn-flat) {
+    border: 2px solid $purple-400;
     box-shadow: none;
   }
 
@@ -32,15 +34,15 @@
     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;
     }
   }
 
   &.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,15 +51,17 @@
 
 .btn-front {
   font-size: 16px;
-  line-height: 1.5;
+  line-height: 1.71;
   padding: 7.5px 15.5px;
 }
 
 .btn-primary {
   background: $purple-200;
-  border: 1px solid transparent;
+  border: 2px solid $purple-200;
+  padding: 2px 12px;
   --icon-color: #{$purple-500};
 
+
   &:focus {
     background: $purple-200;
     border-color: $purple-400;
@@ -66,22 +70,23 @@
 
   &:not(:disabled):not(.disabled) {
     &:hover {
-      background: #5d3b9c;
-      border: 1px solid transparent;
+      background: $purple-200;
+      border: 2px solid $purple-200;
+      box-shadow: 0 3px 6px 0 rgba($black, 0.16), 0 3px 6px 0 rgba($black, 0.24);
 
       --icon-color: #{$white};
     }
 
     &:active, &.active {
       background: $purple-200;
-      border: 1px solid transparent;
+      border: 2px solid $purple-400;
 
       --icon-color: #{$white};
     }
 
     &:active:focus, &.active:focus {
       box-shadow: none;
-      border-color: $purple-400;
+      border: 2px solid $purple-400;
     }
   }
 
@@ -90,46 +95,52 @@
       color: var(--icon-color);
     }
   }
+
+  &.disabled {
+    background-color: $white;
+    border: 2px solid transparent;
+    box-shadow: 0px 1px 2px 0px rgba(26, 24, 29, 0.24), 0px 1px 3px 0px rgba(26, 24, 29, 0.12);
+    line-height: 1;
+  }
 }
 
 .btn-secondary,
 .dropdown > .btn-secondary.dropdown-toggle:not(.btn-success),
 .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;
 
     --icon-color: #{$purple-300};
   }
 
   &:not(:disabled):not(.disabled) {
     &:active, &.active {
+      border: 2px solid $purple-400;
       color: $purple-300;
       --icon-color: #{$purple-300};
 
       &:focus {
-        color: $purple-300;
+        border: 2px solid $purple-400;
         box-shadow: none;
-        border-color: $purple-400;
+        color: $purple-300;
       }
 
       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,26 +162,29 @@
 
 .btn-danger {
   background: $maroon-100;
-  border: 1px solid transparent;
+  border: 2px solid transparent;
 
   &:hover:not(:disabled):not(.disabled) {
     background: #e14e4e;
-    border: 1px solid transparent;
+    border: 2px solid transparent;
   }
 
   &: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;
+  }
+  &.disabled {
+    line-height: 1.5;
   }
 }
 
@@ -200,11 +214,11 @@
 
 .btn-success {
   background: $green-50;
-  border: 1px solid transparent;
+  border: 2px solid transparent;
 
   &:hover:not(:disabled):not(.disabled) {
     background: #32bd8a;
-    border: 1px solid transparent;
+    border: 2px solid transparent;
   }
 
   &:focus {
@@ -219,7 +233,7 @@
 
   &:not(:disabled):not(.disabled):active, &:not(:disabled):not(.disabled).active {
     background: $green-50;
-    border: 1px solid transparent;
+    border: 2px solid transparent;
   }
 }
 
@@ -267,7 +281,10 @@
 }
 
 .btn-small {
+  align-content: center;
+  display:inline-flex;
+  flex-wrap: wrap;
   font-size: 12px;
-  line-height: 1.33;
+  line-height: 1.17;
   padding: 4px 8px;
 }

website/client/src/assets/scss/dropdown.scss

@@ -34,7 +34,7 @@
 
 .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);
 
@@ -127,8 +127,8 @@
   width: 100%;
 
   .dropdown-toggle {
+    padding: 4px 12px 5px;
     width: 100% !important;
-    height: 32px;
     text-align: left;
   }
 

website/client/src/components/admin-panel/index.vue

@@ -46,7 +46,7 @@
   }
 
   .input-group-append {
-    width:auto;
+    width: auto;
   }
 
   .admin-panel-content {

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

website/client/src/components/appFooter.vue

@@ -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-danger btn-small"
             @click="resetTime()"
           >
             Reset
@@ -434,6 +434,10 @@ button {
   margin-bottom: 1rem;
   padding: .5rem 1rem;
   box-shadow: 0 1px 3px 0 rgb(26 24 29 / 12%), 0 1px 2px 0 rgb(26 24 29 / 24%);
+
+  &:focus {
+    outline: 2px solid $purple-400;
+  }
 }
 
 ul {
@@ -584,9 +588,13 @@ h3 {
 }
 
 .debug {
-  margin-top: 16px;
-  display: flex;
+  align-content: center;
+  border: 2px solid transparent;
+  display:inline-flex;
+  flex-wrap: wrap;
   justify-content: center;
+  margin-top: 16px;
+  padding: 2px 12px;
 }
 
 .debug-group {
@@ -596,11 +604,31 @@ h3 {
   font-weight: 700;
   background-color: $gray-600;
 
- .btn {
-  margin: 2px;
+  .btn {
+    margin: 2px;
+    padding: 2px 12px;
+  }
+}
+
+.btn-small {
+  background-color: $maroon-100;
+  border: 2px solid transparent;
+  color: $white !important;
+
+  &:hover {
+    background-color: $maroon-100;
+    text-decoration: none !important;
   }
 }
 
+.btn-secondary {
+  padding: 2px 12px;
+}
+
+.btn-secondary a:hover {
+  text-decoration: none !important;
+}
+
 .btn-contribute {
   background: $white;
   border-radius: 2px;
@@ -614,17 +642,15 @@ 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;
   }
-
   .text{
     display: inline-block;
     vertical-align: bottom;

website/client/src/components/challenges/challengeDetail.vue

@@ -298,6 +298,10 @@
     padding: .5em;
   }
 
+  .btn-success {
+    padding: 4.5px 12px !important;
+  }
+
   .sidebar {
     background-color: $gray-600;
   }
@@ -409,7 +413,7 @@
     await this.loadChallenge();
     next();
   },
   props: ['challengeId'],
   data () {
     return {
       searchId: '',

website/client/src/components/groups/membersModal.vue

@@ -24,7 +24,7 @@
           </div>
           <div class="col-6">
             <button
-              class="close"
+              class="close mr-0"
               type="button"
               aria-label="Close"
               @click="close()"
@@ -122,7 +122,7 @@
             <b-dropdown right="right">
               <div
                 slot="button-content"
-                class="svg-icon inline dots pt-1"
+                class="svg-icon inline dots"
                 v-html="icons.dots"
               ></div>
               <b-dropdown-item @click="sendMessage(member)">
@@ -250,6 +250,11 @@
 
 <style lang='scss'>
   #members-modal {
+    button {
+      line-height: 1.358;
+      width: 30px;
+    }
+
     .modal-header {
       background-color: #edecee;
       border-radius: 8px 8px 0 0;
@@ -307,6 +312,7 @@
     }
     .dots {
       height: 16px;
+      padding-top: 2px;
       width: 4px;
     }
   }