1 files changed, 44 insertions, 46 deletions
diff --git a/packages/dev-tools-pages/ts/components/Footer.tsx b/packages/dev-tools-pages/ts/components/Footer.tsx
index 1a948fe08..d7ed6309a 100644
--- a/packages/dev-tools-pages/ts/components/Footer.tsx
+++ b/packages/dev-tools-pages/ts/components/Footer.tsx
@@ -1,54 +1,49 @@
 import * as React from 'react';
 import styled from 'styled-components';
 
-import { Alpha, Beta } from './Typography';
-import { withContext, Props } from './withContext';
-import Container from './Container';
-import { media } from '../variables';
-
+import { context as compiler } from 'ts/context/compiler';
+import { context as cov } from 'ts/context/cov';
+import { context as profiler } from 'ts/context/profiler';
+import { context as trace } from 'ts/context/trace';
 import MainIcon from 'ts/icons/logos/0x.svg';
-import compiler from 'ts/context/compiler';
-import cov from 'ts/context/cov';
-import profiler from 'ts/context/profiler';
-import trace from 'ts/context/trace';
+import { media } from 'ts/variables';
+
+import { Container } from './Container';
+import { Alpha, Beta } from './Typography';
 
 const tools = [trace, cov, compiler, profiler];
 
-function Footer(props: Props) {
-    const { colors } = props;
-
-    return (
-        <StyledFooter background={colors.secondary}>
-            <Container>
-                <Top>
-                    <Alpha>Other tools by 0x</Alpha>
-                    <List>
-                        {tools.map(({ title, subtitle, icon }) => (
-                            <ListItem key={title}>
-                                <ListLink hoverColor={colors.dark} href="#">
-                                    <Icon as={icon} />
-                                    <div>
-                                        <Beta>{title}</Beta>
-                                        <p>{subtitle}</p>
-                                    </div>
-                                </ListLink>
-                            </ListItem>
-                        ))}
-                    </List>
-                </Top>
-                <Media as="aside">
-                    <Icon as={MainIcon} />
-                    <Small>
+const Footer: React.StatelessComponent<{}> = () => (
+    <StyledFooter>
+        <Container>
+            <Top>
+                <Alpha>Other tools by 0x</Alpha>
+                <List>
+                    {tools.map(({ title, subtitle, icon }) => (
+                        <ListItem key={title}>
+                            <ListLink href="#">
+                                <Icon as={icon} />
+                                <div>
+                                    <Beta>{title}</Beta>
+                                    <p>{subtitle}</p>
+                                </div>
+                            </ListLink>
+                        </ListItem>
+                    ))}
+                </List>
+            </Top>
+            <Media as="aside">
+                <Icon as={MainIcon} />
+                <Small>
                     0x is an open, permissionless protocol allowing for tokens to be traded on the Ethereum blockchain.
-                    </Small>
-                </Media>
-            </Container>
-        </StyledFooter>
-    );
-}
+                </Small>
+            </Media>
+        </Container>
+    </StyledFooter>
+);
 
 const StyledFooter = styled.footer`
-    background-color: ${(props: { background: string }) => props.background};
+    background-color: ${props => props.theme.colors.secondary};
     padding-top: 6.25rem;
     padding-bottom: 5.4375rem;
 
@@ -81,7 +76,7 @@ const Media = styled.div`
     align-items: center;
 
     ${Icon} {
-        margin-top: .5rem;
+        margin-top: 0.5rem;
         align-self: flex-start;
     }
 `;
@@ -95,7 +90,7 @@ const List = styled.ul`
     flex-wrap: wrap;
 
     ${media.medium`
-        width: 100%; 
+        width: 100%;
     `};
 
     ${media.small`
@@ -121,11 +116,14 @@ const ListItem = styled.li`
     `};
 `;
 
-const ListLink = styled.a<{hoverColor: string;}>`
+const ListLink =
+    styled.a <
+    { hoverColor: string } >
+    `
     display: flex;
     align-items: center;
     :hover {
-        color: ${props => props.hoverColor};
+        color: ${props => props.theme.colors.dark};
     }
 `;
 
@@ -134,4 +132,4 @@ const Small = styled.small`
     max-width: 37.5rem;
 `;
 
-export default withContext(Footer);
+export { Footer };