From 891c3a3decc9053b1e8db2c6ee5932d5596307cf Mon Sep 17 00:00:00 2001
From: Sebin Nyshkim <sebin.nyshkim@icloud.com>
Date: Fri, 7 Jan 2022 21:27:46 +0100
Subject: [PATCH] refactor: use button component

---
 src/components/NsfwWarning.vue | 46 +++++++++++++++++++++-------------
 1 file changed, 29 insertions(+), 17 deletions(-)

diff --git a/src/components/NsfwWarning.vue b/src/components/NsfwWarning.vue
index 53bac3f..9c0003e 100644
--- a/src/components/NsfwWarning.vue
+++ b/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>
-          <a href="#" class="btn negative" @click.prevent="confirmNsfw(false)">
+          </btn>
+
+          <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;
-  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%;
-  }
+  margin: 0.75em 0;
 
   &.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>