From 1ebb863b81d433196155bcd29bd902d249dd912f Mon Sep 17 00:00:00 2001
From: UnEpicier <alexisvasseur96@gmail.com>
Date: Mon, 19 Feb 2024 08:48:27 +0100
Subject: [PATCH] :sparkles: Add icons next to selects label in Home

---
 src/components/Home/Home.tsx               | 14 +++++++++++---
 src/components/Home/styles.scss            |  8 ++++++++
 src/components/Leaderboard/leaderboard.tsx |  5 +----
 3 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/src/components/Home/Home.tsx b/src/components/Home/Home.tsx
index 1f6da61..a6a1b15 100644
--- a/src/components/Home/Home.tsx
+++ b/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'
diff --git a/src/components/Home/styles.scss b/src/components/Home/styles.scss
index c760aa0..d8f5530 100644
--- a/src/components/Home/styles.scss
+++ b/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 {
diff --git a/src/components/Leaderboard/leaderboard.tsx b/src/components/Leaderboard/leaderboard.tsx
index e5cee4a..6d5cdd1 100644
--- a/src/components/Leaderboard/leaderboard.tsx
+++ b/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();