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

packages/dev-tools-pages/ts/components/Button.tsx

@@ -23,6 +23,9 @@ const Button =
   border-radius: 5rem;
   padding: ${props => (props.large ? '1.125rem 2.375rem' : '.5625rem 1.25rem')};
   display: inline-block;
+  :hover, :focus {
+    color: ${props => props.colors.main};
+  } 
   ${props =>
       props.large &&
       media.small`

packages/dev-tools-pages/ts/components/Code.tsx

@@ -21,6 +21,9 @@ const Button = styled(BaseButton)`
     top: 1rem;
     right: 1rem;
     transition: opacity 0.2s;
+    :focus {
+        opacity: 1;
+    }
 `;
 
 const Base =

packages/dev-tools-pages/ts/components/Footer.tsx

@@ -27,7 +27,11 @@ function Footer(props: Props) {
                             <ListItem key={title}>
                                 <Icon as={icon} />
                                 <div>
-                                    <Beta>{title}</Beta>
+                                    <Beta>
+                                        <StyledLink colors={colors} href="#">
+                                            {title}
+                                        </StyledLink>
+                                    </Beta>
                                     <p>{subtitle}</p>
                                 </div>
                             </ListItem>
@@ -59,13 +63,13 @@ const Top = styled.div`
     justify-content: space-between;
     margin-bottom: 9.375rem;
 
-    ${media.small`
+    ${media.medium`
         display: block;
         margin-bottom: 5.3125rem;
     `};
 
     ${Alpha} {
-        ${media.small`margin-bottom: 3.8125rem;`};
+        ${media.medium`margin-bottom: 3.8125rem;`};
     }
 `;
 
@@ -92,9 +96,13 @@ const List = styled.ul`
     margin: 0;
     padding: 0;
 
+    ${media.medium`
+    
+        width: 100%; 
+    `};
+
     ${media.small`
         display: block;
-        width: 100%; 
     `};
 `;
 
@@ -123,4 +131,13 @@ const Small = styled.small`
     max-width: 37.5rem;
 `;
 
+const StyledLink =
+    styled.a <
+    { colors: any } >
+    `
+    :hover {
+        color: ${props => props.colors.main};
+    }
+`;
+
 export default withContext(Footer);

packages/dev-tools-pages/ts/components/Header.tsx

@@ -62,7 +62,9 @@ const Title = styled.h1`
 `;
 
 const StyledLink = styled(Small)`
-    color: inherit;
+    :hover {
+        text-decoration: underline;
+    }
 `;
 
 const Link = StyledLink as any;

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 => {

packages/dev-tools-pages/ts/globalStyles.tsx

@@ -50,11 +50,16 @@ const BaseStyles = createGlobalStyle`
     }
 
     a {
+        color: inherit;
+        text-decoration: none;
+    }
+
+    a:not([class]) {
         color: ${(props: any) => props.colors.type};
         text-decoration: none; 
 
         &:hover {
-            color: red; //what should this be?
+            text-decoration: underline;
         }
     }
     

packages/dev-tools-pages/ts/variables.tsx

@@ -14,9 +14,8 @@ interface SizesInterface {
 }
 
 const sizes: SizesInterface = {
-    large: 992,
-    medium: 768,
-    small: 376,
+    medium: 900,
+    small: 650,
 };
 
 const media = Object.keys(sizes).reduce((acc: any, label: string) => {