swap to styled-components across the app.

UI/.babelrc

@@ -1,5 +1,8 @@
 {
   "presets": [
     "next/babel", "@babel/preset-flow"
+  ],
+  "plugins": [
+    [ "styled-components", { "ssr": true } ]
   ]
 }

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

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')
+}

UI/pages/_app.js

@@ -1,19 +1,19 @@
 import * as React from 'react'
 import App, { Container } from 'next/app'
 import Head from 'next/head'
-import GlobalColors from '../components/global-colors'
-import SocialCards from '../components/social-cards'
-// import RPCClient from '../rpc'
+import Layout from '../components/layout'
+import { withCookies } from '../config/rpc'
 
 class RoleypolyApp extends App {
   static async getInitialProps ({ Component, ctx }) {
     let pageProps = {}
+    const rpc = withCookies(ctx)
 
     if (Component.getInitialProps) {
       pageProps = await Component.getInitialProps(ctx)
     }
 
-    return { pageProps }
+    return { pageProps, user: await rpc.getCurrentUser() }
   }
 
   componentDidMount () {
@@ -54,7 +54,7 @@ class RoleypolyApp extends App {
   }
 
   render () {
-    const { Component, pageProps, router, rpc } = this.props
+    const { Component, pageProps, router, user } = this.props
 
     return (
       <Container>
@@ -64,9 +64,10 @@ class RoleypolyApp extends App {
           <title key='title'>Roleypoly</title>
           <meta name='viewport' content='width=device-width, initial-scale=1' />
         </Head>
-        <GlobalColors />
-        <SocialCards />
-        <Component {...pageProps} router={router} rpc={rpc} />
+
+        <Layout user={user}>
+          <Component {...pageProps} router={router} />
+        </Layout>
       </Container>
     )
   }

UI/pages/_document.js

@@ -0,0 +1,24 @@
+import Document from 'next/document'
+import { ServerStyleSheet } from 'styled-components'
+
+export default class MyDocument extends Document {
+  static async getInitialProps (ctx) {
+    const sheet = new ServerStyleSheet()
+    const originalRenderPage = ctx.renderPage
+
+    try {
+      ctx.renderPage = () =>
+        originalRenderPage({
+          enhanceApp: App => props => sheet.collectStyles(<App {...props} />)
+        })
+
+      const initialProps = await Document.getInitialProps(ctx)
+      return {
+        ...initialProps,
+        styles: <>{initialProps.styles}{sheet.getStyleElement()}</>
+      }
+    } finally {
+      sheet.seal()
+    }
+  }
+}

UI/pages/_test/landing-mock.js

@@ -1,26 +1,9 @@
 // @flow
 import * as React from 'react'
 import type { PageProps } from '../../types'
-import HeaderBar from '../../containers/header-bar'
-import { withCookies } from '../../config/rpc'
-import { type UserPartial } from '../../../services/discord'
-
-type InitialProps = {
-  user: ?UserPartial
-}
-
-export default class LandingTest extends React.Component<PageProps & InitialProps> {
-  static async getInitialProps (ctx: PageProps): Promise<InitialProps> {
-    const rpc = withCookies(ctx)
-
-    return {
-      user: await rpc.getCurrentUser()
-    }
-  }
 
+export default class LandingTest extends React.Component<PageProps> {
   render () {
-    return <div>
-      <HeaderBar user={this.props.user} />
-    </div>
+    return <div />
   }
 }

UI/pages/index.js

@@ -1,91 +1,10 @@
 import React from 'react'
-import Link from 'next/link'
-import Head from '../components/head'
-import Nav from '../components/nav'
+// import Link from 'next/link'
+// import Head from '../components/head'
+// import Nav from '../components/nav'
 
 const Home = () => (
-  <div>
-    <Head title='Home' />
-    <Nav />
-
-    <div className='hero'>
-      <h1 className='title'>Welcome to Next!</h1>
-      <p className='description'>
-        To get started, edit <code>pages/index.js</code> and save to reload.
-      </p>
-
-      <div className='row'>
-        <Link href='https://github.com/zeit/next.js#getting-started'>
-          <a className='card'>
-            <h3>Getting Started &rarr;</h3>
-            <p>Learn more about Next on Github and in their examples</p>
-          </a>
-        </Link>
-        <Link href='https://open.segment.com/create-next-app'>
-          <a className='card'>
-            <h3>Examples &rarr;</h3>
-            <p>
-              Find other example boilerplates on the{' '}
-              <code>create-next-app</code> site
-            </p>
-          </a>
-        </Link>
-        <Link href='https://github.com/segmentio/create-next-app'>
-          <a className='card'>
-            <h3>Create Next App &rarr;</h3>
-            <p>Was this tool helpful? Let us know how we can improve it</p>
-          </a>
-        </Link>
-      </div>
-    </div>
-
-    <style jsx>{`
-      .hero {
-        width: 100%;
-        color: #333;
-      }
-      .title {
-        margin: 0;
-        width: 100%;
-        padding-top: 80px;
-        line-height: 1.15;
-        font-size: 48px;
-      }
-      .title,
-      .description {
-        text-align: center;
-      }
-      .row {
-        max-width: 880px;
-        margin: 80px auto 40px;
-        display: flex;
-        flex-direction: row;
-        justify-content: space-around;
-      }
-      .card {
-        padding: 18px 18px 24px;
-        width: 220px;
-        text-align: left;
-        text-decoration: none;
-        color: #434343;
-        border: 1px solid #9b9b9b;
-      }
-      .card:hover {
-        border-color: #067df7;
-      }
-      .card h3 {
-        margin: 0;
-        color: #067df7;
-        font-size: 18px;
-      }
-      .card p {
-        margin: 0;
-        padding: 12px 0 0;
-        font-size: 13px;
-        color: #333;
-      }
-    `}</style>
-  </div>
+  <h1>Hi there.</h1>
 )
 
 export default Home