From d3c6a4e0246a7a8a32170bfa7ca2d6345dfc4a03 Mon Sep 17 00:00:00 2001
From: Hazem Krimi <me@hazemkrimi.tech>
Date: Sat, 15 Feb 2025 19:12:48 +0100
Subject: [PATCH] Improving styles wip

---
 client/src/components/Stats/index.css | 5 ++++-
 client/src/components/Stats/index.tsx | 8 +++++++-
 client/src/pages/Typing/index.css     | 4 ++--
 client/src/pages/Typing/index.tsx     | 2 +-
 4 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/client/src/components/Stats/index.css b/client/src/components/Stats/index.css
index 65c3a4c..5498ecb 100644
--- a/client/src/components/Stats/index.css
+++ b/client/src/components/Stats/index.css
@@ -1,3 +1,6 @@
 .score {
-	text-align: right;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	padding: 1rem;
 }
diff --git a/client/src/components/Stats/index.tsx b/client/src/components/Stats/index.tsx
index 5ac999e..18097cc 100644
--- a/client/src/components/Stats/index.tsx
+++ b/client/src/components/Stats/index.tsx
@@ -2,13 +2,19 @@ import { useTypingContext } from "contexts/typing";
 
 import './index.css';
 
-function Score() {
+type StatsProps = {
+  loaded: boolean;
+}
+
+function Score({loaded}: StatsProps) {
   const {
     timer,
     score,
     accuracy,
   } = useTypingContext();
 
+  if (!loaded) return;
+
   return (
     <div className='score'>
       <p>Time: {timer}</p>
diff --git a/client/src/pages/Typing/index.css b/client/src/pages/Typing/index.css
index 2a8c521..032d70e 100644
--- a/client/src/pages/Typing/index.css
+++ b/client/src/pages/Typing/index.css
@@ -1,5 +1,5 @@
 .container {
-	display: grid;
-	grid-template-columns: repeat(2, 1fr);
+	display: flex;
+	flex-direction: column;
 	column-gap: 1rem;
 }
diff --git a/client/src/pages/Typing/index.tsx b/client/src/pages/Typing/index.tsx
index 1c0886d..0050986 100644
--- a/client/src/pages/Typing/index.tsx
+++ b/client/src/pages/Typing/index.tsx
@@ -43,7 +43,7 @@ function Typing() {
     <TypingContextProvider>
       <div className='container'>
         <Code code={code} loaded={loaded} />
-        <Stats />
+        <Stats loaded={loaded} />
       </div>
     </TypingContextProvider>
   );