From c9ae8cacbf563cd9f13f837395c6ca5c7bf7b2ca Mon Sep 17 00:00:00 2001
From: Mael <mael.thomas@data.gouv.fr>
Date: Tue, 20 Nov 2018 21:02:59 +0100
Subject: [PATCH] =?UTF-8?q?:art:=20Image=20et=20style=20de=20l'ent=C3=AAte?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 source/components/GenericSimulation.css | 27 ++++++++++++--
 source/components/GenericSimulation.js  | 49 ++++++++++++++-----------
 2 files changed, 51 insertions(+), 25 deletions(-)

diff --git a/source/components/GenericSimulation.css b/source/components/GenericSimulation.css
index faa4af4a5..c6c0cb4d1 100644
--- a/source/components/GenericSimulation.css
+++ b/source/components/GenericSimulation.css
@@ -1,10 +1,31 @@
 #GenericSimulation {
 }
-#GenericSimulation > button {
+#GenericSimulation #simulationContent button {
 	padding: 0.6em 1em;
 	text-align: center;
-	margin: 1em auto;
-	display: block;
 	border-radius: 6px;
 	font-weight: 500;
 }
+#GenericSimulation header {
+	display: flex;
+	flex-direction: row-reverse;
+	flex-wrap: wrap;
+	justify-content: center;
+	align-items: center;
+	margin-top: 1em;
+}
+#GenericSimulation header > h1 {
+	margin: 0.6em 1em 0;
+}
+#GenericSimulation img {
+	max-width: 800px;
+	max-height: 24em;
+}
+@media (min-width: 1200px) {
+	#GenericSimulation header > h1 {
+		width: 10em;
+	}
+	#GenericSimulation header {
+		margin-left: 10%;
+	}
+}
diff --git a/source/components/GenericSimulation.js b/source/components/GenericSimulation.js
index 8c26786cf..6e66b7fce 100644
--- a/source/components/GenericSimulation.js
+++ b/source/components/GenericSimulation.js
@@ -21,29 +21,34 @@ export default class YO extends React.Component {
 		let { colours, noNextSteps, previousAnswers } = this.props
 		console.log(noNextSteps)
 		return (
-			<div className="ui__ container" id="GenericSimulation">
-				<h1>Quel est l'impact de vos douches ? </h1>
-				{!isEmpty(previousAnswers) && (
-					<button
-						style={{ background: colours.colour, color: colours.textColour }}
-						onClick={() => this.setState({ displayAnswers: true })}>
-						Mes réponses
-					</button>
-				)}
+			<div id="GenericSimulation">
+				<header>
+					<img src="https://images.unsplash.com/photo-1507652313519-d4e9174996dd?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=014e46e03c4b8f6472e77c50c5088377&auto=format&fit=crop&w=800&q=80" />
+					<h1>Quel est l'impact de vos douches ? </h1>
+				</header>
+				<div className="ui__ container" id="simulationContent">
+					{!isEmpty(previousAnswers) && (
+						<button
+							style={{ background: colours.colour, color: colours.textColour }}
+							onClick={() => this.setState({ displayAnswers: true })}>
+							Mes réponses
+						</button>
+					)}
 
-				{this.state.displayAnswers && (
-					<Answers onClose={() => this.setState({ displayAnswers: false })} />
-				)}
-				<Conversation
-					textColourOnWhite={this.props.colours.textColourOnWhite}
-				/>
-				{noNextSteps && (
-					<>
-						<h2>Plus de questions ! </h2>
-						<p>Vous avez atteint l'estimation la plus précise.</p>
-					</>
-				)}
-				<Targets />
+					{this.state.displayAnswers && (
+						<Answers onClose={() => this.setState({ displayAnswers: false })} />
+					)}
+					<Conversation
+						textColourOnWhite={this.props.colours.textColourOnWhite}
+					/>
+					{noNextSteps && (
+						<>
+							<h2>Plus de questions ! </h2>
+							<p>Vous avez atteint l'estimation la plus précise.</p>
+						</>
+					)}
+					<Targets />
+				</div>
 			</div>
 		)
 	}