sync, too many changes to list out

ui/components/header/auth.js

@@ -2,12 +2,85 @@
 import * as React from 'react'
 import HeaderBarCommon, { Logomark } from './common'
 import { type User } from '../../containers/user'
+import DiscordIcon from '../discord-guild-pic'
+import styled from 'styled-components'
+import { Hide } from '../../kit/media'
+import Link from 'next/link'
+
+const temporaryServer = {
+  id: '423497622876061707',
+  name: 'Placeholder',
+  icon: '8d03476c186ec8b2f6a1a4f5e55b13fe'
+}
+
+const LogoBox = styled.a`
+  flex: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+`
+
+const StyledServerPic = styled(DiscordIcon)`
+  border-radius: 100%;
+  box-shadow: inset 0 0 5px rgba(0,0,0,0.3);
+  height: 35px;
+  width: 35px;
+  margin-right: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`
+
+const StyledAvatar = styled.img`
+  border-radius: 100%;
+  border: 1px solid var(--c-green);
+  height: 35px;
+  width: 35px;
+  margin-left: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`
+
+const ServerSelector = (props) => <div {...props}>
+  <div>
+    <StyledServerPic {...temporaryServer} />
+  </div>
+  <div>
+    { temporaryServer.name }
+  </div>
+</div>
+
+const StyledServerSelector = styled(ServerSelector)`
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: left;
+`
+
+const UserSection = ({ user, ...props }) => <div {...props}>
+  <Hide.SM>{ user.username }</Hide.SM>
+  <StyledAvatar src={user.avatar} />
+</div>
+
+const StyledUserSection = styled(UserSection)`
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  text-align: right;
+`
 
 const HeaderBarAuth: React.StatelessFunctionalComponent<{ user: User }> = ({ user }) => (
   <HeaderBarCommon>
     <>
-      <Logomark />
-      Hey there, {user.username}#{user.discriminator}
+      <Link href='/s/add' prefetch>
+        <LogoBox>
+          <Logomark />
+        </LogoBox>
+      </Link>
+      <StyledServerSelector />
+      <StyledUserSection user={user} />
     </>
   </HeaderBarCommon>
 )

ui/components/header/common.js

@@ -5,12 +5,14 @@ import styled from 'styled-components'
 import * as logo from '../logo'
 
 export type CommonProps = {
-  children: React.Element<any>
+  children: React.Element<any>,
+  noBackground: boolean
 }
 
 const Header = styled.div`
-  background-color: var(--c-dark);
-
+  ${({ noBackground }: any) => noBackground === false ? 'background-color: var(--c-dark);' : ''}
+  position: relative;
+  transition: background-color 0.3s ease-in-out;
 `
 
 const HeaderInner = styled.div`
@@ -21,6 +23,13 @@ const HeaderInner = styled.div`
   width: 100vw;
   margin: 0 auto;
   height: 50px;
+  padding: 3px 5px;
+  position: relative;
+  top: -1px;
+
+  & > div {
+    margin: 0 0.5em;
+  }
 `
 
 export const Logotype = styled(logo.Logotype)`
@@ -28,16 +37,16 @@ export const Logotype = styled(logo.Logotype)`
 `
 
 export const Logomark = styled(logo.Logomark)`
-  width: 50px;
-  height: 50px;
+  width: 40px;
+  height: 40px;
 `
-
+//
 const DebugBreakpoints = dynamic(() => import('../../kit/debug-breakpoints'))
 
-const HeaderBarCommon = ({ children }: CommonProps) => (
-  <Header>
+const HeaderBarCommon = ({ children, noBackground }: CommonProps) => (
+  <Header noBackground={noBackground}>
+    { (process.env.NODE_ENV === 'development') && <DebugBreakpoints />}
     <HeaderInner>
-      { (process.env.NODE_ENV === 'development') && <DebugBreakpoints />}
       { children }
     </HeaderInner>
   </Header>

ui/components/header/unauth.js

@@ -1,11 +1,25 @@
 // @flow
 import * as React from 'react'
-import HeaderBarCommon, { Logotype } from './common'
+import HeaderBarCommon, { Logotype, type CommonProps } from './common'
+import styled from 'styled-components'
+import Link from 'next/link'
 
-const HeaderBarUnauth: React.StatelessFunctionalComponent<{}> = () => (
-  <HeaderBarCommon>
+const LogoBox = styled.a`
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  cursor: pointer;
+`
+
+const HeaderBarUnauth: React.StatelessFunctionalComponent<CommonProps> = (props) => (
+  <HeaderBarCommon {...props}>
     <>
-      <Logotype />
+      <Link href='/' prefetch>
+        <LogoBox>
+          <Logotype />
+        </LogoBox>
+      </Link>
       Hey stranger.
     </>
   </HeaderBarCommon>