From 157c5e8ffaa1ff9cf9785aa4af55a1e503907cd5 Mon Sep 17 00:00:00 2001
From: DTieman <djurre.tieman@gmail.com>
Date: Wed, 22 Mar 2023 16:01:54 +0100
Subject: [PATCH] mau + themecontext that will soothe my eyes soon

---
 src/layout/pages/MainLobby.tsx         | 19 +++++++++++--------
 src/layout/pages/Room.tsx              |  2 +-
 src/layout/pages/Rooms.tsx             |  2 +-
 src/styles/App.scss                    |  2 +-
 src/styles/layout/pages/mainlobby.scss | 23 ++++++++++++++++-------
 src/utils/contexts/ThemeContext.tsx    | 26 ++++++++++++++++++++++++++
 src/utils/{ => hooks}/TitleHook.ts     |  0
 7 files changed, 56 insertions(+), 18 deletions(-)
 create mode 100644 src/utils/contexts/ThemeContext.tsx
 rename src/utils/{ => hooks}/TitleHook.ts (100%)

diff --git a/src/layout/pages/MainLobby.tsx b/src/layout/pages/MainLobby.tsx
index 32a3954..73e7bf4 100644
--- a/src/layout/pages/MainLobby.tsx
+++ b/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}>
-                <h2>Host Game</h2>
-                <Card cardString={'SPADES ACE'} isClickable />
-            </div>
-            <div className={"main-lobby__button clickable"} onClick={gotoRooms}>
-                <h2>Join Game</h2>
-                <Card cardString={'SPADES ACE'} isHidden isClickable />
+            <h1 className={"main-lobby__title mau"}>MauMau</h1>
+            <div className={"main-lobby__container"}>
+                <div className={"main-lobby__container-button clickable"} onClick={handleCreateRoom}>
+                    <h2 className={"mau"}>Host Game</h2>
+                    <Card cardString={'SPADES ACE'} isClickable />
+                </div>
+                <div className={"main-lobby__container-button clickable"} onClick={gotoRooms}>
+                    <h2 className={"mau"}>Join Game</h2>
+                    <Card cardString={'SPADES ACE'} isHidden isClickable />
+                </div>
             </div>
         </div>
     );
diff --git a/src/layout/pages/Room.tsx b/src/layout/pages/Room.tsx
index 4e865f7..d0cc86f 100644
--- a/src/layout/pages/Room.tsx
+++ b/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";
 
diff --git a/src/layout/pages/Rooms.tsx b/src/layout/pages/Rooms.tsx
index 98289fa..57412e1 100644
--- a/src/layout/pages/Rooms.tsx
+++ b/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";
 
diff --git a/src/styles/App.scss b/src/styles/App.scss
index e9cbf5d..d01a534 100644
--- a/src/styles/App.scss
+++ b/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;
 }
\ No newline at end of file
diff --git a/src/styles/layout/pages/mainlobby.scss b/src/styles/layout/pages/mainlobby.scss
index 76c24a1..4effd35 100644
--- a/src/styles/layout/pages/mainlobby.scss
+++ b/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;
-    justify-content: center;
-    align-items: center;
+    gap: 2rem;
+
+    &-button {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+    }
+  }
+
+  &__title {
+    font-size: 5rem;
   }
 }
\ No newline at end of file
diff --git a/src/utils/contexts/ThemeContext.tsx b/src/utils/contexts/ThemeContext.tsx
new file mode 100644
index 0000000..2653ad6
--- /dev/null
+++ b/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>
+    );
+};
\ No newline at end of file
diff --git a/src/utils/TitleHook.ts b/src/utils/hooks/TitleHook.ts
similarity index 100%
rename from src/utils/TitleHook.ts
rename to src/utils/hooks/TitleHook.ts