Updated front-end to match back-end and better styling

src/layout/pages/Rooms.tsx

@@ -1,6 +1,7 @@
 import useTitle from "../../utils/hooks/TitleHook";
 import React from "react";
 import {useNavigate} from "react-router";
+import {NoButton} from "../components/Button";
 
 const ROOM_URL = `${process.env.REACT_APP_API_URL}/room`;
 
@@ -11,6 +12,13 @@ const Rooms = () => {
 
     const [rooms, setRooms] = React.useState<string[]>([]);
 
+    const handleRoomClick = (room: string) => {
+        if (!localStorage.getItem('playerName')){
+            localStorage.setItem("playerName", "Mau");
+        }
+        navigateTo(`/room/${room}`);
+    }
+
     React.useEffect(() => {
         fetch(ROOM_URL)
             .then(r => r.json())
@@ -22,9 +30,10 @@ const Rooms = () => {
             <h1 className={"mau"}>Rooms</h1>
             <ul>
                 {
-                    rooms.map((room, index) => {
-                        return <li key={index} className={"mouse-pointer mau"}
-                                   onClick={() => navigateTo(`/room/${room}`)}>{room}</li>
+                    rooms.map((room) => {
+                        return <li key={room}>
+                            <NoButton onClick={() => handleRoomClick(room)}>{room}</NoButton>
+                        </li>
                     })
                 }
             </ul>