From c1a72f3d2a45b39ee3bde417884bf01b7e7f214c Mon Sep 17 00:00:00 2001
From: Magitron <maggiecaspar@gmail.com>
Date: Sun, 8 Oct 2017 08:29:08 +0700
Subject: [PATCH 1/4] made create-project button component

---
 components/create-button/index-sc.js | 17 +++++++++++++++++
 components/create-button/index.js    | 17 +++++++++++++++++
 components/section/index.js          |  3 +++
 src/welcome/index.js                 | 25 +++++++++++--------------
 styles/constants.js                  |  4 +++-
 5 files changed, 51 insertions(+), 15 deletions(-)
 create mode 100644 components/create-button/index-sc.js
 create mode 100644 components/create-button/index.js

diff --git a/components/create-button/index-sc.js b/components/create-button/index-sc.js
new file mode 100644
index 00000000..0cc6f3fa
--- /dev/null
+++ b/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
diff --git a/components/create-button/index.js b/components/create-button/index.js
new file mode 100644
index 00000000..9b873629
--- /dev/null
+++ b/components/create-button/index.js
@@ -0,0 +1,17 @@
+import PropTypes from 'prop-types'
+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>
+)
+
+CreateButton.propTypes = {
+  children: PropTypes.node.isRequired
+}
+
+export default CreateButton
diff --git a/components/section/index.js b/components/section/index.js
index 2aab84bd..427c623d 100644
--- a/components/section/index.js
+++ b/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;
   `};
 `
 
diff --git a/src/welcome/index.js b/src/welcome/index.js
index f3d5b153..a2d8a67e 100644
--- a/src/welcome/index.js
+++ b/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>
diff --git a/styles/constants.js b/styles/constants.js
index 72355fe0..4157a3c4 100644
--- a/styles/constants.js
+++ b/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 = {

From 52ab077906ca5eca7788b2e280ac84580a3644a7 Mon Sep 17 00:00:00 2001
From: Magitron <maggiecaspar@gmail.com>
Date: Sun, 8 Oct 2017 08:32:42 +0700
Subject: [PATCH 2/4] fixed header layout and added button to profile

---
 src/profile/index.js | 28 +++++++++++++---------------
 1 file changed, 13 insertions(+), 15 deletions(-)

diff --git a/src/profile/index.js b/src/profile/index.js
index 43fc0ef2..e1575b11 100644
--- a/src/profile/index.js
+++ b/src/profile/index.js
@@ -2,13 +2,11 @@ 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 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'
@@ -31,19 +29,19 @@ export const ProfileWrapper = ({
   <div>
     <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>

From 5fd4c2f21368763ec4b0562bb85b089f99a46dde Mon Sep 17 00:00:00 2001
From: Magitron <maggiecaspar@gmail.com>
Date: Fri, 13 Oct 2017 18:07:55 +0700
Subject: [PATCH 3/4] added user name to header bar in profile

---
 components/create-button/index.js |  5 -----
 src/index.js                      | 20 +++++++++-----------
 src/profile/index.js              |  8 +++++++-
 3 files changed, 16 insertions(+), 17 deletions(-)

diff --git a/components/create-button/index.js b/components/create-button/index.js
index 9b873629..a42644fc 100644
--- a/components/create-button/index.js
+++ b/components/create-button/index.js
@@ -1,4 +1,3 @@
-import PropTypes from 'prop-types'
 import {projectRoutes} from '/utils/routes/routes-definitions'
 import {Link} from '/utils/routes'
 
@@ -10,8 +9,4 @@ const CreateButton = () => (
   </Link>
 )
 
-CreateButton.propTypes = {
-  children: PropTypes.node.isRequired
-}
-
 export default CreateButton
diff --git a/src/index.js b/src/index.js
index a67ccec3..9d943021 100644
--- a/src/index.js
+++ b/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>
diff --git a/src/profile/index.js b/src/profile/index.js
index e1575b11..c8698e75 100644
--- a/src/profile/index.js
+++ b/src/profile/index.js
@@ -2,6 +2,7 @@ import styled from 'styled-components'
 import PropTypes from 'prop-types'
 import {graphql} from 'react-apollo'
 import {getAllProjects} from './gq'
+import {media} from '../../styles/media'
 
 import ProjectList from '/components/project/list'
 
@@ -18,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 = ({
@@ -27,7 +33,7 @@ export const ProfileWrapper = ({
   data: {loading, allProjects}
 }) => (
   <div>
-    <HeaderBar />
+    <HeaderBar>{loggedInUser.user.name}</HeaderBar>
     <HeadBanner>
       <Section>
         <FlexContainer>

From 018c9b34a0b1a3c89d47b89428627fdaef46367e Mon Sep 17 00:00:00 2001
From: Mike Nikles <mikenikles@gmail.com>
Date: Fri, 13 Oct 2017 08:21:29 -0700
Subject: [PATCH 4/4] Provide a user.name prop to the Profile component.

---
 __tests__/pages/projects/details.js     | 4 +++-
 src/projects/details/__tests__/index.js | 4 +++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/__tests__/pages/projects/details.js b/__tests__/pages/projects/details.js
index 6aecb20b..1a19a55b 100644
--- a/__tests__/pages/projects/details.js
+++ b/__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'
+        }
       }
     }
   })
diff --git a/src/projects/details/__tests__/index.js b/src/projects/details/__tests__/index.js
index b08bf456..57ac4e5d 100644
--- a/src/projects/details/__tests__/index.js
+++ b/src/projects/details/__tests__/index.js
@@ -13,7 +13,9 @@ const baseProps = {
       location: '',
       title: '',
       type: '',
-      user: {}
+      user: {
+        name: 'Test User'
+      }
     }
   }
 }