Revue du message de fin / d'affinage

Le beau panneau FIN a fait son temps :-(

source/components/Simulateur.css

@@ -93,7 +93,6 @@
 
 #foldedSteps .header {
 	margin-bottom: 1em;
-	text-align: center;
 }
 #foldedSteps .header h3 {
 	display: inline;
@@ -111,21 +110,6 @@
 
 
 #fin {
-	margin: 0 auto;
-	width: 80%;
-  display: flex;
-	align-items: flex-end;
+	width: 30em;
 	font-style: italic;
 }
-#fin-text {
-	width: 50%;
-	margin-left: 2em;
-	display: inline-block;
-}
-#fin p:first-of-type {
-	font-weight: bold
-}
-#fin img {
-	width: 25%;
-	display: inline-block;
-}

source/components/conversation/Conversation.js

@@ -37,6 +37,8 @@ export default class Conversation extends Component {
 								))}
 						</div>
 					}
+					{unfoldedSteps.length == 0 &&
+						<Conclusion affiner={!R.isEmpty(extraSteps)}/>}
 					{ !R.isEmpty(extraSteps) &&
 						<div id="foldedSteps">
 							<div className="header" >
@@ -64,8 +66,9 @@ export default class Conversation extends Component {
 							/>
 						}}
 					</div>
-					{unfoldedSteps.length == 0 &&
-						<Conclusion simu={this.name}/>}
+					{R.isEmpty(unfoldedSteps) &&
+						<Satisfaction simu={this.props.simu}/>
+					}
 				</div>
 				<Aide />
 			</div>
@@ -73,22 +76,11 @@ export default class Conversation extends Component {
 	}
 }
 
-
-class Conclusion extends Component {
-	render() {
-		return (
-			<div id="fin">
-				<img src={require('../../images/fin.png')} />
-				<div id="fin-text">
-					<p>
-						Votre simulation est terminée !
-					</p>
-					<p>
-						N'hésitez pas à modifier vos réponses, ou cliquez sur vos résultats pour comprendre le calcul.
-					</p>
-					<Satisfaction simu={this.props.simu}/>
-				</div>
-			</div>
-		)
-	}
-}
+let Conclusion = ({ affiner }) => (
+	<div id="fin">
+		<p>
+			Vous pouvez maintenant modifier vos réponses{" "}
+			{affiner && "ou affiner votre situation"} : vos résultats ci-dessous seront mis à jour.
+		</p>
+	</div>
+)

source/components/conversation/conversation.css

@@ -147,7 +147,7 @@
 }
 
 #foldedSteps {
-	margin: 2em 0 4em;
+	margin: 3em 0;
 }
 
 .step.question .variant {