Adjust counter example styles

docs/Counter.js

@@ -2,15 +2,34 @@ import React from 'react'
 import styled from 'styled-components'
 import { space, color } from 'styled-system'
 
+const Root = styled.div([], {
+  display: 'flex',
+  alignItems: 'center'
+})
+
 const Button = styled.button([], {
   appearance: 'none',
   fontFamily: 'inherit',
-  fontSize: '12px',
+  fontSize: 'inherit',
   fontWeight: 'bold',
   borderRadius: '4px',
   border: 'none',
-  margin: '10px'
+  width: '2em',
+  '&:focus': {
+    outline: 'none',
+    boxShadow: '0 0 0 2px magenta'
+  }
 }, space, color)
+Button.defaultProps = {
+  m: 0,
+  px: 3,
+  py: 2,
+  color: 'background',
+  bg: 'text'
+}
+
+const Samp = styled.samp([], {
+}, space)
 
 
 export default class Counter extends React.Component {
@@ -28,12 +47,11 @@ export default class Counter extends React.Component {
 
   render() {
     return (
-      <div>
-        {this.state.count}
-        <hr />
-        <Button onClick={this.inc}>Inc</Button>
-        <Button onClick={this.dec}>Dec</Button>
-      </div>
+      <Root>
+        <Button ml='auto' onClick={this.dec}>-</Button>
+        <Samp mx={3}>{this.state.count}</Samp>
+        <Button mr='auto' onClick={this.inc}>+</Button>
+      </Root>
     )
   }
 }