Using reusable Link for feature link. Added responsive styles for it.

packages/website/ts/components/docs/feature_link.tsx

@@ -1,6 +1,10 @@
 import React from 'react';
 import styled from 'styled-components';
 
+import MediaQuery from 'react-responsive';
+
+import { Link } from '@0x/react-shared';
+
 import { Icon } from 'ts/components/icon';
 import { Heading, Paragraph } from 'ts/components/text';
 
@@ -14,37 +18,70 @@ interface IFeatureLinkProps {
 }
 
 export const FeatureLink: React.FC<IFeatureLinkProps> = props => (
-    <FeatureLinkWrapper href={props.url}>
-        <Icon color={colors.brandLight} name={props.icon} size={60} margin={[0, 30, 0, 0]} />
+    <FeatureLinkWrapper to={props.url}>
+        <StyledIcon color={colors.brandLight} name={props.icon} size={60} />
         <Content>
-            <Heading asElement="h3" size="small" marginBottom="6px">
-                {props.heading}
-            </Heading>
-            <Paragraph size="default" marginBottom="0">
-                {props.description}
-            </Paragraph>
+            <div>
+                <Heading asElement="h3" size="small" marginBottom="6px">
+                    {props.heading}
+                </Heading>
+                <Paragraph size="default" marginBottom="0">
+                    {props.description}
+                </Paragraph>
+            </div>
+
+            <MediaQuery minWidth={500}>
+                <svg viewBox="0 0 14 14" width="14" height="14" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path
+                        fillRule="evenodd"
+                        clipRule="evenodd"
+                        d="M2 0h11.5v11H12V2.62L1.06 13.56 0 12.5l11-11H2V0z"
+                        fill="currentColor"
+                    />
+                </svg>
+            </MediaQuery>
         </Content>
-        <svg viewBox="0 0 14 14" width="14" height="14" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path
-                fillRule="evenodd"
-                clipRule="evenodd"
-                d="M2 0h11.5v11H12V2.62L1.06 13.56 0 12.5l11-11H2V0z"
-                fill="currentColor"
-            />
-        </svg>
     </FeatureLinkWrapper>
 );
 
-const FeatureLinkWrapper = styled.a`
+const StyledIcon = styled(Icon)`
+    margin-bottom: 12px;
+
+    @media (min-width: 500px) {
+        margin-bottom: 0;
+        margin-right: 30px;
+    }
+`;
+
+const FeatureLinkWrapper = styled(Link)`
     background-color: ${colors.backgroundLight};
     border: 1px solid #dbdfdd;
     padding: 30px;
+    margin-bottom: 0.56rem;
+
     display: flex;
     align-items: center;
-    margin-bottom: 0.555555556rem;
+    flex-direction: column;
+
+    @media (min-width: 500px) {
+        flex-direction: row;
+    }
 `;
 
 const Content = styled.div`
-    margin-right: auto;
-    padding-right: 30px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex: 1;
+
+    text-align: center;
+
+    @media (min-width: 500px) {
+        text-align: left;
+    }
+
+    svg {
+        margin-left: 30px;
+        min-width: 14px;
+    }
 `;