mau + themecontext that will soothe my eyes soon

src/layout/pages/MainLobby.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import useTitle from "../../utils/TitleHook";
+import useTitle from "../../utils/hooks/TitleHook";
 import Card from "../components/Card";
 
 const ROOM_URL = `http://${process.env.REACT_APP_API_URL}/room`;
@@ -22,13 +22,16 @@ const MainLobby = () => {
 
     return (
         <div className={"main-lobby"}>
-            <div className={"main-lobby__button clickable"} onClick={handleCreateRoom}>
+            <h1 className={"main-lobby__title mau"}>MauMau</h1>
-                <h2>Host Game</h2>
+            <div className={"main-lobby__container"}>
-                <Card cardString={'SPADES ACE'} isClickable />
+                <div className={"main-lobby__container-button clickable"} onClick={handleCreateRoom}>
-            </div>
+                    <h2 className={"mau"}>Host Game</h2>
-            <div className={"main-lobby__button clickable"} onClick={gotoRooms}>
+                    <Card cardString={'SPADES ACE'} isClickable />
-                <h2>Join Game</h2>
+                </div>
-                <Card cardString={'SPADES ACE'} isHidden isClickable />
+                <div className={"main-lobby__container-button clickable"} onClick={gotoRooms}>
+                    <h2 className={"mau"}>Join Game</h2>
+                    <Card cardString={'SPADES ACE'} isHidden isClickable />
+                </div>
             </div>
         </div>
     );

src/layout/pages/Room.tsx

@@ -2,7 +2,7 @@ import useWebSocket from "react-use-websocket";
 import React from "react";
 import {useParams} from "react-router";
 import {GHButton} from "../components/Button";
-import useTitle from "../../utils/TitleHook";
+import useTitle from "../../utils/hooks/TitleHook";
 import Hand from "../components/Hand";
 import Deck from "../components/Deck";
 

src/layout/pages/Rooms.tsx

@@ -1,4 +1,4 @@
-import useTitle from "../../utils/TitleHook";
+import useTitle from "../../utils/hooks/TitleHook";
 import React from "react";
 import {Link} from "react-router-dom";
 

src/styles/App.scss

@@ -7,6 +7,6 @@
   src: local('Mau'), url(../assets/fonts/OrientalCatsLight.otf) format('opentype');
 }
 
-h1, h2, h3, h4, h5 {
+.mau {
   font-family: "Mau", serif;
 }

src/styles/layout/pages/mainlobby.scss

@@ -1,15 +1,24 @@
 .main-lobby {
   width: 100vw;
-  height: 100vh;
+  height: 75vh;
   display: flex;
-  justify-content: center;
+  flex-direction: column;
+  justify-content: space-evenly;
   align-items: center;
-  gap: 2rem;
 
-  &__button {
+  &__container {
     display: flex;
-    flex-direction: column;
+    gap: 2rem;
-    justify-content: center;
+
-    align-items: center;
+    &-button {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+    }
+  }
+
+  &__title {
+    font-size: 5rem;
   }
 }

src/utils/contexts/ThemeContext.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+
+interface IThemeContext {
+    isDarkMode: boolean
+    toggleTheme?: () => void
+}
+
+const ThemeContext = React.createContext<IThemeContext>({
+    isDarkMode: true
+});
+
+export const useTheme = () => React.useContext(ThemeContext);
+
+const ThemeContextProvider = ({children}: any) => {
+    const [isDarkMode, setIsDarkMode] = React.useState(true);
+
+    const toggleTheme = () => {
+        setIsDarkMode(!isDarkMode);
+    };
+
+    return (
+        <ThemeContext.Provider value={{isDarkMode, toggleTheme}}>
+            {children}
+        </ThemeContext.Provider>
+    );
+};