✨ Add a clear leaderboard button in leaderboard component

src/components/Leaderboard/leaderboard.tsx

@@ -21,6 +21,7 @@ import CalendarIcon from '../../assets/calendar';
 import Replay from '../../assets/replay';
 import Settings from '../../assets/settings';
 import TimerIcon from '../../assets/timer';
+import Trash from '../../assets/trash';
 import './styles.scss';
 // ---------------------------------------------------------------------------------------------------------------------
 
@@ -90,6 +91,17 @@ const LeaderBoard = () => {
 					Paramètres
 				</button>
 
+				<button
+					className='controlButton clear'
+					onClick={() => {
+						setGameState((prev) => ({ ...prev, status: 'settings', endType: '', placedFlags: 0, bombs: 0, gameTime: '' }));
+						store.setItem('leaderboard', []);
+					}}
+				>
+					<Trash />
+					Supprimer
+				</button>
+
 				<button
 					className='controlButton replay'
 					onClick={() => setGameState((prev) => ({ ...prev, status: 'idle', endType: '', placedFlags: 0, bombs: 0, gameTime: '' }))}

src/components/Leaderboard/styles.scss

@@ -9,7 +9,7 @@
 	display: flex;
 	flex-direction: column;
 	width: 95svw;
-	max-width: 450px;
+	max-width: 500px;
 	border-radius: 5px;
 	background-color: #fff;
 	overflow: hidden;
@@ -73,8 +73,8 @@
 
 .controls {
 	display: grid;
-	grid-template-columns: repeat(2, 1fr);
-	gap: 100px;
+	grid-template-columns: repeat(3, 1fr);
+	gap: 10px;
 	width: 100%;
 
 	& > .controlButton {
@@ -83,7 +83,7 @@
 		justify-content: center;
 		align-items: center;
 		gap: 10px;
-		padding: 10px 20px;
+		padding: 10px;
 		border: none;
 		border-radius: 5px;
 		font-size: 16px;
@@ -97,6 +97,10 @@
 		}
 
 		&.home {
+			background-color: #f39440;
+		}
+
+		&.clear {
 			background-color: #ca5940;
 		}