From fcc675964e03a53c89ba5b990fd70990926612f2 Mon Sep 17 00:00:00 2001
From: newick <erick@entre-quote.com>
Date: Fri, 11 Jan 2019 10:52:22 +0100
Subject: [PATCH] fix: hover effects

fix(delete button): hover effects
fix(add bulle link): hover effects
fix(bulle content): hover effects
fix(sourceUrl): hover effects
fix(nav): corrected linter error
---
 src/components/atoms/AddBulleLink.js | 13 ++++++++++++-
 src/components/atoms/BulleContent.js |  7 ++++++-
 src/components/atoms/DeleteButton.js |  6 +++++-
 src/components/atoms/NavLink.js      | 14 +++++++-------
 src/components/atoms/SourceURL.js    |  5 +++++
 src/components/atoms/icons/Add.js    |  1 -
 6 files changed, 35 insertions(+), 11 deletions(-)

diff --git a/src/components/atoms/AddBulleLink.js b/src/components/atoms/AddBulleLink.js
index d1b2e3472..570d8d6bc 100644
--- a/src/components/atoms/AddBulleLink.js
+++ b/src/components/atoms/AddBulleLink.js
@@ -9,15 +9,26 @@ export default styled.button`
     font-size: 15px;
     line-height: 1;
     font-weight: normal;
-    color: #a6b1c0;
+    color: ${props => props.theme.secondaryColor};
     text-transform: uppercase;
     background-color: #fff;
     border: 1px solid transparent;
     border-radius: 5px;
+    cursor: pointer;
 
     & > svg {
       width: 12px;
       height: 12px;
       margin-right: 5px;
+      fill: ${props => props.theme.secondaryColor};
+    }
+
+    &:hover {
+      color: #fff;
+      background-color: ${props => props.theme.secondaryColor};
+
+      & > svg {
+        fill: #fff;
+      }
     }
 `;
\ No newline at end of file
diff --git a/src/components/atoms/BulleContent.js b/src/components/atoms/BulleContent.js
index 0548b6a0e..ada7263a5 100644
--- a/src/components/atoms/BulleContent.js
+++ b/src/components/atoms/BulleContent.js
@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 
-export default styled.div`
+export default styled.a`
     box-sizing: border-box;
     display: flex;
     align-items: center;
@@ -11,6 +11,11 @@ export default styled.div`
     margin-left: 5px;
     background-color: #fff;
     border-radius: 15px;
+    border: 2px solid transparent;
+
+    &:hover {
+        border-color: ${props => props.theme.activeColor}
+    }
 
     & > a {
         transform: rotate(180deg)
diff --git a/src/components/atoms/DeleteButton.js b/src/components/atoms/DeleteButton.js
index f043633fb..ee86e9ce5 100644
--- a/src/components/atoms/DeleteButton.js
+++ b/src/components/atoms/DeleteButton.js
@@ -11,7 +11,7 @@ export default styled.button.attrs({ children: <DeleteIcon /> })`
   padding: 0 4px;
   margin-left: 16px;
   fill: #fff;
-  background: #A6B1C0;
+  background: ${props => props.theme.navInactive};
   border: none;
   border-radius: 50%;
   cursor: pointer;
@@ -20,4 +20,8 @@ export default styled.button.attrs({ children: <DeleteIcon /> })`
       width: 9px;
       height: 9px;
   }
+
+  &:hover {
+    background-color: ${props => props.theme.formError}
+  }
 `;
diff --git a/src/components/atoms/NavLink.js b/src/components/atoms/NavLink.js
index 764e9d132..9d9fee4cb 100644
--- a/src/components/atoms/NavLink.js
+++ b/src/components/atoms/NavLink.js
@@ -9,18 +9,18 @@ export default styled(ReactRouterNavLink).attrs({ replace: true, activeClassName
     padding-bottom: 6px;
     text-align: center;
     border-top: 2px solid transparent;
-    
-    &.${props => props.activeClassName} {
-      border-top: 2px solid ${props => props.theme.navActive}
-    }
 
     & > svg {
         height: 28px;
         fill: ${props => props.theme.navInactive};
     }
     
-        
-    &.${props => props.activeClassName} > svg {
-      fill: ${props => props.theme.navActive}
+    &.${props => props.activeClassName},
+    &:hover {
+      border-top: 2px solid ${props => props.theme.navActive};
+
+      & > svg {
+        fill: ${props => props.theme.navActive}
+      }
     }
 `;
\ No newline at end of file
diff --git a/src/components/atoms/SourceURL.js b/src/components/atoms/SourceURL.js
index 3f6356ac4..dd93e4f99 100644
--- a/src/components/atoms/SourceURL.js
+++ b/src/components/atoms/SourceURL.js
@@ -2,6 +2,7 @@ import styled from 'styled-components';
 
 export default styled.a`
     color: ${props => props.theme.secondaryColor};
+    cursor: pointer;
 
     &,
     & > span {
@@ -11,4 +12,8 @@ export default styled.a`
     & > span {
         vertical-align: bottom;
     }
+
+    &:hover {
+        color: ${props => props.theme.activeColor};
+    }
 `;
diff --git a/src/components/atoms/icons/Add.js b/src/components/atoms/icons/Add.js
index b5aeae3cd..e65f2dfe3 100644
--- a/src/components/atoms/icons/Add.js
+++ b/src/components/atoms/icons/Add.js
@@ -3,7 +3,6 @@ import React from 'react';
 export default () => (
   <svg viewBox="-1.8 1494.7 12.4 12.3">
     <path
-      fill="#a6b1c0"
       d="M-1.566 1500.3c-.3.3-.3.7 0 1 .1.1.3.2.5.2h4.8v4.8c0 
       .4.3.7.7.7.2 0 .4-.1.5-.2.1-.1.2-.3.2-.5v-4.8h4.8c.4 0 
       .7-.2.8-.6 0-.4-.2-.7-.6-.8H5.234v-4.8c0-.4-.4-.7-.8-.6-.3