Change share sidebar design

components/guide-footer/style.js

@@ -24,15 +24,23 @@ export const ShareWrap = styled.div`
     display: flex;  
     align-items: center;
     color: #101010;
-  }
 
     svg {
       height: 18px;
       color: #757575;
       margin-left: 7px;
+      transition: all 0.2s ease;
+    }
+
+    &:hover {
+      svg {
+        color: #101010;
+      }
+    }
   }
 `;
 
+
 export const ContributeIcon = styled.div`
   display: flex;
   align-items: center;
@@ -46,6 +54,11 @@ export const ContributeIcon = styled.div`
   a {
     color: #757575;
     font-size: 14px;
+    transition: all 0.2s ease;
+      
+    &:hover {
+      color: #101010;
+    }
   }
 `;
 
@@ -77,29 +90,6 @@ export const AuthorInfoWrap = styled.div`
     }
   }
   
-  .social-links {
-    margin: 5px 0 0;
-
-    a {
-      background: transparent;
-      color: #101010;
-      margin-right: 10px;
-      text-transform: uppercase;
-      text-decoration: none;
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      
-      &:hover {
-        border-color: #757575;
-      }
-
-      svg {
-        height: 18px;
-      }
-    }  
-  }
-  
   .author-description {
     margin-bottom: 14px;
   }

components/share-guide/style.js

@@ -15,15 +15,21 @@ export const ShareWrap = styled.div`
   flex-direction: column;
   position: absolute;
   padding: 0 0;
-  top: 0;
+  top: 2px;
   left: -50px;
   height: 100%;
 `;
 
 export const ShareIcon = styled.span`
-  margin-bottom: 7px;
+  margin-bottom: 8px;
+
   svg {
-    height: 26px;
+    height: 22px;
-    color: #101010;
+    color: #757575;
+    transition: all 0.2s;
+  }
+  
+  &:hover svg {
+    color: #000000
   }
 `;