swap to styled-components across the app.

UI/kit/debug-breakpoints.js

@@ -0,0 +1,31 @@
+// @flow
+import * as React from 'react'
+import styled from 'styled-components'
+import MediaQuery, { breakpoints } from './media'
+
+const BreakpointDebugFloat = styled.div`
+  position: absolute;
+  bottom: 0em;
+  left: 0;
+  pointer-events: none;
+  height: 1.4em;
+  opacity: 0.4;
+  font-family: monospace;
+`
+
+const Breakpoint = styled.div`
+  padding: 0.1em;
+  display: none;
+  width: 1.5em;
+  text-align: center;
+  background-color: hsl(${(props: any) => props.hue}, 50%, 50%);
+  ${(props: any) => MediaQuery({ [props.bp]: `display: inline-block` })}
+`
+
+const DebugFloater = () => {
+  return <BreakpointDebugFloat>
+    { Object.keys(breakpoints).map((x, i, a) => <Breakpoint key={x} bp={x} hue={(360 / a.length) * i}>{x}</Breakpoint>) }
+  </BreakpointDebugFloat>
+}
+
+export default DebugFloater

UI/kit/media.js

@@ -0,0 +1,32 @@
+// @flow
+export type MediaQuery = $Shape<{
+  xs: string,
+  sm: string,
+  md: string,
+  lg: string,
+  xl: string
+}>
+
+export const breakpoints = {
+  xs: 0,
+  sm: 544,
+  md: 768,
+  lg: 1012,
+  xl: 1280
+}
+
+export default (mq: MediaQuery) => {
+  const out = []
+
+  for (const size in mq) {
+    if (breakpoints[size] == null) {
+      continue
+    }
+
+    const inner = mq[size]
+
+    out.push(`@media screen and (min-width: ${breakpoints[size]}px) {\n${inner}\n};`)
+  }
+
+  return out.join('\n')
+}