From 97f1b1d1fd482b42ad2fb544248bf6ab094a8564 Mon Sep 17 00:00:00 2001
From: Francisco Pessano <franpessano1@gmail.com>
Date: Thu, 5 May 2022 20:45:06 -0300
Subject: [PATCH] Featured on Product Hunt Button added

---
 src/components/Footer/Footer.jsx            |  3 ++-
 src/components/Footer/footer-styles.css     |  7 ++++---
 src/components/Footer/footer-styles.css.map |  2 +-
 src/components/Footer/footer-styles.scss    | 10 ++++++----
 4 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/src/components/Footer/Footer.jsx b/src/components/Footer/Footer.jsx
index 0763e2a..b66cf13 100644
--- a/src/components/Footer/Footer.jsx
+++ b/src/components/Footer/Footer.jsx
@@ -5,7 +5,8 @@ import React from 'react'
 const Footer = (props) => {
     return (
         <footer className={props.darkMode ? 'made-with-love dark-mode-component' : 'made-with-love'}>
-            Made with 💓 by <a href="https://porfolio-franp.netlify.app" target="_blank" rel="noreferrer">Francisco Pessano</a>
+            <p>Made with 💓 by <a href="https://porfolio-franp.netlify.app" target="_blank" rel="noreferrer">Francisco Pessano</a></p>
+            <a href="https://www.producthunt.com/posts/clockify-pomodoro-timer?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-clockify&#0045;pomodoro&#0045;timer" target="_blank" rel="noreferrer"><img src={`https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=334653&theme=${localStorage.getItem('dark-mode') === "true" ? "dark" : "light"}`} alt="Clockify&#0032;Pomodoro&#0032;Timer - Pomodoro&#0032;Timer&#0032;that&#0032;sync&#0032;the&#0032;worked&#0032;hours&#0032;with&#0032;Clockify | Product Hunt"/></a>
         </footer>
     )
 }
diff --git a/src/components/Footer/footer-styles.css b/src/components/Footer/footer-styles.css
index 2345ca0..bf3437d 100644
--- a/src/components/Footer/footer-styles.css
+++ b/src/components/Footer/footer-styles.css
@@ -1,9 +1,10 @@
 .made-with-love {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
   margin-top: auto;
   width: 100%;
-  padding-top: 5vh;
-  padding-bottom: 5vh;
-  padding-left: 3vw;
+  padding: 5vh 3vw;
   box-sizing: border-box;
   background-color: var(--main-background-color);
   color: rgb(185, 185, 185);
diff --git a/src/components/Footer/footer-styles.css.map b/src/components/Footer/footer-styles.css.map
index 431f214..e9faa21 100644
--- a/src/components/Footer/footer-styles.css.map
+++ b/src/components/Footer/footer-styles.css.map
@@ -1 +1 @@
-{"version":3,"sources":["footer-styles.scss","footer-styles.css"],"names":[],"mappings":"AAAA;EAEE,gBAAA;EACA,WAAA;EAEA,gBAAA;EACA,mBAAA;EACA,iBAAA;EAEA,sBAAA;EAEA,8CAAA;EACA,yBAAA;ACHF;ADKE;EACE,cAAA;ACHJ","file":"footer-styles.css"}
\ No newline at end of file
+{"version":3,"sources":["footer-styles.scss","footer-styles.css"],"names":[],"mappings":"AAAA;EAEE,aAAA;EACA,mBAAA;EACA,8BAAA;EAEA,gBAAA;EACA,WAAA;EAEA,gBAAA;EAEA,sBAAA;EAEA,8CAAA;EACA,yBAAA;ACJF;ADME;EACE,cAAA;ACJJ","file":"footer-styles.css"}
\ No newline at end of file
diff --git a/src/components/Footer/footer-styles.scss b/src/components/Footer/footer-styles.scss
index 6f825a1..f9a098d 100644
--- a/src/components/Footer/footer-styles.scss
+++ b/src/components/Footer/footer-styles.scss
@@ -1,11 +1,13 @@
 .made-with-love {
-  
+
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
   margin-top: auto;
   width: 100%;
   
-  padding-top: 5vh;
-  padding-bottom: 5vh;
-  padding-left: 3vw;
+  padding: 5vh 3vw;
   
   box-sizing: border-box;