fixed links in footer

5 files changed, 24 insertions, 27 deletions

diff --git a/packages/dev-tools-pages/ts/components/Footer.tsx b/packages/dev-tools-pages/ts/components/Footer.tsx
index de479a81e..2b7f4f305 100644
--- a/packages/dev-tools-pages/ts/components/Footer.tsx
+++ b/packages/dev-tools-pages/ts/components/Footer.tsx
@@ -25,15 +25,13 @@ function Footer(props: Props) {
                     <List>
                         {tools.map(({ title, subtitle, icon }) => (
                             <ListItem key={title}>
-                                <Icon as={icon} />
-                                <div>
-                                    <Beta>
-                                        <StyledLink colors={colors} href="#">
-                                            {title}
-                                        </StyledLink>
-                                    </Beta>
-                                    <p>{subtitle}</p>
-                                </div>
+                                <ListLink hoverColor={colors.dark} href="#">
+                                    <Icon as={icon} />
+                                    <div>
+                                        <Beta>{title}</Beta>
+                                        <p>{subtitle}</p>
+                                    </div>
+                                </ListLink>
                             </ListItem>
                         ))}
                     </List>
@@ -89,15 +87,14 @@ const Media = styled.div`
 `;
 
 const List = styled.ul`
-    display: flex;
-    width: 66.693548387%;
-    flex-wrap: wrap;
-    flex-direction: row;
+    list-style: none;
     margin: 0;
     padding: 0;
+    width: 66.693548387%;
+    display: flex;
+    flex-wrap: wrap;
 
     ${media.medium`
-    
         width: 100%; 
     `};
 
@@ -107,11 +104,8 @@ const List = styled.ul`
 `;
 
 const ListItem = styled.li`
-    display: flex;
-    align-items: center;
-    flex-basis: 50%;
     margin-bottom: 3.3125rem;
-
+    flex-basis: 50%;
     :nth-last-of-type(-n + 2) {
         margin-bottom: 0;
 
@@ -126,18 +120,17 @@ const ListItem = styled.li`
     `};
 `;
 
+const ListLink = styled.a<{hoverColor: string;}>`
+    display: flex;
+    align-items: center;
+    :hover {
+        color: ${props => props.hoverColor};
+    }
+`;
+
 const Small = styled.small`
     font-size: 1em;
     max-width: 37.5rem;
 `;
 
-const StyledLink =
-    styled.a <
-    { colors: any } >
-    `
-    :hover {
-        color: ${props => props.colors.main};
-    }
-`;
-
 export default withContext(Footer);
diff --git a/packages/dev-tools-pages/ts/context/compiler.tsx b/packages/dev-tools-pages/ts/context/compiler.tsx
index 3c26ffa4a..06860b1e9 100644
--- a/packages/dev-tools-pages/ts/context/compiler.tsx
+++ b/packages/dev-tools-pages/ts/context/compiler.tsx
@@ -12,5 +12,6 @@ export default {
         secondary_alt: '#C4F2FC',
         type: '#30C3E3',
         type_alt: '#16A9C9',
+        dark: '#00404E',
     },
 };
diff --git a/packages/dev-tools-pages/ts/context/cov.tsx b/packages/dev-tools-pages/ts/context/cov.tsx
index 0874513e9..bf3883920 100644
--- a/packages/dev-tools-pages/ts/context/cov.tsx
+++ b/packages/dev-tools-pages/ts/context/cov.tsx
@@ -12,5 +12,6 @@ export default {
         secondary_alt: '#F1D882',
         type: '#D7AE1B',
         type_alt: '#BD9406',
+        dark: '#423300',
     },
 };
diff --git a/packages/dev-tools-pages/ts/context/profiler.tsx b/packages/dev-tools-pages/ts/context/profiler.tsx
index 2b0820add..d5dd2a394 100644
--- a/packages/dev-tools-pages/ts/context/profiler.tsx
+++ b/packages/dev-tools-pages/ts/context/profiler.tsx
@@ -12,5 +12,6 @@ export default {
         secondary_alt: '#FECEBE',
         type: '#EB8666',
         type_alt: '#D16745',
+        dark: '#5F1700',
     },
 };
diff --git a/packages/dev-tools-pages/ts/context/trace.tsx b/packages/dev-tools-pages/ts/context/trace.tsx
index 66112f90f..f001e570c 100644
--- a/packages/dev-tools-pages/ts/context/trace.tsx
+++ b/packages/dev-tools-pages/ts/context/trace.tsx
@@ -12,5 +12,6 @@ export default {
         secondary_alt: '#BFCDFF',
         type: '#7090FF',
         type_alt: '#355CE5',
+        dark: '#0127AB',
     },
 };