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 }) => (
+const Header = styled.div`
-  <div>
+`
-    { children }
+
-  </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 Layout from '../components/layout'
-import SocialCards from '../components/social-cards'
+import { withCookies } from '../config/rpc'
-// import RPCClient from '../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 />
+        <Layout user={user}>
-        <Component {...pageProps} router={router} rpc={rpc} />
+          <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>
+    return <div />
-      <HeaderBar user={this.props.user} />
-    </div>
   }
 }

UI/pages/index.js

@@ -1,91 +1,10 @@
 import React from 'react'
-import Link from 'next/link'
+// import Link from 'next/link'
-import Head from '../components/head'
+// import Head from '../components/head'
-import Nav from '../components/nav'
+// import Nav from '../components/nav'
 
 const Home = () => (
-  <div>
+  <h1>Hi there.</h1>
-    <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>
 )
 
 export default Home

flow-typed/npm/babel-plugin-styled-components_vx.x.x.js

@@ -0,0 +1,130 @@
+// flow-typed signature: c631579d6a793a28b84aea5aeb008715
+// flow-typed version: <<STUB>>/babel-plugin-styled-components_v^1.10.0/flow_v0.94.0
+
+/**
+ * This is an autogenerated libdef stub for:
+ *
+ *   'babel-plugin-styled-components'
+ *
+ * Fill this stub out by replacing all the `any` types.
+ *
+ * Once filled out, we encourage you to share your work with the
+ * community by sending a pull request to:
+ * https://github.com/flowtype/flow-typed
+ */
+
+declare module 'babel-plugin-styled-components' {
+  declare module.exports: any;
+}
+
+/**
+ * We include stubs for each file inside this npm package in case you need to
+ * require those files directly. Feel free to delete any files that aren't
+ * needed.
+ */
+declare module 'babel-plugin-styled-components/lib/css/placeholderUtils' {
+  declare module.exports: any;
+}
+
+declare module 'babel-plugin-styled-components/lib/index' {
+  declare module.exports: any;
+}
+
+declare module 'babel-plugin-styled-components/lib/minify/index' {
+  declare module.exports: any;
+}
+
+declare module 'babel-plugin-styled-components/lib/utils/detectors' {
+  declare module.exports: any;
+}
+
+declare module 'babel-plugin-styled-components/lib/utils/getName' {
+  declare module.exports: any;
+}
+
+declare module 'babel-plugin-styled-components/lib/utils/hash' {
+  declare module.exports: any;
+}
+
+declare module 'babel-plugin-styled-components/lib/utils/options' {
+  declare module.exports: any;
+}
+
+declare module 'babel-plugin-styled-components/lib/utils/prefixDigit' {
+  declare module.exports: any;
+}
+
+declare module 'babel-plugin-styled-components/lib/visitors/assignStyledRequired' {
+  declare module.exports: any;
+}
+
+declare module 'babel-plugin-styled-components/lib/visitors/displayNameAndId' {
+  declare module.exports: any;
+}
+
+declare module 'babel-plugin-styled-components/lib/visitors/minify' {
+  declare module.exports: any;
+}
+
+declare module 'babel-plugin-styled-components/lib/visitors/pure' {
+  declare module.exports: any;
+}
+
+declare module 'babel-plugin-styled-components/lib/visitors/templateLiterals/index' {
+  declare module.exports: any;
+}
+
+declare module 'babel-plugin-styled-components/lib/visitors/templateLiterals/transpile' {
+  declare module.exports: any;
+}
+
+declare module 'babel-plugin-styled-components/lib/visitors/transpileCssProp' {
+  declare module.exports: any;
+}
+
+// Filename aliases
+declare module 'babel-plugin-styled-components/lib/css/placeholderUtils.js' {
+  declare module.exports: $Exports<'babel-plugin-styled-components/lib/css/placeholderUtils'>;
+}
+declare module 'babel-plugin-styled-components/lib/index.js' {
+  declare module.exports: $Exports<'babel-plugin-styled-components/lib/index'>;
+}
+declare module 'babel-plugin-styled-components/lib/minify/index.js' {
+  declare module.exports: $Exports<'babel-plugin-styled-components/lib/minify/index'>;
+}
+declare module 'babel-plugin-styled-components/lib/utils/detectors.js' {
+  declare module.exports: $Exports<'babel-plugin-styled-components/lib/utils/detectors'>;
+}
+declare module 'babel-plugin-styled-components/lib/utils/getName.js' {
+  declare module.exports: $Exports<'babel-plugin-styled-components/lib/utils/getName'>;
+}
+declare module 'babel-plugin-styled-components/lib/utils/hash.js' {
+  declare module.exports: $Exports<'babel-plugin-styled-components/lib/utils/hash'>;
+}
+declare module 'babel-plugin-styled-components/lib/utils/options.js' {
+  declare module.exports: $Exports<'babel-plugin-styled-components/lib/utils/options'>;
+}
+declare module 'babel-plugin-styled-components/lib/utils/prefixDigit.js' {
+  declare module.exports: $Exports<'babel-plugin-styled-components/lib/utils/prefixDigit'>;
+}
+declare module 'babel-plugin-styled-components/lib/visitors/assignStyledRequired.js' {
+  declare module.exports: $Exports<'babel-plugin-styled-components/lib/visitors/assignStyledRequired'>;
+}
+declare module 'babel-plugin-styled-components/lib/visitors/displayNameAndId.js' {
+  declare module.exports: $Exports<'babel-plugin-styled-components/lib/visitors/displayNameAndId'>;
+}
+declare module 'babel-plugin-styled-components/lib/visitors/minify.js' {
+  declare module.exports: $Exports<'babel-plugin-styled-components/lib/visitors/minify'>;
+}
+declare module 'babel-plugin-styled-components/lib/visitors/pure.js' {
+  declare module.exports: $Exports<'babel-plugin-styled-components/lib/visitors/pure'>;
+}
+declare module 'babel-plugin-styled-components/lib/visitors/templateLiterals/index.js' {
+  declare module.exports: $Exports<'babel-plugin-styled-components/lib/visitors/templateLiterals/index'>;
+}
+declare module 'babel-plugin-styled-components/lib/visitors/templateLiterals/transpile.js' {
+  declare module.exports: $Exports<'babel-plugin-styled-components/lib/visitors/templateLiterals/transpile'>;
+}
+declare module 'babel-plugin-styled-components/lib/visitors/transpileCssProp.js' {
+  declare module.exports: $Exports<'babel-plugin-styled-components/lib/visitors/transpileCssProp'>;
+}

flow-typed/npm/erlpack_vx.x.x.js

@@ -1,5 +1,5 @@
-// flow-typed signature: 261645a6d1133fb1d26bb2c9286e35b1
+// flow-typed signature: 3328f30279a7faaae4973b8156a23bdc
-// flow-typed version: <<STUB>>/erlpack_vgithub:discordapp/erlpack/flow_v0.94.0
+// flow-typed version: <<STUB>>/erlpack_vhammerandchisel/erlpack/flow_v0.94.0
 
 /**
  * This is an autogenerated libdef stub for:

flow-typed/npm/koa_v2.x.x.js

@@ -1,9 +1,14 @@
-// flow-typed signature: 22454723de346388533aa45cab75d46c
+// flow-typed signature: 32108e9dd6c40b60d7f9e87368b6f966
-// flow-typed version: 5a6a98aaa2/koa_v2.0.x/flow_>=v0.93.x
+// flow-typed version: 5a6a98aaa2/koa_v2.x.x/flow_>=v0.93.x
 
 /*
  * Type def from from source code of koa.
- * this: https://github.com/koajs/koa/commit/fabf5864c6a5dca0782b867a263b1b0825a05bf9
+ * this: https://github.com/koajs/koa/commit/08eb1a20c3975230aa1fe1c693b0cd1ac7a0752b
+ * previous: https://github.com/koajs/koa/commit/fabf5864c6a5dca0782b867a263b1b0825a05bf9
+ *
+ * Changelog
+ * breaking: remove unused app.name
+ * breaking: ctx.throw([status], [msg], [properties]) (caused by http-errors (#957) )
 **/
 declare module 'koa' {
   // Currently, import type doesn't work well ?
@@ -140,7 +145,7 @@ declare module 'koa' {
     request: Request,
 
     // docs/api/response.md#L113.
-    body: string | Buffer | stream$Stream | JSONObject | null, // JSON contains null
+    body: string | Buffer | stream$Stream | JSONObject | JSONArray | null, // JSON contains null
     etag: string,
     header: SimpleHeader,
     headers: SimpleHeader, // alias as header
@@ -227,10 +232,8 @@ declare module 'koa' {
     // context.js#L107
     // if (!(err instanceof Error)) err = new Error(`non-error thrown: ${err}`);
     onerror: (err?: mixed) => void,
-    // context.js#L70
+    // context.md#L88
-    throw: (( statusOrErr: string|number|Error, errOrStatus?: string|number|Error,
+    throw: ( status: number, msg?: string, opts?: {} ) => void,
-      opts?: {}) => void) &
-      (( statusOrErr: string|number|Error, opts?: Object) => void),
     toJSON(): ContextJSON,
     inspect(): ContextJSON,
 
@@ -283,7 +286,7 @@ declare module 'koa' {
     ips: $PropertyType<Request, 'ips'>,
     ip: $PropertyType<Request, 'ip'>,
 
-    [key: string]: mixed, // props added by middlewares.
+    [key: string]: any, // props added by middlewares.
   }
 
   declare type Middleware =
@@ -300,7 +303,6 @@ declare module 'koa' {
     env: string,
     keys?: Array<string>|Object, // https://github.com/crypto-utils/keygrip
     middleware: Array<Middleware>,
-    name?: string, // optionally give your application a name
     proxy: boolean, // when true proxy header fields will be trusted
     request: Request,
     response: Response,

flow-typed/npm/styled-components_v4.x.x.js

@@ -0,0 +1,410 @@
+// flow-typed signature: 8ae4cfa383fc58443d8d65b5301bf1c1
+// flow-typed version: 1a7d5ca288/styled-components_v4.x.x/flow_>=v0.75.x
+
+// @flow
+
+declare module 'styled-components' {
+
+  declare export type Interpolation =
+                                    | (<P: {}>(executionContext: P) => string)
+                                    | CSSRules
+                                    | KeyFrames
+                                    | string
+                                    | number
+
+
+  declare export type CSSRules = Interpolation[]
+
+  // This is not exported on purpose, since it's an implementation detail
+  declare type TaggedTemplateLiteral<R> = (strings : string[], ...interpolations : Interpolation[]) => R
+
+  declare export type CSSConstructor = TaggedTemplateLiteral<CSSRules>
+  declare export type KeyFramesConstructor = TaggedTemplateLiteral<KeyFrames>
+  declare export type CreateGlobalStyleConstructor = TaggedTemplateLiteral<React$ComponentType<*>>
+
+  declare interface Tag<T> {
+    styleTag: HTMLStyleElement | null;
+    getIds(): string[];
+    hasNameForId(id: string, name: string): boolean;
+    insertMarker(id: string): T;
+    insertRules(id: string, cssRules: string[], name: ?string): void;
+    removeRules(id: string): void;
+    css(): string;
+    toHTML(additionalAttrs: ?string): string;
+    toElement(): React$Element<*>;
+    clone(): Tag<T>;
+    sealed: boolean;
+  }
+
+  // The `any`/weak types in here all come from `styled-components` directly, since those definitions were just copied over
+  declare export class StyleSheet {
+    static get master() : StyleSheet;
+    static get instance() : StyleSheet;
+    static reset(forceServer? : boolean) : void;
+
+    id : number;
+    forceServer : boolean;
+    target : ?HTMLElement;
+    tagMap : {[string]: Tag<any>}; // eslint-disable-line flowtype/no-weak-types
+    deferred: { [string]: string[] | void };
+    rehydratedNames: { [string]: boolean };
+    ignoreRehydratedNames: { [string]: boolean };
+    tags: Tag<any>[]; // eslint-disable-line flowtype/no-weak-types
+    importRuleTag: Tag<any>; // eslint-disable-line flowtype/no-weak-types
+    capacity: number;
+    clones: StyleSheet[];
+
+    constructor(?HTMLElement) : this;
+    rehydrate() : this;
+    clone() : StyleSheet;
+    sealAllTags() : void;
+    makeTag(tag : ?Tag<any>) : Tag<any>; // eslint-disable-line flowtype/no-weak-types
+    getImportRuleTag() : Tag<any>; // eslint-disable-line flowtype/no-weak-types
+    getTagForId(id : string): Tag<any>; // eslint-disable-line flowtype/no-weak-types
+    hasId(id: string) : boolean;
+    hasNameForId(id: string, name: string) : boolean;
+    deferredInject(id : string, cssRules : string[]) : void;
+    inject(id: string, cssRules : string[], name? : string) : void;
+    remove(id : string) : void;
+    toHtml() : string;
+    toReactElements() : React$ElementType[];
+  }
+
+  declare export class KeyFrames {
+    id : string;
+    name : string;
+    rules : string[];
+
+    constructor(name : string, rules : string[]) : this;
+    inject(StyleSheet) : void;
+    toString() : string;
+    getName() : string;
+  }
+
+  // I think any is appropriate here?
+  // eslint-disable-next-line flowtype/no-weak-types
+  declare export type Theme = {+[string] : any}
+
+  declare export var css : CSSConstructor;
+  declare export var keyframes : KeyFramesConstructor;
+  declare export var createGlobalStyle : CreateGlobalStyleConstructor
+  declare export var ThemeProvider : React$ComponentType<{children?: ?React$Node, theme : Theme | (Theme) => Theme}>
+
+  // This is a bit hard to read. Not sure how to make it more readable. I think adding line-breaks makes it worse.
+  declare type InjectedProps = { theme : Theme | void }
+  declare  export function withTheme<Props : {}, Component: React$ComponentType<Props>>(WrappedComponent: Component) : React$ComponentType<$Diff<React$ElementConfig<$Supertype<Component>>, InjectedProps>>;
+
+
+  // @HACK This is a cheat to hide that the underlying type is "just a string"
+  //       once we know of a better way, we should be able to update this accordingly.
+  //       I don't think there _is_ a good way, currently.
+  // @NOTE Also not too sure about the naming of this...
+  declare export type StyledElementType<T> = T;
+  declare export type StyledComponentType<C> = {
+    [[call]]: TaggedTemplateLiteral<C>,
+    +attrs: <A: {}>(attributes: A | (props: React$ElementConfig<C>) => A) => TaggedTemplateLiteral<React$ComponentType<$Diff<React$ElementConfig<C>, A>>>
+  };
+
+  declare type StyledComponentList = {
+    a:                        StyledComponentType<StyledElementType<'a'>>,
+    abbr:                     StyledComponentType<StyledElementType<'abbr'>>,
+    address:                  StyledComponentType<StyledElementType<'address'>>,
+    area:                     StyledComponentType<StyledElementType<'area'>>,
+    article:                  StyledComponentType<StyledElementType<'article'>>,
+    aside:                    StyledComponentType<StyledElementType<'aside'>>,
+    audio:                    StyledComponentType<StyledElementType<'audio'>>,
+    b:                        StyledComponentType<StyledElementType<'b'>>,
+    base:                     StyledComponentType<StyledElementType<'base'>>,
+    bdi:                      StyledComponentType<StyledElementType<'bdi'>>,
+    bdo:                      StyledComponentType<StyledElementType<'bdo'>>,
+    big:                      StyledComponentType<StyledElementType<'big'>>,
+    blockquote:               StyledComponentType<StyledElementType<'blockquote'>>,
+    body:                     StyledComponentType<StyledElementType<'body'>>,
+    br:                       StyledComponentType<StyledElementType<'br'>>,
+    button:                   StyledComponentType<StyledElementType<'button'>>,
+    canvas:                   StyledComponentType<StyledElementType<'canvas'>>,
+    caption:                  StyledComponentType<StyledElementType<'caption'>>,
+    cite:                     StyledComponentType<StyledElementType<'cite'>>,
+    code:                     StyledComponentType<StyledElementType<'code'>>,
+    col:                      StyledComponentType<StyledElementType<'col'>>,
+    colgroup:                 StyledComponentType<StyledElementType<'colgroup'>>,
+    data:                     StyledComponentType<StyledElementType<'data'>>,
+    datalist:                 StyledComponentType<StyledElementType<'datalist'>>,
+    dd:                       StyledComponentType<StyledElementType<'dd'>>,
+    del:                      StyledComponentType<StyledElementType<'del'>>,
+    details:                  StyledComponentType<StyledElementType<'details'>>,
+    dfn:                      StyledComponentType<StyledElementType<'dfn'>>,
+    dialog:                   StyledComponentType<StyledElementType<'dialog'>>,
+    div:                      StyledComponentType<StyledElementType<'div'>>,
+    dl:                       StyledComponentType<StyledElementType<'dl'>>,
+    dt:                       StyledComponentType<StyledElementType<'dt'>>,
+    em:                       StyledComponentType<StyledElementType<'em'>>,
+    embed:                    StyledComponentType<StyledElementType<'embed'>>,
+    fieldset:                 StyledComponentType<StyledElementType<'fieldset'>>,
+    figcaption:               StyledComponentType<StyledElementType<'figcaption'>>,
+    figure:                   StyledComponentType<StyledElementType<'figure'>>,
+    footer:                   StyledComponentType<StyledElementType<'footer'>>,
+    form:                     StyledComponentType<StyledElementType<'form'>>,
+    h1:                       StyledComponentType<StyledElementType<'h1'>>,
+    h2:                       StyledComponentType<StyledElementType<'h2'>>,
+    h3:                       StyledComponentType<StyledElementType<'h3'>>,
+    h4:                       StyledComponentType<StyledElementType<'h4'>>,
+    h5:                       StyledComponentType<StyledElementType<'h5'>>,
+    h6:                       StyledComponentType<StyledElementType<'h6'>>,
+    head:                     StyledComponentType<StyledElementType<'head'>>,
+    header:                   StyledComponentType<StyledElementType<'header'>>,
+    hgroup:                   StyledComponentType<StyledElementType<'hgroup'>>,
+    hr:                       StyledComponentType<StyledElementType<'hr'>>,
+    html:                     StyledComponentType<StyledElementType<'html'>>,
+    i:                        StyledComponentType<StyledElementType<'i'>>,
+    iframe:                   StyledComponentType<StyledElementType<'iframe'>>,
+    img:                      StyledComponentType<StyledElementType<'img'>>,
+    input:                    StyledComponentType<StyledElementType<'input'>>,
+    ins:                      StyledComponentType<StyledElementType<'ins'>>,
+    kbd:                      StyledComponentType<StyledElementType<'kbd'>>,
+    keygen:                   StyledComponentType<StyledElementType<'keygen'>>,
+    label:                    StyledComponentType<StyledElementType<'label'>>,
+    legend:                   StyledComponentType<StyledElementType<'legend'>>,
+    li:                       StyledComponentType<StyledElementType<'li'>>,
+    link:                     StyledComponentType<StyledElementType<'link'>>,
+    main:                     StyledComponentType<StyledElementType<'main'>>,
+    map:                      StyledComponentType<StyledElementType<'map'>>,
+    mark:                     StyledComponentType<StyledElementType<'mark'>>,
+    menu:                     StyledComponentType<StyledElementType<'menu'>>,
+    menuitem:                 StyledComponentType<StyledElementType<'menuitem'>>,
+    meta:                     StyledComponentType<StyledElementType<'meta'>>,
+    meter:                    StyledComponentType<StyledElementType<'meter'>>,
+    nav:                      StyledComponentType<StyledElementType<'nav'>>,
+    noscript:                 StyledComponentType<StyledElementType<'noscript'>>,
+    object:                   StyledComponentType<StyledElementType<'object'>>,
+    ol:                       StyledComponentType<StyledElementType<'ol'>>,
+    optgroup:                 StyledComponentType<StyledElementType<'optgroup'>>,
+    option:                   StyledComponentType<StyledElementType<'option'>>,
+    output:                   StyledComponentType<StyledElementType<'output'>>,
+    p:                        StyledComponentType<StyledElementType<'p'>>,
+    param:                    StyledComponentType<StyledElementType<'param'>>,
+    picture:                  StyledComponentType<StyledElementType<'picture'>>,
+    pre:                      StyledComponentType<StyledElementType<'pre'>>,
+    progress:                 StyledComponentType<StyledElementType<'progress'>>,
+    q:                        StyledComponentType<StyledElementType<'q'>>,
+    rp:                       StyledComponentType<StyledElementType<'rp'>>,
+    rt:                       StyledComponentType<StyledElementType<'rt'>>,
+    ruby:                     StyledComponentType<StyledElementType<'ruby'>>,
+    s:                        StyledComponentType<StyledElementType<'s'>>,
+    samp:                     StyledComponentType<StyledElementType<'samp'>>,
+    script:                   StyledComponentType<StyledElementType<'script'>>,
+    section:                  StyledComponentType<StyledElementType<'section'>>,
+    select:                   StyledComponentType<StyledElementType<'select'>>,
+    small:                    StyledComponentType<StyledElementType<'small'>>,
+    source:                   StyledComponentType<StyledElementType<'source'>>,
+    span:                     StyledComponentType<StyledElementType<'span'>>,
+    strong:                   StyledComponentType<StyledElementType<'strong'>>,
+    style:                    StyledComponentType<StyledElementType<'style'>>,
+    sub:                      StyledComponentType<StyledElementType<'sub'>>,
+    summary:                  StyledComponentType<StyledElementType<'summary'>>,
+    sup:                      StyledComponentType<StyledElementType<'sup'>>,
+    table:                    StyledComponentType<StyledElementType<'table'>>,
+    tbody:                    StyledComponentType<StyledElementType<'tbody'>>,
+    td:                       StyledComponentType<StyledElementType<'td'>>,
+    textarea:                 StyledComponentType<StyledElementType<'textarea'>>,
+    tfoot:                    StyledComponentType<StyledElementType<'tfoot'>>,
+    th:                       StyledComponentType<StyledElementType<'th'>>,
+    thead:                    StyledComponentType<StyledElementType<'thead'>>,
+    time:                     StyledComponentType<StyledElementType<'time'>>,
+    title:                    StyledComponentType<StyledElementType<'title'>>,
+    tr:                       StyledComponentType<StyledElementType<'tr'>>,
+    track:                    StyledComponentType<StyledElementType<'track'>>,
+    u:                        StyledComponentType<StyledElementType<'u'>>,
+    ul:                       StyledComponentType<StyledElementType<'ul'>>,
+    var:                      StyledComponentType<StyledElementType<'var'>>,
+    video:                    StyledComponentType<StyledElementType<'video'>>,
+    wbr:                      StyledComponentType<StyledElementType<'wbr'>>,
+
+    // SVG
+    circle:                   StyledComponentType<StyledElementType<'circle'>>,
+    clipPath:                 StyledComponentType<StyledElementType<'clipPath'>>,
+    defs:                     StyledComponentType<StyledElementType<'defs'>>,
+    ellipse:                  StyledComponentType<StyledElementType<'ellipse'>>,
+    g:                        StyledComponentType<StyledElementType<'g'>>,
+    image:                    StyledComponentType<StyledElementType<'image'>>,
+    line:                     StyledComponentType<StyledElementType<'line'>>,
+    linearGradient:           StyledComponentType<StyledElementType<'linearGradient'>>,
+    mask:                     StyledComponentType<StyledElementType<'mask'>>,
+    path:                     StyledComponentType<StyledElementType<'path'>>,
+    pattern:                  StyledComponentType<StyledElementType<'pattern'>>,
+    polygon:                  StyledComponentType<StyledElementType<'polygon'>>,
+    polyline:                 StyledComponentType<StyledElementType<'polyline'>>,
+    radialGradient:           StyledComponentType<StyledElementType<'radialGradient'>>,
+    rect:                     StyledComponentType<StyledElementType<'rect'>>,
+    stop:                     StyledComponentType<StyledElementType<'stop'>>,
+    svg:                      StyledComponentType<StyledElementType<'svg'>>,
+    text:                     StyledComponentType<StyledElementType<'text'>>,
+    tspan:                    StyledComponentType<StyledElementType<'tspan'>>
+  }
+
+  declare export default StyledComponentList & {
+    [[call]]: <S : string>(S) => $ElementType<StyledComponentList, S>,
+    [[call]]: <P : {}, C : React$ComponentType<P>>(C) => StyledComponentType<C>
+  };
+}
+
+
+
+declare module 'styled-components/native' {
+
+  declare export type Interpolation =
+                                    | (<P: {}>(executionContext: P) => string)
+                                    | CSSRules
+                                    | KeyFrames
+                                    | string
+                                    | number
+
+
+  declare export type CSSRules = Interpolation[]
+
+  // This is not exported on purpose, since it's an implementation detail
+  declare type TaggedTemplateLiteral<R> = (strings : string[], ...interpolations : Interpolation[]) => R
+
+  declare export type CSSConstructor = TaggedTemplateLiteral<CSSRules>
+  declare export type KeyFramesConstructor = TaggedTemplateLiteral<KeyFrames>
+  declare export type CreateGlobalStyleConstructor = TaggedTemplateLiteral<React$ComponentType<*>>
+
+  declare interface Tag<T> {
+    styleTag: HTMLStyleElement | null;
+    getIds(): string[];
+    hasNameForId(id: string, name: string): boolean;
+    insertMarker(id: string): T;
+    insertRules(id: string, cssRules: string[], name: ?string): void;
+    removeRules(id: string): void;
+    css(): string;
+    toHTML(additionalAttrs: ?string): string;
+    toElement(): React$Element<*>;
+    clone(): Tag<T>;
+    sealed: boolean;
+  }
+
+  // The `any`/weak types in here all come from `styled-components` directly, since those definitions were just copied over
+  declare export class StyleSheet {
+    static get master() : StyleSheet;
+    static get instance() : StyleSheet;
+    static reset(forceServer? : boolean) : void;
+
+    id : number;
+    forceServer : boolean;
+    target : ?HTMLElement;
+    tagMap : {[string]: Tag<any>}; // eslint-disable-line flowtype/no-weak-types
+    deferred: { [string]: string[] | void };
+    rehydratedNames: { [string]: boolean };
+    ignoreRehydratedNames: { [string]: boolean };
+    tags: Tag<any>[]; // eslint-disable-line flowtype/no-weak-types
+    importRuleTag: Tag<any>; // eslint-disable-line flowtype/no-weak-types
+    capacity: number;
+    clones: StyleSheet[];
+
+    constructor(?HTMLElement) : this;
+    rehydrate() : this;
+    clone() : StyleSheet;
+    sealAllTags() : void;
+    makeTag(tag : ?Tag<any>) : Tag<any>; // eslint-disable-line flowtype/no-weak-types
+    getImportRuleTag() : Tag<any>; // eslint-disable-line flowtype/no-weak-types
+    getTagForId(id : string): Tag<any>; // eslint-disable-line flowtype/no-weak-types
+    hasId(id: string) : boolean;
+    hasNameForId(id: string, name: string) : boolean;
+    deferredInject(id : string, cssRules : string[]) : void;
+    inject(id: string, cssRules : string[], name? : string) : void;
+    remove(id : string) : void;
+    toHtml() : string;
+    toReactElements() : React$ElementType[];
+  }
+
+  declare export class KeyFrames {
+    id : string;
+    name : string;
+    rules : string[];
+
+    constructor(name : string, rules : string[]) : this;
+    inject(StyleSheet) : void;
+    toString() : string;
+    getName() : string;
+  }
+
+  // I think any is appropriate here?
+  // eslint-disable-next-line flowtype/no-weak-types
+  declare export type Theme = {+[string] : any}
+
+  declare export var css : CSSConstructor;
+  declare export var keyframes : KeyFramesConstructor;
+  declare export var createGlobalStyle : CreateGlobalStyleConstructor
+  declare export var ThemeProvider : React$ComponentType<{children?: ?React$Node, theme : Theme | (Theme) => Theme}>
+
+  // This is a bit hard to read. Not sure how to make it more readable. I think adding line-breaks makes it worse.
+  declare type InjectedProps = { theme : Theme | void }
+  declare  export function withTheme<Props : {}, Component: React$ComponentType<Props>>(WrappedComponent: Component) : React$ComponentType<$Diff<React$ElementConfig<$Supertype<Component>>, InjectedProps>>;
+
+
+  // @HACK This is a cheat to hide that the underlying type is "just a string"
+  //       once we know of a better way, we should be able to update this accordingly.
+  //       I don't think there _is_ a good way, currently.
+  // @NOTE Also not too sure about the naming of this...
+  declare export type StyledElementType<T> = T;
+  declare export type StyledComponentType<C> = {
+    [[call]]: TaggedTemplateLiteral<C>,
+    +attrs: <A: {}>(attributes: A) => TaggedTemplateLiteral<React$ComponentType<$Diff<React$ElementConfig<C>, A>>>
+  };
+
+  declare type StyledComponentList = {
+    ActivityIndicator:             StyledComponentType<React$ComponentType<{}>>,
+    ActivityIndicatorIOS:          StyledComponentType<React$ComponentType<{}>>,
+    ART:                           StyledComponentType<React$ComponentType<{}>>,
+    Button:                        StyledComponentType<React$ComponentType<{}>>,
+    DatePickerIOS:                 StyledComponentType<React$ComponentType<{}>>,
+    DrawerLayoutAndroid:           StyledComponentType<React$ComponentType<{}>>,
+    Image:                         StyledComponentType<React$ComponentType<{}>>,
+    ImageBackground:               StyledComponentType<React$ComponentType<{}>>,
+    ImageEditor:                   StyledComponentType<React$ComponentType<{}>>,
+    ImageStore:                    StyledComponentType<React$ComponentType<{}>>,
+    KeyboardAvoidingView:          StyledComponentType<React$ComponentType<{}>>,
+    ListView:                      StyledComponentType<React$ComponentType<{}>>,
+    MapView:                       StyledComponentType<React$ComponentType<{}>>,
+    Modal:                         StyledComponentType<React$ComponentType<{}>>,
+    NavigatorIOS:                  StyledComponentType<React$ComponentType<{}>>,
+    Picker:                        StyledComponentType<React$ComponentType<{}>>,
+    PickerIOS:                     StyledComponentType<React$ComponentType<{}>>,
+    ProgressBarAndroid:            StyledComponentType<React$ComponentType<{}>>,
+    ProgressViewIOS:               StyledComponentType<React$ComponentType<{}>>,
+    ScrollView:                    StyledComponentType<React$ComponentType<{}>>,
+    SegmentedControlIOS:           StyledComponentType<React$ComponentType<{}>>,
+    Slider:                        StyledComponentType<React$ComponentType<{}>>,
+    SliderIOS:                     StyledComponentType<React$ComponentType<{}>>,
+    SnapshotViewIOS:               StyledComponentType<React$ComponentType<{}>>,
+    Switch:                        StyledComponentType<React$ComponentType<{}>>,
+    RecyclerViewBackedScrollView:  StyledComponentType<React$ComponentType<{}>>,
+    RefreshControl:                StyledComponentType<React$ComponentType<{}>>,
+    SafeAreaView:                  StyledComponentType<React$ComponentType<{}>>,
+    StatusBar:                     StyledComponentType<React$ComponentType<{}>>,
+    SwipeableListView:             StyledComponentType<React$ComponentType<{}>>,
+    SwitchAndroid:                 StyledComponentType<React$ComponentType<{}>>,
+    SwitchIOS:                     StyledComponentType<React$ComponentType<{}>>,
+    TabBarIOS:                     StyledComponentType<React$ComponentType<{}>>,
+    Text:                          StyledComponentType<React$ComponentType<{}>>,
+    TextInput:                     StyledComponentType<React$ComponentType<{}>>,
+    ToastAndroid:                  StyledComponentType<React$ComponentType<{}>>,
+    ToolbarAndroid:                StyledComponentType<React$ComponentType<{}>>,
+    Touchable:                     StyledComponentType<React$ComponentType<{}>>,
+    TouchableHighlight:            StyledComponentType<React$ComponentType<{}>>,
+    TouchableNativeFeedback:       StyledComponentType<React$ComponentType<{}>>,
+    TouchableOpacity:              StyledComponentType<React$ComponentType<{}>>,
+    TouchableWithoutFeedback:      StyledComponentType<React$ComponentType<{}>>,
+    View:                          StyledComponentType<React$ComponentType<{}>>,
+    ViewPagerAndroid:              StyledComponentType<React$ComponentType<{}>>,
+    WebView:                       StyledComponentType<React$ComponentType<{}>>,
+    FlatList:                      StyledComponentType<React$ComponentType<{}>>,
+    SectionList:                   StyledComponentType<React$ComponentType<{}>>,
+    VirtualizedList:               StyledComponentType<React$ComponentType<{}>>,
+  }
+
+  declare export default StyledComponentList & {
+    [[call]]: <S : string>(S) => $ElementType<StyledComponentList, S>,
+    [[call]]: <P : {}, C : React$ComponentType<P>>(C) => StyledComponentType<C>
+  };
+}

package.json

@@ -46,6 +46,7 @@
     "redux-thunk": "^2.3.0",
     "sequelize": "^4.43.0",
     "socket.io": "^2.2.0",
+    "styled-components": "^4.1.3",
     "superagent": "^4.1.0",
     "uuid": "^3.3.2"
   },
@@ -58,6 +59,7 @@
     "@babel/preset-env": "^7.3.4",
     "@babel/preset-flow": "^7.0.0",
     "babel-eslint": "^10.0.1",
+    "babel-plugin-styled-components": "^1.10.0",
     "babel-plugin-transform-flow-strip-types": "^6.22.0",
     "chokidar": "^2.1.2",
     "eslint-plugin-flowtype": "^3.4.2",

yarn.lock

@@ -1013,6 +1013,18 @@
   dependencies:
     "@emotion/memoize" "^0.6.6"
 
+"@emotion/is-prop-valid@^0.7.3":
+  version "0.7.3"
+  resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.7.3.tgz#a6bf4fa5387cbba59d44e698a4680f481a8da6cc"
+  integrity sha512-uxJqm/sqwXw3YPA5GXX365OBcJGFtxUVkB6WyezqFHlNe9jqUWH5ur2O2M8dGBz61kn1g3ZBlzUunFQXQIClhA==
+  dependencies:
+    "@emotion/memoize" "0.7.1"
+
+"@emotion/memoize@0.7.1":
+  version "0.7.1"
+  resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.1.tgz#e93c13942592cf5ef01aa8297444dc192beee52f"
+  integrity sha512-Qv4LTqO11jepd5Qmlp3M1YEjBumoTHcHFdgPTQ+sFlIL5myi/7xu/POwP7IRu6odBdmLXdtIs1D6TuW6kbwbbg==
+
 "@emotion/memoize@^0.6.6":
   version "0.6.6"
   resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.6.6.tgz#004b98298d04c7ca3b4f50ca2035d4f60d2eed1b"
@@ -1718,7 +1730,7 @@ babel-plugin-react-require@3.0.0:
   resolved "https://registry.yarnpkg.com/babel-plugin-react-require/-/babel-plugin-react-require-3.0.0.tgz#2e4e7b4496b93a654a1c80042276de4e4eeb20e3"
   integrity sha1-Lk57RJa5OmVKHIAEInbeTk7rIOM=
 
-"babel-plugin-styled-components@>= 1":
+"babel-plugin-styled-components@>= 1", babel-plugin-styled-components@^1.10.0:
   version "1.10.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-styled-components/-/babel-plugin-styled-components-1.10.0.tgz#ff1f42ad2cc78c21f26b62266b8f564dbc862939"
   integrity sha512-sQVKG8irFXx14ZfaK1bBePirfkacl3j8nZwSZK+ZjsbnadRHKQTbhXbe/RB1vT6Vgkz45E+V95LBq4KqdhZUNw==
@@ -8058,6 +8070,23 @@ styled-components@4.1.2:
     stylis-rule-sheet "^0.0.10"
     supports-color "^5.5.0"
 
+styled-components@^4.1.3:
+  version "4.1.3"
+  resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-4.1.3.tgz#4472447208e618b57e84deaaeb6acd34a5e0fe9b"
+  integrity sha512-0quV4KnSfvq5iMtT0RzpMGl/Dg3XIxIxOl9eJpiqiq4SrAmR1l1DLzNpMzoy3DyzdXVDMJS2HzROnXscWA3SEw==
+  dependencies:
+    "@babel/helper-module-imports" "^7.0.0"
+    "@emotion/is-prop-valid" "^0.7.3"
+    "@emotion/unitless" "^0.7.0"
+    babel-plugin-styled-components ">= 1"
+    css-to-react-native "^2.2.2"
+    memoize-one "^4.0.0"
+    prop-types "^15.5.4"
+    react-is "^16.6.0"
+    stylis "^3.5.0"
+    stylis-rule-sheet "^0.0.10"
+    supports-color "^5.5.0"
+
 styled-jsx@3.2.1:
   version "3.2.1"
   resolved "https://registry.yarnpkg.com/styled-jsx/-/styled-jsx-3.2.1.tgz#452051fe50df5e9c7c7f3dd20fa46c3060ac65b0"