From 4d91936858ddd858fcec6f16a7288002eb91d568 Mon Sep 17 00:00:00 2001
From: Mael <mael.thomas@data.gouv.fr>
Date: Thu, 29 Mar 2018 12:10:09 +0200
Subject: [PATCH] Mise en valeur de la temporalite mensuelle

---
 source/components/TargetSelection.css |  4 ++++
 source/components/TargetSelection.js  | 17 +++++++++++++----
 2 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/source/components/TargetSelection.css b/source/components/TargetSelection.css
index 2891ba1a7..d6d36a231 100644
--- a/source/components/TargetSelection.css
+++ b/source/components/TargetSelection.css
@@ -19,6 +19,10 @@
 	text-align: center;
 	font-size: 170%;
 }
+
+#targetSelection h1 i {
+font-size: 80%;
+}
 #targetSelection #targets {
 	margin: .4em auto;
 	/* For the checkbox that will appear */
diff --git a/source/components/TargetSelection.js b/source/components/TargetSelection.js
index 2fa998c78..079b43d30 100644
--- a/source/components/TargetSelection.js
+++ b/source/components/TargetSelection.js
@@ -39,20 +39,29 @@ export default class TargetSelection extends Component {
 	}
 
 	render() {
-		let { targets, conversationTargetNames } = this.props
+		let { targets, conversationTargetNames, colours } = this.props
 		this.firstEstimationComplete = this.state.activeInput && targets.length > 0
 		return (
 			<div id="targetSelection">
-				{!this.firstEstimationComplete && <h1>Entrez un salaire mensuel</h1>}
 				<section
 					id="targetsContainer"
 					style={{
-						background: this.props.colours.colour,
-						color: this.props.colours.textColour
+						background: colours.colour,
+						color: colours.textColour
 					}}
 				>
 					{this.renderOutputList()}
 				</section>
+				{!this.firstEstimationComplete && (
+					<h1>
+						Entrez un salaire mensuel{' '}
+						<i
+							style={{ color: colours.textColourOnWhite }}
+							className="fa fa-calendar"
+							aria-hidden="true"
+						/>
+					</h1>
+				)}
 
 				{this.firstEstimationComplete && (
 					<div id="action">