From 5cf33f6dfa23a0a49213fd9b0d8ca2c38e6ca5f9 Mon Sep 17 00:00:00 2001
From: Sebin Nyshkim <sebin.nyshkim@icloud.com>
Date: Fri, 20 Jan 2023 00:35:05 +0100
Subject: [PATCH] refactor: migrate Button component

---
 src/components/Button.vue    | 57 ----------------------------
 src/components/RefButton.vue | 72 ++++++++++++++++++++++++++++++++++++
 2 files changed, 72 insertions(+), 57 deletions(-)
 delete mode 100644 src/components/Button.vue
 create mode 100644 src/components/RefButton.vue

diff --git a/src/components/Button.vue b/src/components/Button.vue
deleted file mode 100644
index 39ae646..0000000
--- a/src/components/Button.vue
+++ /dev/null
@@ -1,57 +0,0 @@
-<template>
-  <a
-    class="btn"
-    :href="href"
-    :download="href.slice(href.lastIndexOf('/') + 1)"
-    v-if="download"
-  >
-    <slot></slot>
-  </a>
-  <a class="btn" :href="href" v-else><slot></slot></a>
-</template>
-
-<script>
-export default {
-  props: {
-    href: String,
-    download: Boolean,
-  },
-};
-</script>
-
-<style lang="scss">
-@import "@/scss/_variables.scss";
-@import "@/scss/_mixins.scss";
-
-.btn {
-  margin: 0.5em 0;
-  padding: 0.5em 1em;
-
-  position: relative;
-  top: 0;
-
-  border-radius: 0.25em;
-
-  transition: all 0.1s ease-out;
-
-  font-weight: bold;
-  background-color: $bg-color-light;
-
-  text-decoration: none;
-  text-align: center;
-
-  @include button($bg-color-light);
-
-  @include theme(dark) {
-    @include button($bg-color-dark);
-  }
-
-  &:hover {
-    top: -0.25em;
-  }
-
-  &:active {
-    top: 0.25em;
-  }
-}
-</style>
diff --git a/src/components/RefButton.vue b/src/components/RefButton.vue
new file mode 100644
index 0000000..4c9e5dc
--- /dev/null
+++ b/src/components/RefButton.vue
@@ -0,0 +1,72 @@
+<script setup lang="ts">
+interface Props {
+  href?: string;
+  download?: boolean | any;
+}
+
+defineProps<Props>();
+</script>
+
+<template>
+  <a class="btn" :href="href" :[download]="download">
+    <slot></slot>
+  </a>
+</template>
+
+<style lang="scss">
+.btn {
+  position: relative;
+  top: 0;
+
+  background-color: var(--color-button);
+
+  font-weight: 700;
+  text-decoration: none;
+  text-align: center;
+
+  margin: 0.5rem 0;
+  border-radius: 0.25rem;
+  padding: 0.5rem 1rem;
+
+  box-shadow: 0 0.5rem 0 0 var(--color-button-box-shadow);
+
+  transition: all 0.1s ease-out;
+
+  &:hover {
+    cursor: pointer;
+    top: -0.25rem;
+    box-shadow: 0 0.75rem 0 0 var(--color-button-box-shadow);
+  }
+
+  &:active {
+    top: 0.25rem;
+    box-shadow: 0 0.25rem 0 0 var(--color-button-box-shadow);
+  }
+
+  &.positive {
+    background-color: #259410;
+    box-shadow: 0 0.5rem 0 0 #1a660b;
+
+    &:hover {
+      box-shadow: 0 0.75rem 0 0 #1a660b;
+    }
+
+    &:active {
+      box-shadow: 0 0.25rem 0 0 #1a660b;
+    }
+  }
+
+  &.negative {
+    background-color: #ae1414;
+    box-shadow: 0 0.5rem 0 0 #800f0f;
+
+    &:hover {
+      box-shadow: 0 0.75rem 0 0 #800f0f;
+    }
+
+    &:active {
+      box-shadow: 0 0.25rem 0 0 #800f0f;
+    }
+  }
+}
+</style>