add branding images

ui/components/header/auth.js

@@ -1,13 +1,14 @@
 // @flow
 import * as React from 'react'
-import HeaderBarCommon from './common'
+import HeaderBarCommon, { Logomark } from './common'
 import { type User } from '../../containers/user'
 
 const HeaderBarAuth: React.StatelessFunctionalComponent<{ user: User }> = ({ user }) => (
   <HeaderBarCommon>
-    <div>
+    <>
+      <Logomark />
       Hey there, {user.username}#{user.discriminator}
-    </div>
+    </>
   </HeaderBarCommon>
 )
 

ui/components/header/common.js

@@ -1,16 +1,38 @@
 // @flow
 import * as React from 'react'
-import DebugBreakpoints from '../../kit/debug-breakpoints'
+import dynamic from 'next/dynamic'
 import styled from 'styled-components'
+import * as logo from '../logo'
 
 export type CommonProps = {
   children: React.Element<any>
 }
 
 const Header = styled.div`
+  background-color: var(--c-dark);
+
 `
 
-const HeaderInner = styled.div``
+const HeaderInner = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  max-width: 960px;
+  width: 100vw;
+  margin: 0 auto;
+  height: 50px;
+`
+
+export const Logotype = styled(logo.Logotype)`
+  height: 30px;
+`
+
+export const Logomark = styled(logo.Logomark)`
+  width: 50px;
+  height: 50px;
+`
+
+const DebugBreakpoints = dynamic(() => import('../../kit/debug-breakpoints'))
 
 const HeaderBarCommon = ({ children }: CommonProps) => (
   <Header>

ui/components/header/unauth.js

@@ -1,12 +1,13 @@
 // @flow
 import * as React from 'react'
-import HeaderBarCommon from './common'
+import HeaderBarCommon, { Logotype } from './common'
 
 const HeaderBarUnauth: React.StatelessFunctionalComponent<{}> = () => (
   <HeaderBarCommon>
-    <div>
+    <>
+      <Logotype />
       Hey stranger.
-    </div>
+    </>
   </HeaderBarCommon>
 )