From eee99d1ffef9570f8e7c9c41ac9b8916aa356ef6 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Mon, 28 Jun 2021 21:25:26 +0100
Subject: [PATCH] :package: Creates reusable Button component

---
 src/components/Button.js |  2 +-
 src/styles/Button.scss   | 10 ++++++++++
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/components/Button.js b/src/components/Button.js
index 0541c1f4..bf38ebe0 100644
--- a/src/components/Button.js
+++ b/src/components/Button.js
@@ -5,7 +5,7 @@ import './../styles/Button.scss';
 
 export default function Button({ children, to, color }) {
   return (
-    <Link to={to}>
+    <Link to={to} className="button-link-wrapper">
       <button className={clsx('button', color && 'color-btn', `btn-${color}`)}>
         {children}
       </button>
diff --git a/src/styles/Button.scss b/src/styles/Button.scss
index 63789026..943c1703 100644
--- a/src/styles/Button.scss
+++ b/src/styles/Button.scss
@@ -1,4 +1,8 @@
 
+.button-link-wrapper:hover {
+  text-decoration: none;
+}
+
 .button {
   border-radius: 4px;
   cursor: pointer;
@@ -13,6 +17,12 @@
   padding: 0.75rem 1rem;
   margin: 0.5rem;
   color: var(--black);
+  display: flex;
+
+  svg {
+    width: 1.8rem;
+    margin-right: 0.5rem;
+  }
 
   &.color-btn:hover {
     color: #000000b3;