Updated seasonedbutton to not have a wrapping div.

src/components/ui/SeasonedButton.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="seasoned-button">
-    <button type="button" class="button" @click="emit('click')" :class="{ active: active }"><slot></slot></button>
-  </div>
+  <button type="button" @click="emit('click')" :class="{ active: active }">
+    <slot></slot>
+  </button>
 </template>
 
 <script>
@@ -9,9 +9,11 @@
 export default {
   name: 'seasonedButton',
   props: {
-    required: false,
-    active: Boolean,
-    default: false
+    active: {
+      type: Boolean,
+      default: false,
+      required: false
+    }
   },
   methods: {
     emit() {
@@ -25,26 +27,26 @@ export default {
 @import "./src/scss/variables";
 @import "./src/scss/media-queries";
 
-.button{
+button {
   display: inline-block;
   border: 1px solid $text-color;
-  text-transform: uppercase;
-  font-weight: 300;
   font-size: 11px;
-  line-height: 2;
-  height: 45px;
+  font-weight: 300;
+  line-height: 1.5;
   letter-spacing: 0.5px;
-  padding: 5px 20px 4px 20px;
+  text-transform: uppercase;
+  min-height: 45px;
+  padding: 5px 10px 4px 10px;
   margin: 0;
   margin-right: 0.3rem;
-  cursor: pointer;
   color: $text-color;
   background: $background-color-secondary;
+  cursor: pointer;
   outline: none;
   transition: background 0.5s ease, color 0.5s ease, border-color .5s ease;
 
-  @include tablet-min{
-    font-size: 12px;
+  @include desktop {
+    font-size: 0.8rem;
     padding: 6px 20px 5px 20px;
   }