From 068b41191ee6b9e114c78ca79fe845ad768690ce Mon Sep 17 00:00:00 2001
From: Sam Hoile <samuel.hoile@gmail.com>
Date: Wed, 23 Oct 2024 16:40:10 +0100
Subject: [PATCH] added dark-mode compatible H1

---
 frontend/src/components/H1.jsx       |  7 +++++++
 frontend/src/pages/InGame.jsx        | 21 +++++++++++++++------
 frontend/src/pages/LandingHost.jsx   |  5 ++---
 frontend/src/pages/LandingPlayer.jsx |  5 ++---
 frontend/src/pages/LobbyHost.jsx     |  2 ++
 frontend/src/pages/LobbyPlayer.jsx   |  5 ++---
 frontend/src/pages/RoundEnd.jsx      |  2 ++
 7 files changed, 32 insertions(+), 15 deletions(-)
 create mode 100644 frontend/src/components/H1.jsx

diff --git a/frontend/src/components/H1.jsx b/frontend/src/components/H1.jsx
new file mode 100644
index 0000000..e6538cf
--- /dev/null
+++ b/frontend/src/components/H1.jsx
@@ -0,0 +1,7 @@
+export const H1 = ({ children }) => {
+    return (
+        <h1 data-testid="game-name" className="mb-2 text-2xl font-semibold tracking-tight text-gray-900 dark:text-white">
+            { children }
+        </h1>
+    )
+}
\ No newline at end of file
diff --git a/frontend/src/pages/InGame.jsx b/frontend/src/pages/InGame.jsx
index 822248e..2a79bcf 100644
--- a/frontend/src/pages/InGame.jsx
+++ b/frontend/src/pages/InGame.jsx
@@ -11,10 +11,17 @@ import { CountdownCircleTimer } from "react-countdown-circle-timer";
 import { Card } from "../components/Card";
 import { Header } from "../components/Header";
 import { Footer } from "../components/Footer";
+import { H1 } from "../components/H1";
 
-// in game page function
-export function InGame({ players, redirect, pokemon, setRedirect, remainingTime }) {
 
+// in game page function
+export function InGame({
+  players,
+  redirect,
+  pokemon,
+  setRedirect,
+  remainingTime,
+}) {
   const [input, setInput] = useState("");
   //const [buttonText, setButtonText] = useState("Guess");
   const [showCheck, setShowCheck] = useState(false);
@@ -38,9 +45,9 @@ export function InGame({ players, redirect, pokemon, setRedirect, remainingTime
 
   return (
     <div className="full-page">
-      <Header/>
+      <Header />
       <Card>
-        <h1 data-testid="guess-label">Poké Poké Guess Weight!</h1>
+        <H1>Poké Poké Guess Weight!</H1>
         <div className="players_list m-3">
           <ListPlayers players={players} />
         </div>
@@ -48,7 +55,9 @@ export function InGame({ players, redirect, pokemon, setRedirect, remainingTime
           <img src={pokemon.pictureURL} />
         </div>
         <div className="guess m-3">
-          <h1 className="text-xl mb-2">Guess <b>{pokemon.name}</b>&apos;s weight!:</h1>
+          <h1 className="text-xl mb-2">
+            Guess <b>{pokemon.name}</b>&apos;s weight!:
+          </h1>
 
           <GuessForm input={input} setInput={setInput}></GuessForm>
           <br></br>
@@ -75,7 +84,7 @@ export function InGame({ players, redirect, pokemon, setRedirect, remainingTime
           </CountdownCircleTimer>
         </div>
       </Card>
-      <Footer/>
+      <Footer />
     </div>
   );
 }
diff --git a/frontend/src/pages/LandingHost.jsx b/frontend/src/pages/LandingHost.jsx
index 69880df..e8b26b9 100644
--- a/frontend/src/pages/LandingHost.jsx
+++ b/frontend/src/pages/LandingHost.jsx
@@ -10,6 +10,7 @@ import { CardText } from "../components/CardText";
 import { Card } from "../components/Card";
 import { Header } from "../components/Header";
 import { Footer } from "../components/Footer";
+import { H1 } from "../components/H1";
 
 
 // page function
@@ -46,9 +47,7 @@ export function LandingHost() {
     <div className="full-page">
       <Header/>
       <Card>
-        <h1 data-testid="game-name" className="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
-          Poké Poké Guess Weight!
-        </h1>
+        <H1>Poké Poké Guess Weight!</H1>
         <CardText>
         <p>A quick-fire multiplayer game</p>
         <div className="m-6 border-2 rounded-lg px-8 py-5">
diff --git a/frontend/src/pages/LandingPlayer.jsx b/frontend/src/pages/LandingPlayer.jsx
index 25322d4..3ac73d0 100644
--- a/frontend/src/pages/LandingPlayer.jsx
+++ b/frontend/src/pages/LandingPlayer.jsx
@@ -51,9 +51,8 @@ export function LandingPlayer() {
     <div className="full-page">
       <Header/>
       <Card>
-        <h1 data-testid="game-name" className="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
-          Poké Poké Guess Weight!
-        </h1>
+      <H1>Poké Poké Guess Weight!</H1> 
+
         <CardText>
           <p>A quick-fire multiplayer game</p>
           <div className="m-6 border-2 rounded-lg px-8 py-5">
diff --git a/frontend/src/pages/LobbyHost.jsx b/frontend/src/pages/LobbyHost.jsx
index 4dd80bf..20db5cb 100644
--- a/frontend/src/pages/LobbyHost.jsx
+++ b/frontend/src/pages/LobbyHost.jsx
@@ -9,6 +9,7 @@ import { Card } from "../components/Card";
 import { Header } from "../components/Header";
 import { Footer } from "../components/Footer";
 import CopyToClipboardButton from "../components/CopyToClipboardButton";
+import { H1 } from "../components/H1";
 
 export function LobbyHost({ gameRoom, players }) {
   const navigate = useNavigate();
@@ -22,6 +23,7 @@ export function LobbyHost({ gameRoom, players }) {
     <div className="full-page">
       <Header/>
       <Card>
+        <H1>Poké Poké Guess Weight!</H1>
         <ListPlayers players={players} />
         <br />
         <Button handleClick={handleClick} buttonText="Start Game" />
diff --git a/frontend/src/pages/LobbyPlayer.jsx b/frontend/src/pages/LobbyPlayer.jsx
index e2e98d4..f896a82 100644
--- a/frontend/src/pages/LobbyPlayer.jsx
+++ b/frontend/src/pages/LobbyPlayer.jsx
@@ -7,6 +7,7 @@ import { Footer } from "../components/Footer";
 import { CardText } from "../components/CardText";
 import CopyToClipboardButton from "../components/CopyToClipboardButton";
 import { Card } from "../components/Card";
+import { H1 } from "../components/H1";
 
 
 export function LobbyPlayer({ gameRoom, players, redirect, setRedirect }) {
@@ -23,9 +24,7 @@ export function LobbyPlayer({ gameRoom, players, redirect, setRedirect }) {
     <div className="full-page">
       <Header/>
       <Card>
-        <h1 data-testid="game-name" className="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
-          Poké Poké Guess Weight!
-        </h1>
+      <H1>Poké Poké Guess Weight!</H1>
         <ListPlayers players = {players} />
         <br/>
         <CardText>
diff --git a/frontend/src/pages/RoundEnd.jsx b/frontend/src/pages/RoundEnd.jsx
index 4272299..bfcbc6d 100644
--- a/frontend/src/pages/RoundEnd.jsx
+++ b/frontend/src/pages/RoundEnd.jsx
@@ -11,6 +11,7 @@ import { Card } from "../components/Card";
 import { Table } from "../components/Table";
 import { Header } from "../components/Header";
 import { Footer } from "../components/Footer";
+import { H1 } from "../components/H1";
 
 export function RoundEnd({
   gameState,
@@ -44,6 +45,7 @@ export function RoundEnd({
     <div className="full-page">
       <Header/>
       <Card>
+      <H1>Poké Poké Guess Weight!</H1>
         <div className="m-3">
           <h2 className="text-2xl">Scores</h2>
           {gameState && gameState.players && (