From f3e7b18c34c4c818a259a317cc29e82a464265a3 Mon Sep 17 00:00:00 2001
From: Kamil Niemczycki <kamilniemczycki@gmail.com>
Date: Wed, 5 Jan 2022 16:38:35 +0100
Subject: [PATCH] Improving the button style

---
 scss/_btn.scss                | 76 ++++++++++++++++++++++++++++++++++-
 scss/_colors.scss             |  3 ++
 scss/default.scss             |  6 +++
 src/components/BaseButton.vue | 37 +++--------------
 4 files changed, 89 insertions(+), 33 deletions(-)

diff --git a/scss/_btn.scss b/scss/_btn.scss
index d0db64a..e7e0ad4 100644
--- a/scss/_btn.scss
+++ b/scss/_btn.scss
@@ -1,3 +1,77 @@
-@mixin btn($revese: false) {
+@import "colors";
 
+$default-color: transparent !default;
+$dark-gray: #4f4f4f !default;
+$navy-blue: #436da7 !default;
+$white: white !default;
+
+$btn-colors: (
+  border: $dark-gray,
+  bg: $default-color,
+  font: $dark-gray,
+  hover: (
+    bg: $dark-gray,
+    font: $white
+  )
+);
+
+.btn {
+  display: block;
+  min-width: 270px;
+  padding: 8px 10px;
+
+  border-radius: 3px;
+  border-width: 3px;
+  border-style: solid;
+  border-color: $default-color;
+
+  background-color: map-get($btn-colors, bg);
+}
+
+@mixin btn($colors: $btn-colors) {
+  border-color: map-get($colors, border);
+  background-color: map-get($colors, bg);
+
+  font-size: 1.05em;
+  color: map-get($colors, font);
+
+  &:hover {
+    $hovers: map-get($colors, hover);
+    background-color: map-get($hovers, bg);
+    color: map-get($hovers, font);
+  }
+
+  @content;
+}
+
+@mixin btn-reverse($leading-color: $dark-gray) {
+  $colors: (
+    border: $leading-color,
+    bg: $leading-color,
+    font: $white,
+    hover: (
+      bg: $default-color,
+      font: $leading-color
+    )
+  );
+  @include btn($colors);
+}
+
+@mixin button($reverse: false, $has-icon: false) {
+  @if not $reverse {
+    @include btn()
+  } @else {
+    @include btn-reverse($navy-blue);
+  }
+  @if $has-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .icon {
+      margin-right: 10px;
+      font-size: 1.3em;
+    }
+  }
+  @content;
 }
diff --git a/scss/_colors.scss b/scss/_colors.scss
index 7c84d62..dca30b6 100644
--- a/scss/_colors.scss
+++ b/scss/_colors.scss
@@ -1,7 +1,10 @@
 // default colors
 $gray: #fafafa;
 $dark-gray: #4f4f4f;
+$navy-blue: #436da7 !default;
 
 // default colors for style
 $text-color: #2c3e50;
 $bg-color: white;
+
+$white: white;
diff --git a/scss/default.scss b/scss/default.scss
index 994e821..e5560fd 100644
--- a/scss/default.scss
+++ b/scss/default.scss
@@ -4,21 +4,26 @@
 a {
   text-decoration: none;
 }
+
 h2 {
   font-size: 1.8em;
   margin-bottom: 10px;
 }
+
 p {
   font-size: 1.1em;
   line-height: 1.4em;
+
   &:not(&:last-of-type) {
     padding-bottom: 10px;
   }
 }
+
 .container {
   max-width: 1200px;
   margin: 0 auto;
 }
+
 .loading {
   height: 300px;
 
@@ -32,6 +37,7 @@ p {
     animation: loading-animation 1s linear infinite;
   }
 }
+
 @media screen and (max-width: 1200px) {
   .container {
     padding: 0 20px;
diff --git a/src/components/BaseButton.vue b/src/components/BaseButton.vue
index 2079109..df4af2f 100644
--- a/src/components/BaseButton.vue
+++ b/src/components/BaseButton.vue
@@ -1,5 +1,5 @@
 <template>
-  <button class="btn" :class="{ reverse: isReverse }">
+  <button class="btn" :class="{ 'btn-reverse': isReverse }">
     <font-awesome-icon class="icon" v-if="hasIcon" :icon="icon"/>
     <span><slot></slot></span>
   </button>
@@ -17,40 +17,13 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-$btn-blue-color: #436DA7;
-$btn-gray-color: #4f4f4f;
-$hover-btn-color: white;
+@import "scss/_btn";
 
 .btn {
-  display: flex;
-  min-width: 270px;
-  align-items: center;
-  justify-content: center;
-  padding: 8px 10px;
-  border: 3px solid $btn-gray-color;
-  background-color: transparent;
-  color: $btn-gray-color;
-  border-radius: 3px;
-  font-size: 1.05em;
-
-  .icon {
-    margin-right: 10px;
-    font-size: 1.3em;
-  }
-
-  &:hover {
-    background-color: $btn-gray-color;
-    color: $hover-btn-color;
-  }
+  @include button($has-icon: true);
 }
-.reverse {
-  background-color: $btn-blue-color;
-  border-color: $btn-blue-color;
-  color: $hover-btn-color;
 
-  &:hover {
-    background-color: transparent;
-    color: $btn-blue-color;
-  }
+.btn-reverse {
+  @include button(true, true);
 }
 </style>