diff --git a/branding/logomark.png b/branding/logomark.png new file mode 100644 index 0000000..68f954a Binary files /dev/null and b/branding/logomark.png differ diff --git a/branding/logomark.svg b/branding/logomark.svg new file mode 100644 index 0000000..5cf0043 --- /dev/null +++ b/branding/logomark.svg @@ -0,0 +1,18 @@ + + + + Slice + Created with Sketch. + + + + + + + + + + + + + \ No newline at end of file diff --git a/branding/logotype.svg b/branding/logotype.svg new file mode 100644 index 0000000..c45732e --- /dev/null +++ b/branding/logotype.svg @@ -0,0 +1,16 @@ + + + + Untitled + Created with Sketch. + + + + + + + + + + + \ No newline at end of file diff --git a/ui/components/header/auth.js b/ui/components/header/auth.js index e141c7c..a12c9fc 100644 --- a/ui/components/header/auth.js +++ b/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 }) => ( -
+ <> + Hey there, {user.username}#{user.discriminator} -
+ ) diff --git a/ui/components/header/common.js b/ui/components/header/common.js index 370c1ce..a55dc78 100644 --- a/ui/components/header/common.js +++ b/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 } 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) => (
diff --git a/ui/components/header/unauth.js b/ui/components/header/unauth.js index 21e4a21..8f7d10e 100644 --- a/ui/components/header/unauth.js +++ b/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<{}> = () => ( -
+ <> + Hey stranger. -
+ ) diff --git a/ui/components/logo.js b/ui/components/logo.js new file mode 100644 index 0000000..3bb9721 --- /dev/null +++ b/ui/components/logo.js @@ -0,0 +1,36 @@ +import * as React from 'react' + +const Logotype = ({ fill = 'var(--c-7)', width, height, circleFill = 'var(--c-3)', typeFill, style, className }) => ( + + + + + + + + + + + + +) + +const Logomark = ({ fill = 'var(--c-7)', width, height, circleFill = 'var(--c-3)', typeFill, style, className }) => ( + + + + + + + + + + + + + + +) + +export default Logotype +export { Logotype, Logomark } diff --git a/ui/pages/_app.js b/ui/pages/_app.js index 30f8ecd..06dd69a 100644 --- a/ui/pages/_app.js +++ b/ui/pages/_app.js @@ -63,6 +63,7 @@ class RoleypolyApp extends App { Roleypoly + diff --git a/ui/static/favicon.png b/ui/static/favicon.png new file mode 100644 index 0000000..68f954a Binary files /dev/null and b/ui/static/favicon.png differ