⚡ Upgrade design & moved backend here & login and settings work with api

app/statistics/hooks/useData.js

@@ -7,21 +7,18 @@ export const useData = () => {
 		(async () => {
 			const token = localStorage.getItem('token');
 
-			const request = await fetch(
-				'https://lovemap-backend.vercel.app/user',
-				{
-					method: 'GET',
-					headers: {
-						Authorization: token,
-					},
-				}
-			);
+			const request = await fetch('/api/user', {
+				method: 'GET',
+				headers: {
+					Authorization: token,
+				},
+			});
 
 			const response = await request.json();
 
 			const formattedResponse = {
-				...response.user,
-				createdat: new Date(response.user.createdat).toLocaleDateString(
+				...response,
+				createdat: new Date(response.createdat).toLocaleDateString(
 					'fr-FR'
 				),
 			};

app/statistics/page.tsx

@@ -10,21 +10,29 @@ import SlotCounter from 'react-slot-counter';
 // ---------------------------------------------------------------------------------------------------------------------
 
 // -------------------------------------------------- Hooks & Utils ----------------------------------------------------
+import { useRouter } from 'next/navigation';
 import { useData } from './hooks/useData';
 // ---------------------------------------------------------------------------------------------------------------------
 
 // ------------------------------------------------- Assets & Styles ---------------------------------------------------
 import SettingsIcon from '@/assets/SettingsIcon';
+import { Logout } from '@/assets/Logout';
 import './styles.scss';
 // ---------------------------------------------------------------------------------------------------------------------
 
 const Statistics = () => {
+	const router = useRouter();
 	const { userData } = useData();
 
 	if (!userData) {
 		return;
 	}
 
+	const logout = () => {
+		localStorage.clear();
+		router.push('/auth/login');
+	};
+
 	return (
 		<div className='accountContainer'>
 			<div className='header'>
@@ -33,12 +41,21 @@ const Statistics = () => {
 					<p className='sinceDate'>Créé le: {userData.createdat}</p>
 				</div>
 
-				<Link
-					href={'/settings'}
-					className='settingsButton'
-				>
-					<SettingsIcon />
-				</Link>
+				<div className='buttonsContainer'>
+					<button
+						type='button'
+						className='button'
+						onClick={logout}
+					>
+						<Logout />
+					</button>
+					<Link
+						href={'/settings'}
+						className='button'
+					>
+						<SettingsIcon />
+					</Link>
+				</div>
 			</div>
 			<div className='separator' />
 			<div className='statistics'>
@@ -48,7 +65,7 @@ const Statistics = () => {
 						startValue={'00'}
 						startValueOnce
 						dummyCharacterCount={10}
-						direction='top-bottom'
+						direction='top-down'
 						containerClassName='slotCounter'
 					/>
 					<p className='statName'>Loves par semaine</p>
@@ -59,7 +76,7 @@ const Statistics = () => {
 						startValue={'00'}
 						startValueOnce
 						dummyCharacterCount={10}
-						direction='top-bottom'
+						direction='top-down'
 						containerClassName='slotCounter'
 					/>
 					<p className='statName'>Loves par mois</p>
@@ -70,7 +87,7 @@ const Statistics = () => {
 						startValue={'00'}
 						startValueOnce
 						dummyCharacterCount={10}
-						direction='top-bottom'
+						direction='top-down'
 						containerClassName='slotCounter'
 					/>
 					<p className='statName'>Loves par an</p>
@@ -81,7 +98,7 @@ const Statistics = () => {
 						startValue={'00'}
 						startValueOnce
 						dummyCharacterCount={10}
-						direction='top-bottom'
+						direction='top-down'
 						containerClassName='slotCounter'
 					/>
 					<p className='statName'>Loves total</p>

app/statistics/styles.scss

@@ -21,21 +21,31 @@
 
 			& > .username {
 				font-size: 1.1rem;
-				color: #ffffff;
+				color: #d94253;
 			}
 
 			& > .sinceDate {
 				font-size: 0.9rem;
 				font-weight: 300;
-				color: #eee;
+				color: #d94253;
 			}
 		}
 
-		& > .settingsButton {
-			$size: 25px;
-			width: $size;
-			height: $size;
-			color: #ffffff;
+		& > .buttonsContainer {
+			display: flex;
+			flex-wrap: nowrap;
+			align-items: center;
+			gap: 10px;
+
+			& > .button {
+				$size: 25px;
+				width: $size;
+				height: $size;
+				border: none;
+				background-color: transparent;
+				color: #d94253;
+				cursor: pointer;
+			}
 		}
 	}
 
@@ -43,13 +53,13 @@
 		display: block;
 		width: 90%;
 		height: 1px;
-		background-color: rgb(254, 254, 250);
+		background-color: #d94253;
 		background: linear-gradient(
 			90deg,
-			rgba(254, 254, 250, 0) 0%,
-			rgba(254, 254, 250, 1) 10%,
-			rgba(254, 254, 250, 1) 90%,
-			rgba(254, 254, 250, 0) 100%
+			rgba(#d94253, 0) 0%,
+			rgba(#d94253, 1) 10%,
+			rgba(#d94253, 1) 90%,
+			rgba(#d94253, 0) 100%
 		);
 	}
 
@@ -68,45 +78,14 @@
 			flex-direction: column;
 			align-items: center;
 			font-weight: 300;
-			color: #ffffff;
+			color: #d94253;
 
 			& > .slotCounter {
 				font-size: 3rem;
 			}
 
 			& > .statName {
-				color: #eee;
-			}
-		}
-	}
-
-	& > .buttonsContainer {
-		display: flex;
-		flex-direction: column;
-		align-items: stretch;
-		gap: 2px;
-		width: 100%;
-		box-shadow: 0 0 6px rgba(255, 255, 255, 0.2);
-
-		& > .button {
-			display: flex;
-			flex-wrap: nowrap;
-			justify-content: space-between;
-			gap: 20px;
-			padding: 15px 20px;
-			border: none;
-			background-color: #d94253;
-			font-size: 1rem;
-			color: #ffffff;
-			filter: brightness(1.1);
-			transition: filter 0.3s ease;
-
-			&:hover {
-				filter: brightness(1.3);
-			}
-
-			& > svg {
-				width: 1.2em;
+				color: #d94253;
 			}
 		}
 	}