Improving styles wip

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;
 }

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>

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;
 }

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>
   );