add branding images

branding/logomark.svg

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="350px" height="350px" viewBox="0 0 350 350" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>Slice</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <path d="M95.5351562,425.050781 C180.587008,425.050781 249.535156,356.102633 249.535156,271.050781 C249.535156,185.99893 172.535156,117.050781 95.5351562,117.050781 L95.5351562,425.050781 Z M95.5351563,387.050781 C159.600187,387.050781 211.535156,334.668097 211.535156,270.050781 C211.535156,205.433466 153.535156,153.050781 95.5351563,153.050781 C95.5351562,203.905895 95.5351563,337.260095 95.5351563,387.050781 Z" id="path-1"></path>
+    </defs>
+    <g id="Logomark" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Group" transform="translate(35.000000, -46.000000)">
+            <path d="M21.888,75.368 L120.096,75.368 C142.752113,75.368 159.743943,80.263951 171.072,90.056 C182.400057,99.848049 188.064,113.479913 188.064,130.952 C188.064,140.744049 186.624014,148.855968 183.744,155.288 C180.863986,161.720032 177.504019,166.90398 173.664,170.84 C169.823981,174.77602 166.032019,177.607991 162.288,179.336 C158.543981,181.064009 155.808009,182.215997 154.08,182.792 L154.08,183.368 C157.152015,183.752002 160.463982,184.711992 164.016,186.248 C167.568018,187.784008 170.879985,190.231983 173.952,193.592 C177.024015,196.952017 179.56799,201.319973 181.584,206.696 C183.60001,212.072027 184.608,218.79196 184.608,226.856 C184.608,238.95206 185.519991,249.943951 187.344,259.832 C189.168009,269.720049 191.999981,276.775979 195.84,281 L157.248,281 C154.559987,276.583978 152.976002,271.688027 152.496,266.312 C152.015998,260.935973 151.776,255.752025 151.776,250.76 C151.776,241.351953 151.200006,233.240034 150.048,226.424 C148.895994,219.607966 146.784015,213.944023 143.712,209.432 C140.639985,204.919977 136.464026,201.608011 131.184,199.496 C125.903974,197.383989 119.136041,196.328 110.88,196.328 L57.888,196.328 L57.888,281 L21.888,281 L21.888,75.368 Z M57.888,168.968 L116.928,168.968 C128.448058,168.968 137.18397,166.232027 143.136,160.76 C149.08803,155.287973 152.064,147.080055 152.064,136.136 C152.064,129.607967 151.10401,124.280021 149.184,120.152 C147.26399,116.023979 144.624017,112.808012 141.264,110.504 C137.903983,108.199988 134.064022,106.664004 129.744,105.896 C125.423978,105.127996 120.960023,104.744 116.352,104.744 L57.888,104.744 L57.888,168.968 Z" id="R" fill="#000000"></path>
+            <mask id="mask-2" fill="white">
+                <use xlink:href="#path-1"></use>
+            </mask>
+            <use id="Oval" fill="#000000" transform="translate(172.535156, 271.050781) rotate(45.000000) translate(-172.535156, -271.050781) " xlink:href="#path-1"></use>
+        </g>
+    </g>
+</svg>

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>
 )
 

ui/pages/_app.js

@@ -63,6 +63,7 @@ class RoleypolyApp extends App {
           <meta charSet='utf-8' />
           <title key='title'>Roleypoly</title>
           <meta name='viewport' content='width=device-width, initial-scale=1' />
+          <link rel='icon' href='/static/favicon.png' />
         </Head>
 
         <Layout user={user}>