Add share icons to roadmap header

components/share-page/index.js

@@ -2,7 +2,8 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faFacebookSquare, faRedditSquare, faTwitterSquare } from '@fortawesome/free-brands-svg-icons'
 
 import { getFacebookShareUrl, getRedditShareUrl, getTwitterShareUrl } from "lib/url";
-import { ShareIcon, ShareIconsList, ShareWrap } from './style';
+import { ShareIconsList, ShareWrap } from './style';
+import { ShareIcon } from 'components/share-icon';
 
 const SharePage = ({
   url,
@@ -10,7 +11,7 @@ const SharePage = ({
   twitterUsername,
 }) => (
   <ShareWrap>
-    <ShareIconsList className="d-none d-sm-flex d-md-flex d-lg-flex d-xl-flex">
+    <ShareIconsList className="d-none d-sm-flex">
       <ShareIcon
         href={ getTwitterShareUrl({
           text: `${title} ${twitterUsername ? `by @${twitterUsername}` : ''}`,
@@ -18,7 +19,7 @@ const SharePage = ({
         })}
         target="_blank"
       >
-          <FontAwesomeIcon icon={ faTwitterSquare } />
+        <FontAwesomeIcon icon={ faTwitterSquare } />
       </ShareIcon>
       <ShareIcon href={ getFacebookShareUrl({ text: title, url: url }) } target="_blank">
         <FontAwesomeIcon icon={ faFacebookSquare } />

components/share-page/style.js

@@ -19,22 +19,3 @@ export const ShareWrap = styled.div`
   left: -40px;
   min-height: 100%;
 `;
-
-export const ShareIcon = styled.a`
-  display: block;
-  width: 22px;
-  height: 22px;
-  margin-bottom: 8px;
-
-  svg {
-    height: 22px !important;
-    width: 22px !important;
-    color: #757575;
-    transition: all 0.2s;
-    vertical-align: top;
-  }
-  
-  &:hover svg {
-    color: #000000
-  }
-`;