#24 Refonte du CSS et envoie d'images

README.md

@@ -1,25 +1,22 @@
-
 # Motus
 
 ## Description
 
 Il s'agit d'un projet développé sous ReactJS.
 
-
 ## Installation
 
 ```shell
-$ npm install 
-$ npm start
+$ npm install --force
 ```
 
 ## Fonctionnalités
 
-
 ## Commandes
 
 ```shell
 $ npm run lint -- --fix
+$ npm start
 ```
 
 ## Développeurs

src/components/DifficultyRules.tsx

@@ -40,7 +40,7 @@ export default function DifficultyRules ({ answer }: DifficultyRulesProps) {
 					<p>☄️ {locationState.color ? 'Couleur autorisée' : 'Couleur non autorisée'}</p>
 				</div>
 				<div className="rules">
-					<button onClick={handleClick}>Besoin d&rsquo;un indice ?</button>
+					<button onClick={handleClick} className='button-style'>Besoin d&rsquo;un indice ?</button>
 				</div>
 			</div>
 		)

src/components/WordHistory.tsx

@@ -24,15 +24,20 @@ export default function WordHistory ({
 
 	// render
 	return (
-		<div>
+		<div className="history">
 			<p>{inputValue}</p>
-			{historyInput.map((answer, index) => (
-				<div key={index} className={'container-history'}>
-					{answer.split('').map((letter, indexLetter) => (
-						<p key={indexLetter} className={verifyLetter(letter, indexLetter, wordLetter)}>{letter}</p>
+			<table>
+				<tbody>
+					{historyInput.map((answer, index) => (
+						<tr key={index} className={'container-history'}>
+							{answer.split('').map((letter, indexLetter) => (
+								<td key={indexLetter}
+									className={verifyLetter(letter, indexLetter, wordLetter)}>{letter}</td>
+							))}
+						</tr>
 					))}
-				</div>
-			))}
+				</tbody>
+			</table>
 		</div>
 	)
 }

src/home/Motus.css

@@ -59,21 +59,23 @@ p {
 }
 
 .input {
-    background-color: #0d1117;
+    background-image: url('../resources/images/retry-bg.png');
     border-radius: 20px;
     border: 3px solid #30363d;
     height: 80px;
     width: 90%;
 }
 
 .history {
-    background-color: #0d1117;
+    background-image: url('../resources/images/fu_xuan.jpg');
     border-radius: 20px;
     border: 3px solid #30363d;
     margin-top: 40px;
     padding: 30px;
-    height: 500px;
+    min-height: 500px;
     width: 90%;
+    display: flex;
+    justify-content: center;
 }
 
 .retry {
@@ -99,15 +101,6 @@ p {
     color: red;
 }
 
-.container-history {
-    display: flex;
-}
-
-.container-history p {
-    margin-right: 5px;
-    padding: 10px;
-}
-
 .green {
     background: green;
 }
@@ -169,3 +162,21 @@ p {
     font-size: 16px;
     margin: 20px;
 }
+
+td {
+    border: 3px solid #30363d;
+    border-radius: 5px;
+    padding: 20px;
+    max-height: 10px;
+}
+
+tr {
+    padding: 10px;
+}
+
+table {
+    border-collapse: collapse;
+    width: auto;
+    min-height: 20px;
+    display: block;
+}

src/home/Motus.tsx

@@ -34,13 +34,11 @@ export default function Motus () {
 					inputValue={inputValue}
 					setInputValue={setInputValue}
 				/>
-				<div className="history">
-					<WordHistory
-						answer={answer}
-						historyInput={historyInput}
-						inputValue={inputValue}
-					/>
-				</div>
+				<WordHistory
+					answer={answer}
+					historyInput={historyInput}
+					inputValue={inputValue}
+				/>
 				<div className="retry">
 					<Link to='/' className='button-style'>Page d&rsquo;accueil</Link>
 					<button onClick={reloadPage} className="button-style">Recommencer</button>