flowtyped everything, some functional, safety, and structural changes

UI/components/global-colors.js

@@ -1,3 +1,6 @@
+// @flow
+import * as React from 'react'
+
 export const colors = {
   white: '#efefef',
   c9: '#EBD6D4',
@@ -12,7 +15,7 @@ export const colors = {
 }
 
 const getColors = () => {
-  Object.keys(colors).map(key => {
+  return Object.keys(colors).map(key => {
     const nk = key.replace(/c([0-9])/, '$1')
     return `--c-${nk}: ${colors[key]};`
   }).join('  \n')
@@ -26,6 +29,18 @@ body {
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  /* prevent FOUC */
+  transition: opacity 0.2s ease-in-out;
+  opacity: 0;
+}
+
+.wf-active body {
+  opacity: 1;
+}
+
+// FOUC guard if we take too long
+.force-active body {
+  opacity: 1;
 }
 
 .font-sans-serif {

UI/components/header/auth.js

@@ -0,0 +1,11 @@
+// @flow
+import * as React from 'react'
+import HeaderBarCommon from './common'
+
+const HeaderBarAuth: React.StatelessFunctionalComponent<{}> = () => (
+  <HeaderBarCommon>
+    hi
+  </HeaderBarCommon>
+)
+
+export default HeaderBarAuth

UI/components/header/common.js

@@ -0,0 +1,14 @@
+// @flow
+import * as React from 'react'
+
+export type CommonProps = {
+  children: React.Element<any>
+}
+
+const HeaderBarCommon: React.StatelessFunctionalComponent<CommonProps> = ({ children }) => (
+  <div>
+    { children }
+  </div>
+)
+
+export default HeaderBarCommon

UI/components/header/unauth.js

@@ -0,0 +1,11 @@
+// @flow
+import * as React from 'react'
+import HeaderBarCommon from './common'
+
+const HeaderBarUnauth: React.StatelessFunctionalComponent<{}> = () => (
+  <HeaderBarCommon>
+    hi
+  </HeaderBarCommon>
+)
+
+export default HeaderBarUnauth

UI/components/social-cards.js

@@ -0,0 +1,36 @@
+// @flow
+import * as React from 'react'
+import NextHead from 'next/head'
+
+export type SocialCardProps = {
+  title?: string,
+  description?: string,
+  image?: string,
+  imageSize?: number
+}
+
+const defaultProps: SocialCardProps = {
+  title: 'Roleypoly',
+  description: 'Tame your Discord roles.',
+  image: 'https://rp.kat.cafe/static/social.png',
+  imageSize: 200
+}
+
+const SocialCards: React.StatelessFunctionalComponent<SocialCardProps> = (props) => {
+  props = {
+    ...defaultProps,
+    ...props
+  }
+
+  return <NextHead>
+    <meta key='og:title' property='og:title' content={props.title} />
+    <meta key='og:description' property='og:description' content={props.description} />
+    <meta key='twitter:card' name='twitter:card' content='summary_large_image' />
+    <meta key='twitter:image' name='twitter:image' content={props.image} />
+    <meta key='og:image' property='og:image' content={props.image} />
+    <meta key='og:image:width' property='og:image:width' content={props.imageSize} />
+    <meta key='og:image:height' property='og:image:height' content={props.imageSize} />
+  </NextHead>
+}
+
+export default SocialCards