remove custom outline from buttons in navbar

Author: dcastil

packages/docs/src/components/button.js

@@ -1,7 +1,7 @@
 /** @jsx jsx */
 import { jsx } from 'theme-ui'
 
-export default props => (
+export default (props) => (
   <button
     {...props}
     sx={{
@@ -16,9 +16,6 @@ export default props => (
       bg: 'muted',
       border: 0,
       borderRadius: 2,
-      ':focus': {
-        outline: '2px solid',
-      },
     }}
   />
 )

packages/docs/src/components/menu-button.js

@@ -16,7 +16,7 @@ const Burger = ({ size = '1em' }) => (
   </svg>
 )
 
-export default props => (
+export default (props) => (
   <button
     title="Toggle Menu"
     {...props}
@@ -31,12 +31,7 @@ export default props => (
       m: 0,
       border: 0,
       appearance: 'none',
-      ':focus': {
-        outline: '2px solid',
-      },
-      '@media screen and (min-width: 40em)': {
-        display: 'none',
-      },
+      display: [null, 'none'],
     }}>
     <Burger />
   </button>