From 31ce2c5e53db8bb5764d3ee46b01db83587582b3 Mon Sep 17 00:00:00 2001
From: Antoine M <antoine.martinon@deligraph.com>
Date: Thu, 15 Feb 2024 18:51:12 +0100
Subject: [PATCH] adapting modal

---
 src/components/game/GameAnswerExplanation.jsx | 21 +++++++++----------
 src/components/game/GameQuestion.jsx          | 16 +++++++-------
 2 files changed, 19 insertions(+), 18 deletions(-)

diff --git a/src/components/game/GameAnswerExplanation.jsx b/src/components/game/GameAnswerExplanation.jsx
index c2d7b6b..a5a37db 100644
--- a/src/components/game/GameAnswerExplanation.jsx
+++ b/src/components/game/GameAnswerExplanation.jsx
@@ -14,8 +14,8 @@ export default function GameAnwerExplanation({ questionId }) {
 	const objectPictureUrl = contextGameDatas.gameObjects[questionId].attrs.objectPictureUrl;
 
 	return (
-		<div className='answer-explanation'>
-			<div className='content'>
+		<div className='modal-content-container answer-explanation-container'>
+			<div className='modal-content-container__content'>
 				{answer.userAnsweredCorrectly === true && (
 					<>
 						<div></div>
@@ -43,18 +43,17 @@ export default function GameAnwerExplanation({ questionId }) {
 				)}
 				<h2 className='answer-explanation__title'>C'est un risque</h2>
 				<p>{answerExplanation}</p>
+				<button
+					onClick={() => {
+						setCurrentGameModal(null);
+						checkIfGameIsComplete();
+					}}
+					className='continue-game cta cta--construction cta--round cta--button-icon cta--next'
+				/>
 			</div>
-			<div className='answer-explanation__cover'>
+			<div className='modal-content-container__cover'>
 				<img src={objectPictureUrl} alt='' />
 			</div>
-
-			<button
-				onClick={() => {
-					setCurrentGameModal(null);
-					checkIfGameIsComplete();
-				}}
-				className='continue-game cta cta--construction cta--round cta--button-icon cta--next'
-			/>
 		</div>
 	);
 }
diff --git a/src/components/game/GameQuestion.jsx b/src/components/game/GameQuestion.jsx
index a3f5b53..8ac6013 100644
--- a/src/components/game/GameQuestion.jsx
+++ b/src/components/game/GameQuestion.jsx
@@ -12,9 +12,8 @@ export default function GameQuestion({ questionId, correctAnswer }, ...props) {
 	}
 
 	return (
-		<div className='game-question'>
-			{correctAnswer}
-			<div className='content'>
+		<div className='modal-content-container game-question-container'>
+			<div className='modal-content-container__content'>
 				<h3 className='titling-construction '>Trouvé !</h3>
 				<h2>securisé ou risqué ?</h2>
 
@@ -22,20 +21,23 @@ export default function GameQuestion({ questionId, correctAnswer }, ...props) {
 					Est-ce que la situation comporte un risque majeur ou identifiez vous un bon
 					comportement ?
 				</p>
-				<div className='game-question__answer-buttons-container'>
+				<div className='game-question-container__answer-buttons-container'>
 					<button
-						className='game-question__answer-button'
+						className='game-question-container__answer-button'
 						onClick={() => handleAnswer(questionId, "safe")}>
 						<img src={anwserIconSafe} alt='' />
 					</button>
 					<button
-						className='game-question__answer-button'
+						className='game-question-container__answer-button'
 						onClick={() => handleAnswer(questionId, "unsafe")}>
 						<img src={anwserIconUnsafe} alt='' />
 					</button>
 				</div>
+				<p className='pt-8'>{correctAnswer}</p>
+			</div>
+			<div className='modal-content-container__cover'>
+				<img src={objectPictureUrl} alt='' />
 			</div>
-			<img className='game-question__cover' src={objectPictureUrl} alt='' />
 		</div>
 	);
 }