Header layout

__tests__/pages/projects/details.js

@@ -16,7 +16,9 @@ const getMockCurrentResult = () =>
         location: 'test-project-location',
         title: 'test-project-title',
         type: 'test-project-type',
-        user: {}
+        user: {
+          name: 'Test User'
+        }
       }
     }
   })

components/create-button/index-sc.js

@@ -0,0 +1,17 @@
+import styled from 'styled-components'
+import {colors} from '../../styles/constants'
+
+const CreateButtonSC = styled.div`
+  color: ${colors.brandBlue};
+  font-size: 18px;
+  cursor: pointer;
+
+  &:hover {
+    color: ${colors.hoverBlue};
+  }
+  &:active {
+    color: ${colors.activeBlue};
+  }
+`
+
+export default CreateButtonSC

components/create-button/index.js

@@ -0,0 +1,12 @@
+import {projectRoutes} from '/utils/routes/routes-definitions'
+import {Link} from '/utils/routes'
+
+import CreateButtonSC from './index-sc'
+
+const CreateButton = () => (
+  <Link route={projectRoutes.create.name}>
+    <CreateButtonSC>+ Create Project</CreateButtonSC>
+  </Link>
+)
+
+export default CreateButton

components/section/index.js

@@ -8,6 +8,9 @@ const SectionSC = styled.div`
 
   ${media.tablet`
     text-align: left;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
   `};
 `
 

src/index.js

@@ -1,7 +1,5 @@
-import {Link} from '../utils/routes'
-import {projectRoutes} from '../utils/routes/routes-definitions'
-
 import Box from '../components/box'
+import CreateButton from '../components/create-button'
 import Search from '../components/search'
 import Section from '../components/section'
 import HeadBanner from '../components/head-banner'
@@ -12,14 +10,14 @@ const Index = () => (
     <Search mobile />
     <HeadBanner>
       <Section>
-        <h1>Welcome!</h1>
-        <p>
-          Get started by creating your own project, or see what projects other’s
-          have done.
-        </p>
-        <Link route={projectRoutes.create.name}>
-          <a>+ Create Project</a>
-        </Link>
+        <div>
+          <h1>Welcome!</h1>
+          <p>
+            Get started by creating your own project, or see what projects
+            other’s have done.
+          </p>
+        </div>
+        <CreateButton />
       </Section>
       <Box>
         <ContextButton>Projects</ContextButton>

src/profile/index.js

@@ -2,13 +2,12 @@ import styled from 'styled-components'
 import PropTypes from 'prop-types'
 import {graphql} from 'react-apollo'
 import {getAllProjects} from './gq'
-import {Link} from '/utils/routes'
-import {projectRoutes} from '/utils/routes/routes-definitions'
+import {media} from '../../styles/media'
 
 import ProjectList from '/components/project/list'
 
-import Add from '/components/add'
 import Avatar from '/components/avatar'
+import CreateButton from '/components/create-button'
 import Box from '/components/box'
 import Section from '/components/section'
 import HeadBanner from '/components/head-banner'
@@ -20,7 +19,12 @@ export const Loading = () => <p>Loading projects...</p>
 const FlexContainer = styled.div`
   display: flex;
   align-items: center;
+  justify-content: center;
   padding: 12px;
+
+  ${media.tablet`
+    justify-content: end;
+  `};
 `
 
 export const ProfileWrapper = ({
@@ -29,21 +33,21 @@ export const ProfileWrapper = ({
   data: {loading, allProjects}
 }) => (
   <div>
-    <HeaderBar />
+    <HeaderBar>{loggedInUser.user.name}</HeaderBar>
     <HeadBanner>
-      <FlexContainer>
-        <Avatar large />
-        <Box pl={1}>
-          <h1>{loggedInUser.user.name}</h1>
-        </Box>
-      </FlexContainer>
       <Section>
-        <a onClick={signOut} onKeyPress={signOut} role="link" tabIndex={0}>
-          Sign out
-        </a>
-        <Link route={projectRoutes.create.name}>
-          <Add>+ Create Project</Add>
-        </Link>
+        <FlexContainer>
+          <Avatar large />
+          <Box pl={1}>
+            <h1>{loggedInUser.user.name}</h1>
+          </Box>
+        </FlexContainer>
+        <div>
+          <a onClick={signOut} onKeyPress={signOut} role="link" tabIndex={0}>
+            Sign out
+          </a>
+          <CreateButton />
+        </div>
       </Section>
       <Box>
         <ContextButton>Projects</ContextButton>

src/projects/details/__tests__/index.js

@@ -13,7 +13,9 @@ const baseProps = {
       location: '',
       title: '',
       type: '',
-      user: {}
+      user: {
+        name: 'Test User'
+      }
     }
   }
 }

src/welcome/index.js

@@ -1,12 +1,11 @@
 import PropTypes from 'prop-types'
 import {graphql} from 'react-apollo'
 import {getAllProjects} from './gq'
-import {Link} from '/utils/routes'
-import {projectRoutes} from '/utils/routes/routes-definitions'
 
 import ProjectList from '/components/project/list'
 
 import Box from '/components/box'
+import CreateButton from '/components/create-button'
 import Search from '/components/search'
 import Section from '/components/section'
 import HeadBanner from '/components/head-banner'
@@ -16,24 +15,22 @@ export const Loading = () => <p>Loading projects...</p>
 
 export const WelcomeWrapper = ({
   loggedInUser,
-  signOut,
   data: {loading, allProjects}
 }) => (
   <div>
     <Search mobile />
     <HeadBanner>
       <Section>
-        <h1>Hello {loggedInUser.user.name}!</h1>
-        <p>
-          We&#39;ve added a new feature! You can now add photos along with your
-          posts.
-        </p>
-        <a onClick={signOut} onKeyPress={signOut} role="link" tabIndex={0}>
-          Sign out
-        </a>
-        <Link route={projectRoutes.create.name}>
-          <a>+ Create Project</a>
-        </Link>
+        <div>
+          <h1>Hello {loggedInUser.user.name}!</h1>
+          <p>
+            We&#39;ve added a new feature! You can now add photos along with
+            your posts.
+          </p>
+        </div>
+        <div>
+          <CreateButton />
+        </div>
       </Section>
       <Box>
         <ContextButton>Projects</ContextButton>

styles/constants.js

@@ -16,7 +16,9 @@ export const neutrals = {
 export const colors = {
   brandBlue: '#1A5CCF',
   brandOrange: '#F9593C',
-  brandYellow: '#FFBB00'
+  brandYellow: '#FFBB00',
+  hoverBlue: '#1552BC',
+  activeBlue: '#1049AC'
 }
 
 export const boxShadows = {