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/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..a42644fc --- /dev/null +++ b/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 = () => ( + + + Create Project + +) + +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/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 = () => (
-

Welcome!

-

- Get started by creating your own project, or see what projects other’s - have done. -

- - + Create Project - +
+

Welcome!

+

+ Get started by creating your own project, or see what projects + other’s have done. +

+
+
Projects diff --git a/src/profile/index.js b/src/profile/index.js index 43fc0ef2..c8698e75 100644 --- a/src/profile/index.js +++ b/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 = () =>

Loading projects...

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} }) => (
- + {loggedInUser.user.name} - - - -

{loggedInUser.user.name}

-
-
- - Sign out - - - + Create Project - + + + +

{loggedInUser.user.name}

+
+
+
Projects 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' + } } } } 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 = () =>

Loading projects...

export const WelcomeWrapper = ({ loggedInUser, - signOut, data: {loading, allProjects} }) => (
-

Hello {loggedInUser.user.name}!

-

- We've added a new feature! You can now add photos along with your - posts. -

- - Sign out - - - + Create Project - +
+

Hello {loggedInUser.user.name}!

+

+ We've added a new feature! You can now add photos along with + your posts. +

+
+
+ +
Projects 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 = {