Améliore l'UX du bloc question dans les simulateurs

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

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>
 	)
 }

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>

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 />
 		</>

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;
 			`}

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>

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);
 }