Merge pull request #90 from shammy642/make_the_rest_darkmode

fixed
shammy642 · Oct 23, 2024 · d3c90e4 · d3c90e4
2 parents 872db95 + fd53a04
commit d3c90e4
Show file tree

Hide file tree

Showing 9 changed files with 25 additions and 27 deletions.
diff --git a/frontend/src/components/Card.jsx b/frontend/src/components/Card.jsx
@@ -1,7 +1,7 @@
 export function Card({ children }) {
     return (
-        <div className="min-w-96 block max-w-sm p-6 bg-white border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700">
-            { children }
+        <div className="block max-w-sm p-6 bg-white border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700 font-normal text-gray-700 dark:text-gray-400">
+                { children }
         </div>
     )
 }
diff --git a/frontend/src/components/GuessForm.jsx b/frontend/src/components/GuessForm.jsx
@@ -1,15 +1,9 @@
-// imports
-import { CardText } from "../components/CardText";
-
 // A form that allows a user to input tet and numbers
 export function GuessForm(props) {
   return (
     <>
     <form className="max-w-sm mx-auto">
       <div className="md-5">
-        <CardText>
-          <label htmlFor="website-admin">How much does this Pokémon weight?</label>
-        </CardText>
         <br/>
         <div className="flex">
 

diff --git a/frontend/src/components/ListPlayers.jsx b/frontend/src/components/ListPlayers.jsx
@@ -1,10 +1,15 @@
 import CheckMark from "./CheckMark";
 import LoadingSpinner from "./LoadingSpinner";
+import { CardText } from "./CardText";
 
 export function ListPlayers({ players, isLobby = false}) {
   return (
     <div className="max-w-lg mx-auto">
-      <h2 className="font-bold mb-3">Players:</h2>
+
+    <CardText><h2 className="font-bold mb-3">Players:</h2>
+    </CardText>
+
+
       <div className="flex flex-wrap gap-3 justify-center">
         {players &&
           players.map((player, index) => (

diff --git a/frontend/src/components/Table.jsx b/frontend/src/components/Table.jsx
@@ -15,8 +15,9 @@ export function Table({ players }) {
 
   return (
     <div className="relative overflow-y-auto shadow-md sm:rounded-lg max-h-36 my-6">
-      <table className="w-full text-sm text-center rtl:text-right text-white dark:text-white">
-        <thead className="sticky top-0 text-md text-white uppercase bg-gray-50 dark:bg-gray-700 dark:text-white">
+      <table className="w-full text-sm text-center rtl:text-right text-gray-700 dark:bg-gray-700">
+        <thead className="sticky top-0 text-md uppercase bg-gray-50 font-normal text-gray-700 dark:bg-gray-200">
+
           <tr>
             <th scope="col" className="px-3 py-2">
               Pos.
@@ -33,7 +34,7 @@ export function Table({ players }) {
           {players.map((player, index) => (
             <tr
               key={index}
-              className="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600"
+              className=" border-b dark:border-gray-700text-gray-700 dark:bg-gray-200"
             >
               <td className="px-3 py-2">{position(index)}</td>
               <td className="px-3 py-2">

diff --git a/frontend/src/pages/InGame.jsx b/frontend/src/pages/InGame.jsx
@@ -48,7 +48,7 @@ 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>

diff --git a/frontend/src/pages/LandingHost.jsx b/frontend/src/pages/LandingHost.jsx
@@ -49,7 +49,7 @@ export function LandingHost() {
         <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>
-        <CardText>
+
         <p>A quick-fire multiplayer game</p>
         <div className="m-6 border-2 rounded-lg px-8 py-5">
           <p className="mb-3">Rules :</p>
@@ -59,7 +59,7 @@ export function LandingHost() {
           </ul>
         </div>
         <img src="https://i.gifer.com/5SvD.gif" className="max-w-20" />
-        </CardText>
+
         <UsernameForm
           input={input}
           error={error}

diff --git a/frontend/src/pages/LandingPlayer.jsx b/frontend/src/pages/LandingPlayer.jsx
@@ -54,7 +54,7 @@ export function LandingPlayer() {
         <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>
-        <CardText>
+
           <p>A quick-fire multiplayer game</p>
           <div className="m-6 border-2 rounded-lg px-8 py-5">
             <p className="mb-3">Rules :</p>
@@ -63,7 +63,7 @@ export function LandingPlayer() {
               <li>Unlimited players</li>
             </ul>
           </div>
-        </CardText>
+
 
         <img src="https://i.gifer.com/5SvD.gif" className="max-w-20" />
         <UsernameForm

diff --git a/frontend/src/pages/LobbyHost.jsx b/frontend/src/pages/LobbyHost.jsx
@@ -4,7 +4,6 @@ import { Button } from "../components/Button";
 import { socket } from "../socket";
 import { useNavigate } from "react-router-dom";
 import { ListPlayers } from "../components/ListPlayers";
-import { CardText } from "../components/CardText";
 import { Card } from "../components/Card";
 import { Header } from "../components/Header";
 import { Footer } from "../components/Footer";
@@ -25,9 +24,7 @@ export function LobbyHost({ gameRoom, players }) {
         <ListPlayers players={players} isLobby={true}/>
         <br />
         <Button handleClick={handleClick} buttonText="Start Game" />
-        <CardText>
-          <div>Share your game link:</div>
-        </CardText>
+        <p>Share your game link:</p>
         <CopyToClipboardButton
           content={`${window.location.origin}/join/${gameRoom}`}
         />

diff --git a/frontend/src/pages/LobbyPlayer.jsx b/frontend/src/pages/LobbyPlayer.jsx
@@ -4,7 +4,6 @@ import { useNavigate } from "react-router-dom";
 import { ListPlayers } from "../components/ListPlayers";
 import { Header } from "../components/Header";
 import { Footer } from "../components/Footer";
-import { CardText } from "../components/CardText";
 import CopyToClipboardButton from "../components/CopyToClipboardButton";
 import { Card } from "../components/Card";
 
@@ -28,11 +27,13 @@ export function LobbyPlayer({ gameRoom, players, redirect, setRedirect }) {
         </h1>
         <ListPlayers players = {players} isLobby={true} />
         <br/>
-        <CardText>
-          <div>Waiting for host to start the game...</div>
-          <br />
-          <div>Share your game link:</div>
-        </CardText>
+
+        <p>Waiting for host to start the game...</p>
+
+        <br/>
+
+        <p>Share your game link:</p>
+
         <CopyToClipboardButton content={`${window.location.origin}/join/${gameRoom}`}/>
       </Card>
       <Footer/>