✨ Add icons next to selects label in Home

src/components/Home/Home.tsx

@@ -3,7 +3,7 @@
 // ---------------------------------------------------------------------------------------------------------------------
 
 // ------------------------------------------------------ React --------------------------------------------------------
-import { useEffect, useRef } from 'react';
+import { useRef } from 'react';
 // ---------------------------------------------------------------------------------------------------------------------
 
 // ----------------------------------------------- Context & Stockage --------------------------------------------------
@@ -13,6 +13,8 @@ import { gameStateAtom } from '../../contexts/gameState';
 // ---------------------------------------------------------------------------------------------------------------------
 
 // ----------------------------------------------------- Styles --------------------------------------------------------
+import Size from '../../assets/size';
+import Difficulty from '../../assets/difficulty';
 import './styles.scss';
 // ---------------------------------------------------------------------------------------------------------------------
 
@@ -57,7 +59,10 @@ const Home = () => {
 
 			<div className='settingsContainer'>
 				<div className='selectorBox'>
-					<p className='settingLabel'>Taille de la grille</p>
+					<p className='settingLabel'>
+						<Size />
+						Taille de la grille
+					</p>
 					<select
 						ref={sizeRef}
 						name='gridSize'
@@ -71,7 +76,10 @@ const Home = () => {
 				</div>
 
 				<div className='selectorBox'>
-					<p className='settingLabel'>Difficulté</p>
+					<p className='settingLabel'>
+						<Difficulty />
+						Difficulté
+					</p>
 					<select
 						ref={difficultyRef}
 						name='difficulty'

src/components/Home/styles.scss

@@ -30,8 +30,16 @@
 			gap: 20px;
 
 			& > .settingLabel {
+				display: flex;
+				flex-wrap: nowrap;
+				align-items: center;
+				gap: 5px;
 				font-size: 1.2rem;
 				color: #f39440;
+
+				& > svg {
+					width: 1.2em;
+				}
 			}
 
 			& > .select {

src/components/Leaderboard/leaderboard.tsx

@@ -40,9 +40,6 @@ const LeaderBoard = () => {
 	const [gameState, setGameState] = useRecoilState(gameStateAtom);
 	const [data, setData] = useState<LeaderBoardItem[]>([]);
 
-	const [, updateLeaderboard] = useState({});
-	const forceUpdate = useCallback(() => updateLeaderboard({}), []);
-
 	const getData = async () => {
 		const storeData = await store.getItem<LeaderBoardItem[]>(`${gameState.difficulty}:${gameState.gridSize}`);
 
@@ -53,7 +50,7 @@ const LeaderBoard = () => {
 		if (data.length === 0) {
 			getData();
 		}
-	}, [data.length]);
+	}, [data.length, getData]);
 
 	const clearAllLeaderboards = async () => {
 		const keys = await store.keys();