🎨 Affinage du style de la sélection d'objectifs

source/components/BlueButton.css

@@ -1,3 +1,7 @@
+#action a {
+	cursor: default;
+}
+
 .blueButton {
 	color: white;
 	display: block;
@@ -17,12 +21,8 @@
 	opacity: 1;
 }
 .blueButton:disabled {
-	background: #aaa !important;
+	background: #4b4b66 !important;
 }
 .blueButton a {
 	color: inherit;
 }
-
-.blueButton:disabled a {
-	cursor: default;
-}

source/components/TargetSelection.css

@@ -21,18 +21,20 @@
 }
 #targetSelection label {
 	display: block;
-	margin-bottom: 1em;
+	margin-bottom: 1.2em;
 	display: flex;
-	vertical-align: middle;
+	align-items: center;
 	cursor: pointer;
 }
-
+#targetSelection label i {
+	font-size: 180%;
+}
 #targetSelection div {
 	margin-left: 1em;
 }
 
 #targetSelection .optionTitle {
-	font-size: 120%;
+	font-size: 130%;
 }
 #targetSelection label p {
 	margin: 0;

source/components/TargetSelection.js

@@ -22,9 +22,14 @@ export default class TargetSelection extends Component {
 					<p style={{ color: this.props.themeColours.textColourOnWhite }}>
 						Vous pouvez faire plusieurs choix
 					</p>
-					<BlueButton disabled={!ready} style={{ opacity: !ready ? 0.4 : 1 }}>
-						<Link to={'/simu/' + targets.join('+')}>Valider</Link>
-					</BlueButton>
+					<Link to={'/simu/' + targets.join('+')}>
+						<BlueButton
+							disabled={!ready}
+							style={{ opacity: !ready ? 0.15 : 1 }}
+						>
+							Valider
+						</BlueButton>
+					</Link>
 				</div>
 			</section>
 		)
@@ -71,7 +76,6 @@ export default class TargetSelection extends Component {
 								style={
 									optionIsChecked(s)
 										? {
-												fontWeight: 600,
 												color: textColourOnWhite
 											}
 										: {}
@@ -85,7 +89,7 @@ export default class TargetSelection extends Component {
 								) : (
 									<i
 										className="fa fa-square-o fa-2x"
-										style={{ color: '#555' }}
+										style={{ color: '#4b4b66' }}
 									/>
 								)}
 								<div>
@@ -94,7 +98,7 @@ export default class TargetSelection extends Component {
 										style={
 											optionIsChecked(s)
 												? { color: textColourOnWhite }
-												: { color: '#555' }
+												: { color: '#4b4b66' }
 										}
 									>
 										{s['résumé']}