From 751a879c6d43e0e6a4f095b047112473ca4ef35f Mon Sep 17 00:00:00 2001
From: mama <mael.thomas@data.gouv.fr>
Date: Tue, 30 Jan 2018 11:53:35 +0100
Subject: [PATCH] :art: Le bouton principal est toujours visible

---
 source/components/BlueButton.css     | 13 ++++++++++++-
 source/components/BlueButton.js      |  8 ++++++--
 source/components/TargetSelection.js | 14 ++++++--------
 source/containers/reset.css          |  9 ++++++---
 4 files changed, 30 insertions(+), 14 deletions(-)

diff --git a/source/components/BlueButton.css b/source/components/BlueButton.css
index 41924c521..9acc64d02 100644
--- a/source/components/BlueButton.css
+++ b/source/components/BlueButton.css
@@ -9,9 +9,20 @@
 	box-shadow: 0px 9px 14px 0px rgba(0, 0, 0, 0.1);
 	opacity: 0.95;
 	border-radius: 0.2em;
-	cursor: pointer;
+
+	transition: background 0.3s;
 }
 .blueButton:hover {
 	box-shadow: none;
 	opacity: 1;
 }
+.blueButton:disabled {
+	background: #aaa !important;
+}
+.blueButton a {
+	color: inherit;
+}
+
+.blueButton:disabled a {
+	cursor: default;
+}
diff --git a/source/components/BlueButton.js b/source/components/BlueButton.js
index c94b5ffb3..d4a07c900 100644
--- a/source/components/BlueButton.js
+++ b/source/components/BlueButton.js
@@ -4,8 +4,12 @@ import { connect } from 'react-redux'
 
 export default connect(state => ({
 	themeColours: state.themeColours
-}))(({ themeColours, children }) => (
-	<button className="blueButton" style={{ background: themeColours.colour }}>
+}))(({ themeColours, children, disabled, style }) => (
+	<button
+		disabled={disabled}
+		className="blueButton"
+		style={{ ...style, background: themeColours.colour }}
+	>
 		{children}
 	</button>
 ))
diff --git a/source/components/TargetSelection.js b/source/components/TargetSelection.js
index 71dbc829e..647cb2de4 100644
--- a/source/components/TargetSelection.js
+++ b/source/components/TargetSelection.js
@@ -11,22 +11,20 @@ export default class TargetSelection extends Component {
 		targets: []
 	}
 	render() {
-		let { targets } = this.state
+		let { targets } = this.state,
+			ready = targets.length > 0
 
 		return (
 			<section id="targetSelection">
 				<h1>Que voulez-vous calculer ?</h1>
 				{this.renderOutputList()}
-				<div
-					id="action"
-					style={{ visibility: !targets.length ? 'hidden' : 'visible' }}
-				>
+				<div id="action">
 					<p style={{ color: this.props.themeColours.textColourOnWhite }}>
 						Vous pouvez faire plusieurs choix
 					</p>
-					<Link to={'/simu/' + targets.join('+')}>
-						<BlueButton>Valider</BlueButton>
-					</Link>
+					<BlueButton disabled={!ready} style={{ opacity: !ready ? 0.4 : 1 }}>
+						<Link to={'/simu/' + targets.join('+')}>Valider</Link>
+					</BlueButton>
 				</div>
 			</section>
 		)
diff --git a/source/containers/reset.css b/source/containers/reset.css
index 74543295c..8034c6329 100644
--- a/source/containers/reset.css
+++ b/source/containers/reset.css
@@ -13,13 +13,13 @@
 fieldset {
 	border: 0;
 	padding: 0;
-	padding-top: .01em;
+	padding-top: 0.01em;
 	margin: 0;
 	min-width: 0;
 }
 
 /* Remove spinner controls from Firefox */
-input[type="number"] {
+input[type='number'] {
 	appearance: textfield;
 }
 
@@ -41,7 +41,10 @@ label {
 button {
 	background: none;
 	border: 1px solid #222;
-	border-radius: .2em;
+	border-radius: 0.2em;
 	padding: 0 1em;
+}
+
+button:enabled {
 	cursor: pointer;
 }