Feature/tweaks (#8)

* show copy button on focs

* change base link styling

* text-decoration underline on basic links

* basic hover and focus styles on button and tabs

* add links in footer

* change breakpoints vars

* medium breakpoint on footer

1 files changed, 15 insertions, 13 deletions

diff --git a/packages/dev-tools-pages/ts/components/Tabs.tsx b/packages/dev-tools-pages/ts/components/Tabs.tsx
index 5307483e8..4d436f519 100644
--- a/packages/dev-tools-pages/ts/components/Tabs.tsx
+++ b/packages/dev-tools-pages/ts/components/Tabs.tsx
@@ -24,23 +24,25 @@ const StyledTab = styled(Tab)`
     &:not(:first-of-type) {
         margin-left: 0.25rem;
     }
-    &:focus,
-    &:hover {
-        color: red;
-        outline: 0;
-    }
 `;
 
 const Root =
     styled.div <
-    { primaryColor: string } >
+    { colors: any } >
     `
-  ${StyledTab} {
-    background-color: ${props => props.primaryColor};
-  }
-  ${StyledTab}[aria-selected="true"] {
-    background-color: ${colors.gray};
-  } 
+    ${StyledTab} {
+        background-color: ${props => props.colors.secondary};
+        &[aria-selected="true"] {
+            background-color: ${colors.gray};
+
+        }
+
+        &[aria-selected="false"]:focus,
+        &[aria-selected="false"]:hover {
+            color: ${props => props.colors.main};
+            cursor: pointer;
+        }
+    }
 `;
 
 interface TabsProps extends Props {
@@ -50,7 +52,7 @@ interface TabsProps extends Props {
 function Tabs(props: TabsProps) {
     return (
         <Breakout>
-            <Root primaryColor={props.colors.secondary}>
+            <Root colors={props.colors}>
                 <ReactTabs>
                     <StyledTabList>
                         {React.Children.map(props.children, child => {