🎨 Le bouton principal est toujours visible

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;
+}

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>
 ))

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>
 		)

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;
 }