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
dis-moi · Feb 1, 2019 · fcc6759 · fcc6759
1 parent 63b6414
commit fcc6759
Show file tree

Hide file tree

Showing 6 changed files with 35 additions and 11 deletions.
diff --git 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;
+      }
     }
 `;
diff --git 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
@@ -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
@@ -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}
+      }
     }
 `;
diff --git 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
@@ -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