refactor: use button component

src/components/NsfwWarning.vue

@@ -7,12 +7,13 @@
         <p><slot name="message"></slot></p>
 
         <div class="btn-container">
-          <a href="#" class="btn positive" @click.prevent="confirmNsfw(true)">
+          <btn href="#" class="positive" @click.prevent="confirmNsfw(true)">
             <slot name="yes"></slot>
-          </a>
+          </btn>
-          <a href="#" class="btn negative" @click.prevent="confirmNsfw(false)">
+
+          <btn href="#" class="negative" @click.prevent="confirmNsfw(false)">
             <slot name="no"></slot>
-          </a>
+          </btn>
         </div>
       </div>
     </div>
@@ -20,7 +21,10 @@
 </template>
 
 <script>
+import btn from "@/components/Button.vue";
+
 export default {
+  components: { btn },
   methods: {
     confirmNsfw(input) {
       this.$root.nsfw = input;
@@ -94,24 +98,32 @@ export default {
 
 .btn {
   flex: 0 1 100%;
-  background-color: $bg-color-light;
+  margin: 0.75em 0;
-  border-radius: 0.25em;
-  font-size: 1.5em;
-  font-weight: bold;
-  padding: 0.25em 0.5em;
-  margin: 0 0 1em 0;
-  text-decoration: none;
-
-  @include mq-desktop {
-    flex: 0 1 100%;
-  }
 
   &.positive {
-    background-color: green;
+    box-shadow: 0 0.5em 0 0 darken($btn-color-positive, 10%);
+    background-color: $btn-color-positive;
+
+    &:hover {
+      box-shadow: 0 0.75em 0 0 darken($btn-color-positive, 10%);
+    }
+
+    &:active {
+      box-shadow: 0 0.25em 0 0 darken($btn-color-positive, 10%);
+    }
   }
 
   &.negative {
-    background-color: red;
+    box-shadow: 0 0.5em 0 0 darken($btn-color-negative, 10%);
+    background-color: $btn-color-negative;
+
+    &:hover {
+      box-shadow: 0 0.75em 0 0 darken($btn-color-negative, 10%);
+    }
+
+    &:active {
+      box-shadow: 0 0.25em 0 0 darken($btn-color-negative, 10%);
+    }
   }
 }
 </style>