swap to styled-components across the app.

UI/components/global-colors.js

@@ -1,5 +1,6 @@
 // @flow
-import * as React from 'react'
+// import * as React from 'react'
+import { createGlobalStyle } from 'styled-components'
 
 export const colors = {
   white: '#efefef',
@@ -21,7 +22,7 @@ const getColors = () => {
   }).join('  \n')
 }
 
-const Colors = () => <style global jsx>{`
+export default createGlobalStyle`
 body {
   margin: 0;
   padding: 0;
@@ -48,7 +49,7 @@ body {
 }
 
 :root {
-  ${getColors()}
+  ${() => getColors()}
 }
 
 ::selection {
@@ -87,6 +88,4 @@ h1,h2,h3,h4,h5,h6 {
   opacity: 0;
 }
 
-`}</style>
-
-export default Colors
+`

UI/components/header/common.js

@@ -1,14 +1,24 @@
 // @flow
 import * as React from 'react'
+import DebugBreakpoints from '../../kit/debug-breakpoints'
+import styled from 'styled-components'
 
 export type CommonProps = {
   children: React.Element<any>
 }
 
-const HeaderBarCommon: React.StatelessFunctionalComponent<CommonProps> = ({ children }) => (
-  <div>
-    { children }
-  </div>
+const Header = styled.div`
+`
+
+const HeaderInner = styled.div``
+
+const HeaderBarCommon = ({ children }: CommonProps) => (
+  <Header>
+    <HeaderInner>
+      { (process.env.NODE_ENV === 'development') && <DebugBreakpoints />}
+      { children }
+    </HeaderInner>
+  </Header>
 )
 
 export default HeaderBarCommon

UI/components/layout.js

@@ -0,0 +1,17 @@
+// @flow
+import * as React from 'react'
+import GlobalColors from './global-colors'
+import SocialCards from './social-cards'
+import HeaderBar from '../containers/header-bar'
+import { type User } from '../containers/user'
+
+const Layout = ({ children, user }: {children: React.Element<any>, user: User }) => <>
+  <GlobalColors />
+  <SocialCards />
+  <div>
+    <HeaderBar user={user} />
+    {children}
+  </div>
+</>
+
+export default Layout