🎨 intègre le simulateur avec un nouveau design plus work in france compatible

2018-07-02 12:03:35 +02:00 · 2018-07-02 12:03:35 +02:00 · 0823cbf0fb
parent 99ef0e3cb2
commit 0823cbf0fb
20 changed files with 171 additions and 439 deletions
--- a/couleur.html
+++ b/couleur.html
@ -1,33 +1,35 @@
 <!DOCTYPE html>
 <html>
-	<head>
-		<meta charset="utf-8">
-		<meta http-equiv="X-UA-Compatible" content="IE=edge">
-		<meta name="viewport" content="initial-scale=1">
-		<title>Embauche.beta - Choix de la couleur</title>
-		<link href='https://fonts.googleapis.com/css?family=Open+Sans:200,300,400,500,600,700' rel='stylesheet' type='text/css'>

-	</head>
-	<style>
-		body {
-			font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
-		}
-		.slider-picker {
-			margin: 3em auto 4em;
-		}
+<head>
+	<meta charset="utf-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<meta name="viewport" content="initial-scale=1">
+	<title>Embauche.beta - Choix de la couleur</title>
+	<link href='https://fonts.googleapis.com/css?family=Roboto:200,400,600' rel='stylesheet' type='text/css'>
+</head>
+<style>
+	body {
+		font-family: 'Roboto', Helvetica, Arial, sans-serif;
+	}

-		.indication {
-			font-size: 80%;
-			font-style: italic;
-			text-align: center;
-		}
-	</style>
+	.slider-picker {
+		margin: 3em auto 4em;
+	}

-	<body>
-		<div id="coulorChooser"></div>
-		<script src="dist/colour-chooser.js"></script>
-		<!-- #1F4382 - #3570B8 - #4A89DC - #4A9DED-->
-		<script src="https://use.fontawesome.com/1da10bbdec.js"></script>
+	.indication {
+		font-size: 80%;
+		font-style: italic;
+		text-align: center;
+	}
+</style>

-	</body>
-</html>
+<body>
+	<div id="coulorChooser"></div>
+	<script src="dist/colour-chooser.js"></script>
+	<!-- #1F4382 - #3570B8 - #4A89DC - #4A9DED-->
+	<script src="https://use.fontawesome.com/1da10bbdec.js"></script>
+
+</body>
+
+</html>
--- a/index.html
+++ b/index.html
@ -6,12 +6,14 @@
 	<meta name="viewport" content="initial-scale=1">
 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
 	<meta name="google-site-verification" content="C03WwnrJP0FLqf83ibMBA7_N-TLQcwsJaAhqKXppxaE" />
-	<title>Simulateur d'embauche</title>
+	<title>🚀 Launch in France</title>
 	<meta name="description" content="Simulation du prix d'une embauche en France et calcul du salaire net à partir du brut : CDD, statut cadre, cotisations sociales, retraite..." data-react-helmet="true">
 	<!-- data-helmet pour que React Helmet puisse écraser ce meta par défaut -->
-	<link href='https://fonts.googleapis.com/css?family=Open+Sans:200,300,400,500,600,700' rel='stylesheet' type='text/css'>
+	<link href='https://fonts.googleapis.com/css?family=Roboto:200,400,600' rel='stylesheet' type='text/css'>
 	<link rel="manifest" href="/manifest.webmanifest">
 	<style>
+		/* Prevent FOUC effect */
+
 		#js {
 			display: none
 		}
--- a/source/components/BlueButton.js
+++ b/source/components/BlueButton.js
@ -1,16 +0,0 @@
-import React from 'react'
-import './BlueButton.css'
-import { connect } from 'react-redux'
-
-export default connect(state => ({
-	themeColours: state.themeColours
-}))(({ themeColours, children, disabled, style, onClick }) => (
-	<button
-		disabled={disabled}
-		onClick={onClick}
-		className="blueButton"
-		style={{ ...style, background: themeColours.colour }}
-	>
-		{children}
-	</button>
-))
--- a/source/components/Continue.js
+++ b/source/components/Continue.js
@ -0,0 +1,28 @@
+/* @flow */
+import React from 'react'
+import { Trans } from 'react-i18next'
+import { connect } from 'react-redux'
+import { noUserInputSelector } from 'Selectors/analyseSelectors'
+import { BlueButton } from './ui/Button'
+
+type Props = {
+	hidden: boolean,
+	onClick: () => void
+}
+const ContinueButton = ({ hidden, onClick }: Props) =>
+	!hidden && (
+		<div>
+			<BlueButton onClick={onClick}>
+				<Trans>Continuer</Trans>
+			</BlueButton>
+		</div>
+	)
+
+export default connect(
+	state => ({
+		hidden: noUserInputSelector(state) || state.conversationStarted
+	}),
+	{
+		onClick: () => ({ type: 'START_CONVERSATION' })
+	}
+)(ContinueButton)
--- a/source/components/Simu.js
+++ b/source/components/Simu.js
@ -4,9 +4,10 @@ import {
 	noUserInputSelector,
 	blockingInputControlsSelector
 } from 'Selectors/analyseSelectors'
+import ContinueButton from './Continue'
 import Conversation from './conversation/Conversation'
 import FoldedSteps, { GoToAnswers } from './conversation/FoldedSteps'
-import ProgressTip from './ProgressTip'
+import GoToExplanations from './GoToExplanations'
 import ResultView from './ResultView/ResultView'
 import './Simu.css'
 import Sondage from './Sondage'
@ -33,17 +34,17 @@ export default class Simu extends Component {
 				<div id="focusZone">
 					<FoldedSteps />
 					<GoToAnswers />
-					<TargetSelection colours={colours} />
 					{conversationStarted &&
 						!blockingInputControls && (
 							<>
-								<ProgressTip />
 								<Conversation textColourOnWhite={colours.textColourOnWhite} />
 							</>
 						)}
+					<TargetSelection colours={colours} />
 					{!noUserInput && !blockingInputControls && <GoToExplanations />}
 				</div>
 				{!noUserInput && !blockingInputControls && <ResultView />}
+				{!noUserInput && !blockingInputControls && <ContinueButton />}
 				{!blockingInputControls && <Sondage />}
 			</div>
 		)
--- a/source/components/TargetSelection.css
+++ b/source/components/TargetSelection.css
@ -10,17 +10,6 @@
 	font-size: 180%;
 }

-#targetSelection #action {
-	text-align: center;
-	margin: 1em auto;
-}
-
-#targetSelection #action p {
-	color: #4b4b66;
-	margin-bottom: 1em;
-	font-size: 120%;
-}
-
 #targetSelection #targets {
 	list-style: none;
 	background: rgba(0, 0, 0, 0.1);
@ -33,6 +22,7 @@
 #targetSelection #targets > li {
 	padding: 0.6em;
 	border-bottom: 1px solid rgba(255, 255, 255, 0.5);
+	margin: 0;
 }
 #targetSelection #targets > li .main {
 	display: flex;
--- a/source/components/TargetSelection.js
+++ b/source/components/TargetSelection.js
@ -13,7 +13,6 @@ import {
 	noUserInputSelector,
 	blockingInputControlsSelector
 } from 'Selectors/analyseSelectors'
-import BlueButton from './BlueButton'
 import CurrencyInput from './CurrencyInput/CurrencyInput'
 import ProgressCircle from './ProgressCircle/ProgressCircle'
 import AnimatedTargetValue from './AnimatedTargetValue'
@ -52,7 +51,6 @@ export let popularTargetNames = [
 	dispatch => ({
 		setFormValue: (field, name) =>
 			dispatch(change('conversation', field, name)),
-		startConversation: () => dispatch({ type: 'START_CONVERSATION' }),
 		setActiveInput: name => dispatch({ type: 'SET_ACTIVE_TARGET_INPUT', name })
 	})
 )
@ -83,20 +81,14 @@ export default class TargetSelection extends Component {
 				{blockingInputControls && (
 					<Controls blockingInputControls={blockingInputControls} />
 				)}
-
 				{!noUserInput &&
 					!blockingInputControls &&
 					!conversationStarted && (
-						<div id="action">
-							<p>
-								<b>
-									<Trans>Première estimation</Trans>
-								</b>
-							</p>
-							<BlueButton onClick={this.props.startConversation}>
-								<Trans>Continuer</Trans>
-							</BlueButton>
-						</div>
+						<h3 style={{ textAlign: 'center', color: 'black' }}>
+							<b>
+								<Trans>Première estimation</Trans>
+							</b>
+						</h3>
 					)}
 			</div>
 		)
--- a/source/components/conversation/FormDecorator.js
+++ b/source/components/conversation/FormDecorator.js
@ -1,10 +1,9 @@
+import classNames from 'classnames'
+import Explicable from 'Components/conversation/Explicable'
 import React, { Component } from 'react'
 import { translate } from 'react-i18next'
-import classNames from 'classnames'
 import { connect } from 'react-redux'
-import { Field, change } from 'redux-form'
-import Explicable from 'Components/conversation/Explicable'
-import IgnoreStepButton from './IgnoreStepButton'
+import { change, Field } from 'redux-form'

 export let buildValidationFunction = valueType => {
 	let validator = valueType ? valueType.validator : {},
@ -44,7 +43,6 @@ export var FormDecorator = formType => RenderField =>
 				stepAction,
 				subquestion,
 				possibleChoice, // should be found in the question set theoritically, but it is used for a single choice question -> the question itself is dynamic and cannot be input as code,
-				defaultValue,
 				valueType,
 				fieldName,
 				inversion,
@ -91,14 +89,6 @@ export var FormDecorator = formType => RenderField =>
 									dangerouslySetInnerHTML={{ __html: subquestion }}
 								/>
 							</div>
-							{defaultValue != null && (
-								<IgnoreStepButton
-									action={() => {
-										setFormValue(fieldName, '' + defaultValue)
-										submit('ignore')
-									}}
-								/>
-							)}
 						</div>
 						<fieldset>
 							<Field
--- a/source/components/conversation/InputSuggestions.css
+++ b/source/components/conversation/InputSuggestions.css
@ -1,4 +1,3 @@
-
 .inputSuggestions {
 	text-align: right;
 }
@ -11,7 +10,8 @@
 }
 .inputSuggestions li {
 	text-align: center;
-    margin-left: 1em;
+	margin: 0;
+	margin-left: 1em;
 	min-width: 2em;
 	border-bottom-width: 1px;
 	border-bottom-style: solid;
--- a/source/components/conversation/conversation.css
+++ b/source/components/conversation/conversation.css
@ -1,7 +1,6 @@
 .scrollIndication {
 	margin: 0.6em 0;
 	font-size: 110%;
-	font-weight: bold;
 }

 .scrollIndication.down {
@ -11,7 +10,6 @@
 #resultsScrollElement,
 #myScrollToElement {
 	text-align: center;
-	font-weight: bold;
 }

 #foldedSteps {
@ -39,7 +37,7 @@
 }

 #currentQuestion {
-	margin-bottom: 4em;
+	margin-bottom: 2em;
 }

 .step {
@ -54,8 +52,9 @@
 	opacity: 1;
 }

-.step-question {
-	max-width: 70%;
+.step-question h1 {
+	font-size: 2rem;
+	color: black;
 }

 .unfoldedHeader {
@ -65,23 +64,6 @@
 	align-items: flex-start;
 }

-.step h1 {
-	border: 2px solid #333350;
-	color: #333350;
-	display: inline-block;
-	font-size: 110%;
-	box-sizing: border-box;
-	text-align: left;
-	font-weight: 600;
-	padding: 0.6em 1em;
-	margin: 0;
-	margin-right: 0.3em;
-	border-radius: 1.4em;
-	position: relative;
-	/* Give some space for the explicable's icon */
-	max-width: 90%;
-}
-
 .step.completed .edit:hover {
 	background: #333350;
 	color: white;
@ -199,8 +181,7 @@
 	padding: 0.25em 0.85em;
 	line-height: 1.8em;
 	border-radius: 1em;
-	font-weight: 600;
-	font-size: 105%;
+	font-size: 120%;
 }

 .resume {
--- a/source/components/inFranceApp/Landing.css
+++ b/source/components/inFranceApp/Landing.css
@ -3,6 +3,7 @@
 	flex-direction: column;
 	align-items: center;
 	justify-content: center;
+	min-height: 100vh;
 }

@media (min-width: 500px) {
@ -24,8 +25,8 @@

 	background: linear-gradient(
 		80deg,
-		rgba(39, 69, 195, 0.87) 10%,
-		rgba(41, 117, 209, 1) 60%,
+		rgba(39, 69, 195, 0.87) 5%,
+		rgba(41, 117, 209, 1) 50%,
 		rgba(200, 40, 120, 0.52) 100%
 	);
 	color: white;
--- a/source/components/inFranceApp/Steps/Cost
+++ b/source/components/inFranceApp/Steps/Cost
@ -1,13 +1,17 @@
 /* @flow */

 import React, { Component } from 'react'
+import { connect } from 'react-redux'
+import * as Animate from '../../animate'
 import type { ComponentType } from 'react'
-
 type State = {
 	simu: ?ComponentType<{}>
 }

-class Hiring extends Component<{}, State> {
+type Props = {
+	hideText: boolean
+}
+class Hiring extends Component<Props, State> {
 	state = { simu: null }
 	componentDidMount() {
 		import('../../../Simu').then(({ default: simu }) => this.setState({ simu }))
@ -15,33 +19,41 @@ class Hiring extends Component<{}, State> {
 	render() {
 		const Simu = this.state.simu
 		return (
-			<fromBottom>
-				<h1>Hiring and social security</h1>
-				<p>
-					France has chosen to provide its citizens with a high-level social
-					safety net. This mandatory system is based on solidarity and designed
-					to ensure the general welfare of its people. All the benefits are
-					included in the Social Security charges as standard.
-				</p>
-				<p>
-					This easy access to health care and other services ensures that
-					companies can put healthy, highly skilled, and productive employees to
-					work in an attractive market in the heart of Europe.
-				</p>
-				<p>
-					By paying in to this system, all of France’s 2.2 million companies,
-					3.2 million self-employed workers, and 25 million employees help to
-					finance an all-included social insurance package.
-				</p>
-				<h2>How much does it cost ?</h2>
-				<p>
-					Explore the costs and benefits by entering a salary in the simulator
-					below:
-				</p>
+			<Animate.fromBottom>
+				{!this.props.hideText && (
+					<>
+						<h1>Hiring and social security</h1>
+						<p>
+							France has chosen to provide its citizens with a high-level social
+							safety net. This mandatory system is based on solidarity and
+							designed to ensure the general welfare of its people. All the
+							benefits are included in the Social Security charges as standard.
+						</p>
+						<p>
+							This easy access to health care and other services ensures that
+							companies can put healthy, highly skilled, and productive
+							employees to work in an attractive market in the heart of Europe.
+						</p>
+						<p>
+							By paying in to this system, all of France’s 2.2 million
+							companies, 3.2 million self-employed workers, and 25 million
+							employees help to finance an all-included social insurance
+							package.
+						</p>
+						<h2>How much does it cost ?</h2>
+						<p>
+							Explore the costs and benefits by entering a salary in the
+							simulator below:
+						</p>
+					</>
+				)}
 				{Simu && <Simu />}
-			</fromBottom>
+			</Animate.fromBottom>
 		)
 	}
 }

-export default Hiring
+export default connect(
+	state => ({ hideText: state.conversationStarted }),
+	{}
+)(Hiring)
--- a/source/components/inFranceApp/ui/Button/button.css
+++ b/source/components/inFranceApp/ui/Button/button.css
@ -13,21 +13,30 @@
 	/* outline: none; */
 	display: inline-block;
 	border-radius: 0.6rem;
-	transition: all 0.2s;
+	transition: all 0.15s;
 	margin: 0.8rem 0;
 	margin-right: 1.6em;
 	text-transform: uppercase;
-	font-family: 'Open Sans', sans-serif;
+	font-family: 'Roboto', sans-serif;
 }
 .ui__.button {
 	border-color: rgb(41, 117, 209);
 	color: rgb(41, 117, 209);
+	background: linear-gradient(
+		45deg,
+		rgba(39, 69, 195, 0.87) 5%,
+		rgba(41, 117, 209, 1) 25%,
+		rgba(200, 40, 120, 0.52) 50%,
+		rgba(255, 255, 255, 0.52) 55%
+	);
+	background-size: 250%;
+	background-position-x: 100%;
 }
 .ui__.button:hover,
 .ui__.button.selected {
-	background-color: rgb(41, 117, 209);
-	color: white;
+	background-position-x: 0%;
 	border-color: white;
+	color: white;
 }
 .ui__.button.cta,
 .ui__.inverted-button.cta {
--- a/source/components/inFranceApp/ui/Typography.css
+++ b/source/components/inFranceApp/ui/Typography.css
@ -1,6 +1,9 @@
 html {
 	font-size: 1em;
 }
+body {
+	font-family: 'Roboto', sans-serif;
+}

 h1 {
 	font-size: 3.1rem;
@ -45,7 +48,6 @@ button {
 p,
 ul {
 	line-height: 1.7rem;
-	font-size: 1.1rem;
 	font-weight: lighter;
 }

--- a/source/components/markdown.css
+++ b/source/components/markdown.css
@ -1,272 +0,0 @@
-/*
-  Thanks https://github.com/GitbookIO/markdown-css
-*/
-
-body {
-  font-family: 'Open Sans', sans-serif;
-  font-weight: 400;
-  font-size: 16px;
-  margin: 0
-
-  background: -webkit-linear-gradient(top,#F8F8F8 10%,#E0E0EA 80%);
-  background: -moz-linear-gradient(top,#F8F8F8 10%,#E0E0EA 80%);
-  background: -o-linear-gradient(top,#F8F8F8 10%,#E0E0EA 80%);
-  background: -ms-linear-gradient(top,#F8F8F8 10%,#E0E0EA 80%);
-  background: linear-gradient(to bottom,#F8F8F8 10%,#E0E0EA 80%);
-}
-
-.md {
-       min-width: 200px;
-       max-width: 790px;
-       margin: 0 auto;
-       padding: 30px;
-   }
-
-.md {
-  display: block;
-  word-wrap: break-word;
-  overflow: hidden;
-  color: rgba(0,0,0,0.8);
-  line-height: 1.7;
-  text-size-adjust: 100%;
-  -ms-text-size-adjust: 100%;
-  -webkit-text-size-adjust: 100%;
-  -moz-text-size-adjust: 100%;
-  /* Printing */
-  /* Typography */
-  /* Spacing */
-  /* Links */
-  /* Images */
-  /* Horizontal lines */
-  /* Headings */
-  /* Code blocks */
-  /* Tables */
-  /* Lists */
-  /* Blockquote */
-  /* Description Lists */
-}
-.md * {
-  box-sizing: border-box;
-  -webkit-box-sizing: border-box;
-  font-size: inherit;
-}
-.md > *:first-child {
-  margin-top: 0 !important;
-}
-.md > *:last-child {
-  margin-bottom: 0 !important;
-}
-.md pre,
-.md code,
-.md blockquote,
-.md tr,
-.md img,
-.md table,
-.md figure {
-  page-break-inside: avoid;
-}
-.md p,
-.md h2,
-.md h3,
-.md h4,
-.md h5 {
-  orphans: 3;
-  widows: 3;
-}
-.md h1,
-.md h2,
-.md h3,
-.md h4,
-.md h5 {
-  page-break-after: avoid;
-}
-.md strong,
-.md b {
-  font-weight: bold;
-}
-.md em {
-  font-style: italic;
-}
-.md p,
-.md blockquote,
-.md ul,
-.md ol,
-.md dl,
-.md table {
-  margin-top: 0;
-  margin-bottom: 0.85em;
-}
-.md a {
-  color: #4183c4;
-  text-decoration: none;
-  background: transparent;
-}
-.md a:hover,
-.md a:focus,
-.md a:active {
-  outline: 0;
-  text-decoration: underline;
-}
-.md img {
-  border: 0;
-  max-width: 100%;
-}
-.md hr {
-  height: 4px;
-  padding: 0;
-  margin: 1.7em 0;
-  overflow: hidden;
-  background-color: #e7e7e7;
-  border: none;
-}
-.md hr:before,
-.md hr:after {
-  display: table;
-  content: " ";
-}
-.md hr:after {
-  clear: both;
-}
-.md h1,
-.md h2,
-.md h3,
-.md h4,
-.md h5,
-.md h6 {
-  margin-top: 1.275em;
-  margin-bottom: 0.85em;
-  font-weight: 400;
-  color: #3C4963;
-}
-.md h1 {
-  font-size: 2em;
-}
-.md h2 {
-  font-size: 1.75em;
-}
-.md h3 {
-  font-size: 1.5em;
-}
-.md h4 {
-  font-size: 1.25em;
-}
-.md h5 {
-  font-size: 1em;
-}
-.md h6 {
-  font-size: 1em;
-  color: #777;
-}
-.md code,
-.md pre {
-  font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
-  direction: ltr;
-  margin: 0px;
-  padding: 0px;
-  border: none;
-  color: inherit;
-}
-.md pre {
-  overflow: auto;
-  word-wrap: normal;
-  margin: 0px;
-  padding: 0.85em 1em;
-  margin-bottom: 1.275em;
-  background: #f7f7f7;
-}
-.md pre > code {
-  display: inline;
-  max-width: initial;
-  padding: 0;
-  margin: 0;
-  overflow: initial;
-  line-height: inherit;
-  font-size: 0.85em;
-  white-space: pre;
-  background: transparent;
-}
-.md pre > code:before,
-.md pre > code:after {
-  content: normal;
-}
-.md code {
-  padding: 0.2em;
-  margin: 0;
-  font-size: 0.85em;
-  background-color: #f7f7f7;
-  border: 1px solid RGBA(60, 73, 99, 0.6);
-}
-.md code:before,
-.md code:after {
-  letter-spacing: -0.2em;
-  content: "\00a0";
-}
-.md table {
-  display: table;
-  width: 100%;
-  border-collapse: collapse;
-  border-spacing: 0;
-  overflow: auto;
-}
-.md table td,
-.md table th {
-  padding: 6px 13px;
-  border: 1px solid #ddd;
-}
-.md table tr {
-  background-color: #fff;
-  border-top: 1px solid #ccc;
-}
-.md table tr:nth-child(2n) {
-  background-color: #f8f8f8;
-}
-.md table th {
-  font-weight: bold;
-}
-.md ul,
-.md ol {
-  padding: 0;
-  margin: 0;
-  margin-bottom: 0.85em;
-  padding-left: 2em;
-}
-.md ul ol,
-.md ol ol,
-.md ul ul,
-.md ol ul {
-  margin-top: 0;
-  margin-bottom: 0;
-}
-.md ol ol {
-  list-style-type: lower-roman;
-}
-.md blockquote {
-  margin: 0;
-  margin-bottom: 0.85em;
-  padding: 0 15px;
-  color: #858585;
-  border-left: 4px solid RGBA(60, 73, 99, 0.6);
-}
-.md blockquote:first-child {
-  margin-top: 0;
-}
-.md blockquote:last-child {
-  margin-bottom: 0;
-}
-.md dl {
-  padding: 0;
-}
-.md dl dt {
-  padding: 0;
-  margin-top: 0.85em;
-  font-style: italic;
-  font-weight: bold;
-}
-.md dl dd {
-  padding: 0 0.85em;
-  margin-bottom: 0.85em;
-}
-.md dd {
-  margin-left: 0;
-}
-ma
--- a/source/components/pages/About.js
+++ b/source/components/pages/About.js
@ -1,8 +1,9 @@
 import React, { Component } from 'react'
-import './Pages.css'
-import './About.css'
 import { Link } from 'react-router-dom'
-import BlueButton from '../BlueButton'
+import { BlueButton } from '../ui/Button'
+import './About.css'
+import './MailChimp.css'
+import './Pages.css'

 export default class About extends Component {
 	render() {
@ -58,7 +59,7 @@ export default class About extends Component {
 				<p>
 					Par contre, nous recueillons des statistiques anonymes d'usage du
 					site, que nous utilisons dans l'unique but d'améliorer le service,
-					conformément au{' '}
+					conformément aux{' '}
 					<a href="https://www.cnil.fr/fr/solutions-pour-les-cookies-de-mesure-daudience">
 						recommandations de la CNIL
 					</a>.
@ -69,8 +70,6 @@ export default class About extends Component {
 	}
 }

-import './MailChimp.css'
-
 let MailChimp = () => (
 	<div id="mc_embed_signup">
 		<form
--- a/source/components/ui/Button/BlueButton.css
+++ b/source/components/ui/Button/BlueButton.css
@ -1,7 +1,3 @@
-#action a {
-	cursor: default;
-}
-
 .blueButton {
 	color: white;
 	display: block;
--- a/source/components/ui/Button/BlueButton.js
+++ b/source/components/ui/Button/BlueButton.js
@ -0,0 +1,15 @@
+import React from 'react'
+import withColours from '../../withColours'
+import './BlueButton.css'
+
+export default withColours(
+	({ colours, children, disabled, style, onClick }) => (
+		<button
+			disabled={disabled}
+			onClick={onClick}
+			className="blueButton"
+			style={{ ...style, background: colours.colour }}>
+			{children}
+		</button>
+	)
+)
--- a/source/components/ui/Button/index.js
+++ b/source/components/ui/Button/index.js
@ -16,16 +16,17 @@ const buttonCreator = (buttonClassName, coloursToStyle) =>
 	))

 export const LinkButton = buttonCreator(
-	'ui-unstyledButton ui-linkButton', 
-	(colours) => ({color: colours.textColourOnWhite})
-);
-export const SimpleButton = buttonCreator(
-	'ui-unstyledButton', 
-	(colours) => ({color: colours.textColourOnWhite})
-);
-const Button = buttonCreator(
-	'ui-unstyledButton ui-defaultButton', 
-	(colours) => ({color: colours.textColourOnWhite, borderColor: colours.colour})
-);
+	'ui-unstyledButton ui-linkButton',
+	colours => ({ color: colours.textColourOnWhite })
+)
+export const SimpleButton = buttonCreator('ui-unstyledButton', colours => ({
+	color: colours.textColourOnWhite
+}))
+const Button = buttonCreator('ui-unstyledButton ui-defaultButton', colours => ({
+	color: colours.textColourOnWhite,
+	borderColor: colours.colour
+}))
+
+export { default as BlueButton } from './BlueButton'

 export default Button
--- a/source/containers/reset.css
+++ b/source/containers/reset.css
@ -15,7 +15,6 @@ html {
 }

 body {
-	font-family: 'Open Sans';
 	margin: 0;
 	height: 100%;
 }