added dark-mode compatible H1

shammy642 · Oct 23, 2024 · 068b411 · 068b411
1 parent 9a68e6f
commit 068b411
Show file tree

Hide file tree

Showing 7 changed files with 32 additions and 15 deletions.
diff --git a/frontend/src/components/H1.jsx 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>
+    )
+}
diff --git 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,17 +45,19 @@ 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>
         <div className="flex justify-center">
           <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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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 && (