Added hover properties and fancy ui with bonus div

src/App.jsx

@@ -40,21 +40,25 @@ export default function App() {
       <Heading />
       <Gamemode />
       <Board />
-      <Restart />
       <Message />
     </>
   );
 }
 
-function Field({ row, col, backgroundColor, disabled }) {
+function Field({ row, col, style, disabled }) {
+  const [pointer, setPointer] = useState(false);
+  const styling = { backgroundColor: style.backgroundColor, cursor: pointer && "pointer" };
+
   return (
     <button
       className="field"
       row={row}
       col={col}
-      style={backgroundColor}
+      style={styling}
       onClick={() => clickHandlerTurn(col, params)}
       disabled={disabled}
+      onMouseEnter={() => { !disabled && !params.gameOver && setPointer(true) }}
+      onMouseLeave={() => { params.gameOver && setPointer(false) }}
     >
       &nbsp;
     </button>
@@ -62,6 +66,7 @@ function Field({ row, col, backgroundColor, disabled }) {
 }
 
 function Board() {
+
   let fields = params.colorBoard.map((subarr, row) =>
     subarr.map((color, col) => {
       return (
@@ -69,8 +74,9 @@ function Board() {
           key={row.toString() + col.toString()}
           row={row}
           col={col}
-          backgroundColor={{ backgroundColor: color }}
+          style={{ backgroundColor: color }}
           disabled={row === 0 ? params.gameOver : true}
+
         />
       );
     })
@@ -79,9 +85,12 @@ function Board() {
   const displayMem = params.menu ? "none" : "";
 
   return (
-    <div className="board" style={{ display: displayMem }}>
+    <div className="board-outer" style={{ display: displayMem }}>
+      <div className="board-inner">
         {fields.map((subarr) => subarr.map((field) => field))}
       </div>
+      <Restart />
+    </div>
   );
 }
 

src/index.css

@@ -4,19 +4,27 @@ body {
     color: black;
 }
 
-.board {
+.board-outer {
     width: 700px;
-    height: 600px;
-    display: grid;
-    grid-template-columns: repeat(7, auto [col-start]);
-    margin-top: 50px;
-    margin-left: auto;
-    margin-right: auto;
     border: 5px solid black;
     background-color: blue;
+    margin-top: 30px;
+    margin-left: auto;
+    margin-right: auto;
 }
 
-.board .field {
+.board-inner {
+    width: 630px;
+    height: 540px;
+    display: grid;
+    grid-template-columns: repeat(7, auto [col-start]);
+    margin-left: auto;
+    margin-right: auto;
+    margin-top: 20px;
+    margin-bottom: 20px;
+}
+
+.board-inner .field {
     border: 3px solid black;
     border-radius: 100%;
     margin: 10px;
@@ -28,10 +36,15 @@ body {
     font-size: xx-large;
     border: 3px solid black;
     background-color: white;
-    margin-top: 20px;
+    margin-bottom: 30px;
 
 }
 
+.restart:hover {
+    cursor: pointer;
+    background-color: lightgray;
+}
+
 .gamemode-div {
 
     margin-left: auto;
@@ -52,3 +65,12 @@ body {
     font-size: larger;
 
 }
+
+.gamemode-div .gamemode-button:hover {
+    cursor: pointer;
+    background-color: lightgray;
+}
+
+.message {
+    font-size: larger;
+}