renamed resignedButton

restructured dark-theme css

src/App.jsx

@@ -4,6 +4,8 @@ import Lobby from "./Lobby/Lobby";
 import { useAuthState } from "react-firebase-hooks/auth";
 import { auth } from "./firebase";
 
+import "./dark-theme.css";
+
 export default function App() {
 	const [user] = useAuthState(auth);
 	if (user) {

src/Game Over/GameOver.jsx

@@ -1,15 +1,17 @@
-import React from 'react';
-import { Button } from 'react-bootstrap';
-import 'bootstrap/dist/css/bootstrap.min.css';
-import './dark-theme.css';
+import React from "react";
+import { Button } from "react-bootstrap";
+import "bootstrap/dist/css/bootstrap.min.css";
+import styles from "GameOver.module.css";
 
 function GameOver() {
-  return (
-    <div className="dark-theme"> 
-      <h1>Game Over</h1>
-      <Button style={{backgroundColor: "#1eb980", border: "none"}}>Back to Lobby</Button>
-    </div>
-  );
+	return (
+		<div className={styles.gameOver}>
+			<h1>Game Over</h1>
+			<Button style={{ backgroundColor: "#1eb980", border: "none" }}>
+				Back to Lobby
+			</Button>
+		</div>
+	);
 }
 
-export default GameOver;
+export default GameOver;

src/Game Over/GameOver.module..css

@@ -0,0 +1,28 @@
+@import url("https://fonts.googleapis.com/css2?family=Play:wght@400;700&family=Press+Start+2P&display=swap");
+/* #root {
+   display: flex;
+   align-items: center; 
+   justify-content: center; 
+   height: 100vh; 
+   margin: 0;
+   padding: 0;
+} */
+
+.gameOver .center {
+	text-align: center;
+	padding: 20px;
+	box-sizing: border-box;
+}
+
+.gameOver h1 {
+	text-align: center;
+	color: #1eb980;
+	font-family: "Press Start 2P";
+	text-transform: uppercase;
+	font-size: 5rem;
+	margin-top: -10px;
+}
+
+.gameOver Button {
+	margin-top: 3rem;
+}

src/Game/Game.jsx

@@ -3,7 +3,7 @@ import React from "react";
 import Grid from "./Grid";
 import ChatBox from "./ChatBox";
 import UsersConnectedBox from "./UsersConnectedBox";
-import ResignButton from "./ResignButton";
+import LeaveButton from "./LeaveButton";
 import ShipPlacement from "./ShipPlacement";
 
 import { doc } from "firebase/firestore";
@@ -29,20 +29,25 @@ const Game = ({ user, gameId, isPlayer }) => {
 					gameId={gameId}
 					playerNum={playerNum}
 					isCurrent={isCurrent}
-					player = {isPlayer}
+					player={isPlayer}
 				/>
 			) : gameState === 1 ? (
-                <>
-                    <Grid />
-                    <ChatBox />
-                    <UsersConnectedBox />
-                    <ResignButton user={user} gameId={gameId} player={isPlayer} />
-                </>
-            ) : gameState === 2 ? (
-                leaveGame({ user, gameId, isPlayer })
-            ) : null}
-        </div>
-    );
+				<>
+					<Grid />
+					<ChatBox />
+					<UsersConnectedBox />
+					<LeaveButton
+						user={user}
+						gameId={gameId}
+						player={isPlayer}
+						buttonText={isPlayer ? "Forefeit" : "Leave"}
+					/>
+				</>
+			) : gameState === 2 ? (
+				leaveGame({ user, gameId, isPlayer })
+			) : null}
+		</div>
+	);
 };
 
 export default Game;

src/Game/LeaveButton.jsx

@@ -0,0 +1,17 @@
+import React from "react";
+import styles from "./LeaveButton.module.css";
+import { leaveGame } from "../firebase";
+
+const LeaveButton = ({ user, gameId, isPlayer, buttonText }) => {
+	const handleClick = async () => {
+		await leaveGame({ user, gameId, isPlayer });
+	};
+
+	return (
+		<button className={styles.button} onClick={handleClick}>
+			{buttonText}
+		</button>
+	);
+};
+
+export default LeaveButton;

src/Game/ShipPlacement.jsx

@@ -1,68 +1,87 @@
 import React, { useState } from "react";
 import Grid from "./Grid";
-import ResignButton from "./ResignButton";
-import styles from "./ShipPlacement.module.css"
-import { SHIP_TYPES, placeShip} from "../firebase.js";
+import LeaveButton from "./LeaveButton";
+import styles from "./ShipPlacement.module.css";
+import { SHIP_TYPES, placeShip } from "../firebase.js";
 import { db, checkTurn, leaveGame } from "../firebase";
 import { doc } from "firebase/firestore";
 import { useDocumentData } from "react-firebase-hooks/firestore";
 
-const ShipPlacement = ({user, gameId, currentPlayer, isCurrent, player}) => {
-  const [currentShipIndex, setCurrentShipIndex] = useState(0);
-  const [orientation, setOrientation] = useState("horizontal");
-  const shipTypes = Object.keys(SHIP_TYPES);
-  const [selectedPosition, setSelectedPosition] = useState(null);
+const ShipPlacement = ({ user, gameId, currentPlayer, isCurrent, player }) => {
+	const [currentShipIndex, setCurrentShipIndex] = useState(0);
+	const [orientation, setOrientation] = useState("horizontal");
+	const shipTypes = Object.keys(SHIP_TYPES);
+	const [selectedPosition, setSelectedPosition] = useState(null);
 
-  const handleNextShip = () => {
-    console.log("handleNextShip GOT CALLED");
-    setCurrentShipIndex((prevIndex) =>
-      prevIndex < shipTypes.length - 1 ? prevIndex + 1 : 0
-    );
-  };
+	const handleNextShip = () => {
+		console.log("handleNextShip GOT CALLED");
+		setCurrentShipIndex((prevIndex) =>
+			prevIndex < shipTypes.length - 1 ? prevIndex + 1 : 0
+		);
+	};
 
-  const toggleOrientation = () => {
-    setOrientation((prevOrientation) =>
-      prevOrientation === "horizontal" ? "vertical" : "horizontal"
-    );
-  };
-
-  const handleCellClick = (row, col) => {
-    console.log("handleCellClick GOT CALLED");
-    if (selectedPosition !== null) {
-      placeShip({
-        user: user,
-        gameId: gameId,
-        shipType: shipTypes[currentShipIndex],
-        position: selectedPosition,
-        orientation: orientation,
-      }).then((result) => {
-        if (result === 1) {
-          console.log("IT WORKED")
-          setSelectedPosition(null);
-          handleNextShip();
-        } else {
-          console.error("Failed to place ship on the grid.");
-        }
-      });
-    } else {
-      setSelectedPosition([row, col]);
-    }
-  };
+	const toggleOrientation = () => {
+		setOrientation((prevOrientation) =>
+			prevOrientation === "horizontal" ? "vertical" : "horizontal"
+		);
+	};
 
-  return (
-    <div>
-      <h2 style = {{ color: "#1eb980"}}>Place Your Ships</h2>
-      <div className={styles.shipDisplay}>
-        <h3 style = {{ color: "#1eb980"}}>Ship: {shipTypes[currentShipIndex]}</h3>
-        <h4 style = {{ color: "#1eb980"}}>Size: {SHIP_TYPES[shipTypes[currentShipIndex]]}</h4>
-        <h5 style = {{ color: "#1eb980"}}>Orientation: {orientation}</h5>
-        <button style = {{ backgroundColor: "#1eb980"}} onClick={toggleOrientation}>Toggle Orientation</button>
-        <button style = {{ backgroundColor: "#1eb980"}} onClick={handleNextShip}>Next Ship</button>
-      </div>
-      <Grid onClick={handleCellClick} />
-      <ResignButton user={user} gameId={gameId} player={player} />
-    </div>
-  );
+	const handleCellClick = (row, col) => {
+		console.log("handleCellClick GOT CALLED");
+		if (selectedPosition !== null) {
+			placeShip({
+				user: user,
+				gameId: gameId,
+				shipType: shipTypes[currentShipIndex],
+				position: selectedPosition,
+				orientation: orientation,
+			}).then((result) => {
+				if (result === 1) {
+					console.log("IT WORKED");
+					setSelectedPosition(null);
+					handleNextShip();
+				} else {
+					console.error("Failed to place ship on the grid.");
+				}
+			});
+		} else {
+			setSelectedPosition([row, col]);
+		}
+	};
+
+	return (
+		<div>
+			<h2 style={{ color: "#1eb980" }}>Place Your Ships</h2>
+			<div className={styles.shipDisplay}>
+				<h3 style={{ color: "#1eb980" }}>
+					Ship: {shipTypes[currentShipIndex]}
+				</h3>
+				<h4 style={{ color: "#1eb980" }}>
+					Size: {SHIP_TYPES[shipTypes[currentShipIndex]]}
+				</h4>
+				<h5 style={{ color: "#1eb980" }}>Orientation: {orientation}</h5>
+				<button
+					style={{ backgroundColor: "#1eb980" }}
+					onClick={toggleOrientation}
+				>
+					Toggle Orientation
+				</button>
+				<button
+					style={{ backgroundColor: "#1eb980" }}
+					onClick={handleNextShip}
+				>
+					Next Ship
+				</button>
+			</div>
+			<Grid onClick={handleCellClick} />
+			<LeaveButton
+				user={user}
+				gameId={gameId}
+				player={player}
+				buttonText={"Leave"}
+			/>
+		</div>
+	);
 };
 
-export default ShipPlacement;
+export default ShipPlacement;

src/Lobby/NewGame.jsx

@@ -2,7 +2,6 @@ import React, { useState } from "react";
 import { Button, Form } from "react-bootstrap";
 import { newGame } from "../firebase";
 import "bootstrap/dist/css/bootstrap.min.css";
-import "./dark-theme.css";
 
 function NewGame({ user, toggleNewGamePage }) {
 	const [timer, setTimer] = useState("30s");