From b19769157c4ed2c9389bd0d9aa9579437290c560 Mon Sep 17 00:00:00 2001
From: Johan Girod <johan.girod@beta.gouv.fr>
Date: Thu, 18 Feb 2021 18:10:34 +0100
Subject: [PATCH] =?UTF-8?q?Am=C3=A9liore=20l'UX=20du=20bloc=20question=20d?=
 =?UTF-8?q?ans=20les=20simulateurs?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../source/components/Notifications.tsx       |  2 +-
 .../source/components/QuickLinks.tsx          | 11 ++--
 .../source/components/Simulation.tsx          | 51 +++++++++++--------
 .../components/conversation/Conversation.tsx  |  6 ++-
 .../components/conversation/Explicable.tsx    |  1 -
 .../conversation/SeeAnswersButton.tsx         |  2 +-
 .../source/components/ui/Progress.css         |  4 +-
 7 files changed, 43 insertions(+), 34 deletions(-)

diff --git a/mon-entreprise/source/components/Notifications.tsx b/mon-entreprise/source/components/Notifications.tsx
index af92b98b6..7fc85e604 100644
--- a/mon-entreprise/source/components/Notifications.tsx
+++ b/mon-entreprise/source/components/Notifications.tsx
@@ -64,7 +64,7 @@ export default function Notifications() {
 						<animate.fromTop key={dottedName}>
 							<li>
 								<div className="notification">
-									{emoji(sévérité == 'avertissement' ? '⚠️' : 'ℹ️')}
+									{emoji(sévérité == 'avertissement' ? '⚠️' : '💁🏻')}
 									<div className="notificationText ui__ card">
 										<Markdown source={description} />
 										<button
diff --git a/mon-entreprise/source/components/QuickLinks.tsx b/mon-entreprise/source/components/QuickLinks.tsx
index f79006a7c..526091eea 100644
--- a/mon-entreprise/source/components/QuickLinks.tsx
+++ b/mon-entreprise/source/components/QuickLinks.tsx
@@ -1,15 +1,14 @@
 import { goToQuestion } from 'Actions/actions'
+import { DottedName } from 'modele-social'
 import { contains, filter, pipe, reject, toPairs } from 'ramda'
 import { Trans } from 'react-i18next'
 import { useDispatch, useSelector } from 'react-redux'
 import { RootState } from 'Reducers/rootReducer'
-import { DottedName } from 'modele-social'
-
-import { useNextQuestions } from './utils/useNextQuestion'
 import {
 	answeredQuestionsSelector,
 	currentQuestionSelector,
 } from 'Selectors/simulationSelectors'
+import { useNextQuestions } from './utils/useNextQuestion'
 
 export default function QuickLinks() {
 	const currentQuestion = useSelector(currentQuestionSelector)
@@ -34,8 +33,8 @@ export default function QuickLinks() {
 	}
 
 	return (
-		<span>
-			<small>Questions :</small>
+		<small>
+			Questions :
 			{links.map(([label, dottedName]) => (
 				<button
 					key={dottedName}
@@ -49,6 +48,6 @@ export default function QuickLinks() {
 				</button>
 			))}{' '}
 			{/* <button className="ui__ link-button">Voir la liste</button> */}
-		</span>
+		</small>
 	)
 }
diff --git a/mon-entreprise/source/components/Simulation.tsx b/mon-entreprise/source/components/Simulation.tsx
index f505b14dd..1673558dd 100644
--- a/mon-entreprise/source/components/Simulation.tsx
+++ b/mon-entreprise/source/components/Simulation.tsx
@@ -1,9 +1,7 @@
 import Conversation, {
 	ConversationProps,
 } from 'Components/conversation/Conversation'
-import SeeAnswersButton from 'Components/conversation/SeeAnswersButton'
 import PageFeedback from 'Components/Feedback/PageFeedback'
-import Notifications from 'Components/Notifications'
 import SearchButton from 'Components/SearchButton'
 import ShareSimulationBanner from 'Components/ShareSimulationBanner'
 import TargetSelection from 'Components/TargetSelection'
@@ -15,6 +13,7 @@ import { Trans } from 'react-i18next'
 import { useSelector } from 'react-redux'
 import { firstStepCompletedSelector } from 'Selectors/simulationSelectors'
 import { TrackPage } from '../ATInternetTracking'
+import SeeAnswersButton from './conversation/SeeAnswersButton'
 
 type SimulationProps = {
 	explanations?: React.ReactNode
@@ -73,28 +72,36 @@ export function Questions({
 
 	return (
 		<>
-			<div
-				style={{
-					display: 'flex',
-					justifyContent: 'space-between',
-					marginTop: '1.2rem',
-					marginBottom: '0.6rem',
-				}}
-			>
-				{progress < 1 ? (
-					<small css="padding: 0.4rem 0">
-						<Trans i18nKey="simulateurs.précision.défaut">
-							Affinez votre simulation en répondant aux questions :
-						</Trans>
-					</small>
-				) : (
-					<span />
-				)}
-				<SeeAnswersButton />
-			</div>
 			<section className="ui__ full-width lighter-bg">
 				<div className="ui__ container">
-					<Notifications />
+					<div
+						css={`
+							display: flex;
+							flex-wrap: wrap;
+							justify-content: center;
+							align-items: baseline;
+						`}
+					>
+						{progress < 1 && (
+							<h2
+								css={`
+									font-family: 'roboto';
+									font-weight: normal;
+									flex: 1;
+									font-size: 1.1rem;
+									margin-top: 0;
+								`}
+							>
+								<small>
+									<Trans i18nKey="simulateurs.précision.défaut">
+										Améliorez votre simulation en répondant aux questions
+									</Trans>
+								</small>
+							</h2>
+						)}
+						<SeeAnswersButton />
+					</div>
+
 					<Conversation customEndMessages={customEndMessages} />
 				</div>
 			</section>
diff --git a/mon-entreprise/source/components/conversation/Conversation.tsx b/mon-entreprise/source/components/conversation/Conversation.tsx
index dc38b5d4b..84b37577f 100644
--- a/mon-entreprise/source/components/conversation/Conversation.tsx
+++ b/mon-entreprise/source/components/conversation/Conversation.tsx
@@ -1,5 +1,6 @@
 import { goToQuestion, stepAction, updateSituation } from 'Actions/actions'
 import RuleInput, { InputProps } from 'Components/conversation/RuleInput'
+import Notifications from 'Components/Notifications'
 import QuickLinks from 'Components/QuickLinks'
 import * as Animate from 'Components/ui/animate'
 import { EngineContext } from 'Components/utils/EngineContext'
@@ -62,7 +63,8 @@ export default function Conversation({ customEndMessages }: ConversationProps) {
 				<Animate.fadeIn>
 					<div className="step">
 						<h3>
-							{engine.getRule(currentQuestion).rawNode.question}{' '}
+							{engine.getRule(currentQuestion).rawNode.question}
+							&nbsp;
 							<ExplicableRule dottedName={currentQuestion} />
 						</h3>
 
@@ -76,6 +78,7 @@ export default function Conversation({ customEndMessages }: ConversationProps) {
 						</fieldset>
 					</div>
 				</Animate.fadeIn>
+
 				<div className="ui__ answer-group">
 					{previousAnswers.length > 0 && (
 						<>
@@ -105,6 +108,7 @@ export default function Conversation({ customEndMessages }: ConversationProps) {
 						</button>
 					)}
 				</div>
+				<Notifications />
 			</div>
 			<QuickLinks />
 		</>
diff --git a/mon-entreprise/source/components/conversation/Explicable.tsx b/mon-entreprise/source/components/conversation/Explicable.tsx
index e330d1055..d647db1a9 100644
--- a/mon-entreprise/source/components/conversation/Explicable.tsx
+++ b/mon-entreprise/source/components/conversation/Explicable.tsx
@@ -32,7 +32,6 @@ export function ExplicableRule({ dottedName }: { dottedName: DottedName }) {
 				e.stopPropagation()
 			}}
 			css={`
-				margin-left: 0.3rem !important;
 				vertical-align: middle;
 				font-size: 110% !important;
 			`}
diff --git a/mon-entreprise/source/components/conversation/SeeAnswersButton.tsx b/mon-entreprise/source/components/conversation/SeeAnswersButton.tsx
index 326f886c5..316f1ec62 100644
--- a/mon-entreprise/source/components/conversation/SeeAnswersButton.tsx
+++ b/mon-entreprise/source/components/conversation/SeeAnswersButton.tsx
@@ -8,7 +8,7 @@ export default function SeeAnswersButton() {
 	return (
 		<>
 			<button
-				className="ui__ small simple  button "
+				className="ui__ small  button "
 				onClick={() => setShowAnswerModal(true)}
 			>
 				<Trans>Voir mes paramètres</Trans>
diff --git a/mon-entreprise/source/components/ui/Progress.css b/mon-entreprise/source/components/ui/Progress.css
index 6746f68ef..300a9305a 100644
--- a/mon-entreprise/source/components/ui/Progress.css
+++ b/mon-entreprise/source/components/ui/Progress.css
@@ -1,5 +1,5 @@
 .progress__container {
-	height: 0.2rem;
+	height: 0.3rem;
 	background-color: var(--lighterColor);
 	overflow: hidden;
 }
@@ -7,5 +7,5 @@
 	height: 100%;
 	transition: width 0.2s;
 	min-width: 6px;
-	background-color: var(--color);
+	background-color: var(--lightColor);
 }