Better layout

src/layout/components/Button.tsx

@@ -1,6 +1,10 @@
 import React, {ButtonHTMLAttributes, DetailedHTMLProps, FunctionComponent} from "react";
 
-export const GHButton: FunctionComponent<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>> = (props) => {
+interface ButtonProps extends DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> {
+
+}
+
+export const GHButton: FunctionComponent<ButtonProps> = (props) => {
 
     const {className, ...rest} = props;
 
@@ -8,3 +12,12 @@ export const GHButton: FunctionComponent<DetailedHTMLProps<ButtonHTMLAttributes<
         <button className={`gh-button ${className}`} {...rest}></button>
     );
 }
+
+export const NoButton: FunctionComponent<ButtonProps> = (props) => {
+
+    const {className, ...rest} = props;
+
+    return (
+        <button className={`no-button ${className}`} {...rest}></button>
+    );
+}

src/layout/components/Deck.tsx

@@ -20,7 +20,7 @@ const Deck: FunctionComponent<Props> = ({currentCard, actionOnClick}) => {
             </div>
             <div className="deck">
                 <p></p>
-                <Card cardString={"AA  BB"} handleClick={handleClick} isHidden={true}/>
+                <Card cardString={"AA  BB"} handleClick={handleClick} isHidden isClickable/>
             </div>
         </div>
     );

src/layout/pages/MainLobby.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import useTitle from "../../utils/hooks/TitleHook";
 import Card from "../components/Card";
 import {useNavigate} from "react-router";
+import {NoButton} from "../components/Button";
 
 const ROOM_URL = `${process.env.REACT_APP_API_URL}/room`;
 
@@ -23,14 +24,14 @@ const MainLobby = () => {
         <div className={"main-lobby"}>
             <h1 className={"main-lobby__title mau"}>Mau-Mau</h1>
             <div className={"main-lobby__container"}>
-                <div className={"main-lobby__container-button clickable"} onClick={handleCreateRoom}>
+                <NoButton className={"main-lobby__container-button"} onClick={handleCreateRoom}>
                     <h2 className={"mau"}>Host Game</h2>
                     <Card cardString={'SPADES ACE'} isClickable/>
-                </div>
+                </NoButton>
-                <div className={"main-lobby__container-button clickable"} onClick={() => navigateTo('/rooms')}>
+                <NoButton className={"main-lobby__container-button"} onClick={() => navigateTo('/rooms')}>
                     <h2 className={"mau"}>Join Game</h2>
                     <Card cardString={'SPADES ACE'} isHidden isClickable/>
-                </div>
+                </NoButton>
             </div>
         </div>
     );

src/layout/pages/Rooms.tsx

@@ -19,11 +19,11 @@ const Rooms = () => {
 
     return (
         <div>
-            <h1>Rooms</h1>
+            <h1 className={"mau"}>Rooms</h1>
             <ul>
                 {
                     rooms.map((room, index) => {
-                        return <li key={index} className={"clickable"}
+                        return <li key={index} className={"mouse-pointer mau"}
                                    onClick={() => navigateTo(`/room/${room}`)}>{room}</li>
                     })
                 }

src/styles/App.scss

@@ -7,9 +7,21 @@
   src: local('Mau'), url(../assets/fonts/OrientalCatsLight.otf) format('opentype');
 }
 
-.app {
+* {
-  width: 100vw;
+  box-sizing: border-box;
-  height: 100vh;
+}
+
+body {
+  margin: 0;
+  height: 100dvh;
+  width: 100dvw;
+  overflow: hidden;
+}
+
+#root, .app {
+  @extend .dark;
+  padding: 1rem;
+  height: 100%;
 }
 
 .mau {

src/styles/layout/components/button.scss

@@ -54,3 +54,10 @@
     display: none;
   }
 }
+
+.no-button {
+  background-color: transparent;
+  border: none;
+  color: inherit;
+  cursor: pointer;
+}

src/styles/layout/pages/mainlobby.scss

@@ -1,5 +1,4 @@
 .main-lobby {
-  width: 100vw;
   height: 75vh;
   display: flex;
   flex-direction: column;

src/styles/utils/pointer.scss

@@ -1,4 +1,9 @@
-.clickable {
+.mouse-pointer {
   cursor: pointer;
   user-select: none;
 }
+
+.mouse-default {
+  cursor: default;
+  user-select: none;
+}