From d570bdc678757f4e96e1fc095b15fe1e4ae18e97 Mon Sep 17 00:00:00 2001
From: Sebin Nyshkim <sebin.nyshkim@icloud.com>
Date: Fri, 7 Jan 2022 21:33:11 +0100
Subject: [PATCH] refactor: darken box-shadow instead of lighten
 background-color

---
 src/components/Button.vue | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/components/Button.vue b/src/components/Button.vue
index 6e596de..3dfe116 100644
--- a/src/components/Button.vue
+++ b/src/components/Button.vue
@@ -5,9 +5,9 @@
     :download="href.slice(href.lastIndexOf('/') + 1)"
     v-if="download"
   >
-    <slot></slot> ⬇️
+    <slot></slot>
   </a>
-  <a class="btn" :href="href" v-else> <slot></slot> ⬇️ </a>
+  <a class="btn" :href="href" v-else><slot></slot></a>
 </template>
 
 <script>
@@ -30,23 +30,24 @@ export default {
   top: 0;
 
   border-radius: 0.25em;
-  box-shadow: 0 0.5em 0 0 $bg-color-dark;
+  box-shadow: 0 0.5em 0 0 darken($bg-color-dark, 10%);
 
   transition: all 0.1s ease-out;
 
-  background-color: lighten($bg-color-dark, 5%);
+  font-weight: bold;
+  background-color: $bg-color-dark;
 
   text-decoration: none;
   text-align: center;
 
   &:hover {
     top: -0.25em;
-    box-shadow: 0 0.75em 0 0 $bg-color-dark;
+    box-shadow: 0 0.75em 0 0 darken($bg-color-dark, 10%);
   }
 
   &:active {
     top: 0.25em;
-    box-shadow: 0 0.25em 0 0 $bg-color-dark;
+    box-shadow: 0 0.25em 0 0 darken($bg-color-dark, 10%);
   }
 }
 </style>