From 32445d7f250b1f9143bffac1f6ca08a252a2a204 Mon Sep 17 00:00:00 2001
From: Kamil Niemczycki <kamilniemczycki@gmail.com>
Date: Wed, 25 Aug 2021 00:08:09 +0200
Subject: [PATCH] Added support for icons in button

---
 src/components/BaseButton.vue     | 16 ++++++++++++----
 src/components/sections/About.vue |  9 +++------
 2 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/src/components/BaseButton.vue b/src/components/BaseButton.vue
index 255ea3e..8a01f16 100644
--- a/src/components/BaseButton.vue
+++ b/src/components/BaseButton.vue
@@ -1,7 +1,7 @@
 <template>
   <button class="btn" :class="isReverse ? 'reverse' : ''">
-    <i v-if="hasIcon" :class="classIcon"></i>
-    <slot></slot>
+    <font-awesome-icon class="icon" if="hasIcon" :icon="icon"/>
+    <span><slot></slot></span>
   </button>
 </template>
 
@@ -10,7 +10,7 @@ export default {
   name: 'BaseButton',
   props: {
     hasIcon: Boolean,
-    classIcon: String,
+    icon: String,
     isReverse: Boolean
   }
 }
@@ -21,11 +21,19 @@ $btn-color: black;
 $hover-btn-color: white;
 
 .btn {
-  padding: 10px 15px;
+  display: flex;
+  align-items: center;
+  padding: 8px 10px;
   border: 1px solid #{$btn-color};
   background-color: transparent;
   color: $btn-color;
   border-radius: 0;
+
+  .icon {
+    margin-right: 5px;
+    font-size: 1.5em;
+  }
+
   &:hover {
     background-color: $btn-color;
     color: $hover-btn-color;
diff --git a/src/components/sections/About.vue b/src/components/sections/About.vue
index 7591f32..dcd27a6 100644
--- a/src/components/sections/About.vue
+++ b/src/components/sections/About.vue
@@ -6,7 +6,9 @@
           <h2 class="name">Kamil Niemczycki</h2>
           <div class="tagline">Web Developer</div>
           <p>I'm a software engineer specialised in frontend and backend development for complex scalable web apps. I write about software development on my blog. Want to know how I may help your project? Check out my project portfolio and online resume.</p>
-          <base-btn class-icon="my-class" has-icon>Wyświetl portfolio</base-btn>
+          <div class="buttons">
+            <base-btn has-icon icon="portrait">Wyświetl portfolio</base-btn>
+          </div>
         </div>
         <div id="grid-photo">
           <figure id="about-photo">
@@ -19,11 +21,6 @@
 </template>
 
 <style lang="scss">
-.btn {
-  i.my-class:before {
-    content: 'XD ';
-  }
-}
 div.about {
   padding: 20px 0;
   background-color: var(--gray-color) !important;