Class always lit

src/app.css

@@ -1,3 +1,5 @@
+@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
@@ -7,7 +9,7 @@ body {
 	@apply text-black;
 	padding: 0;
 	margin: 0;
-	font-family: Helvetica;
+	font-family: "Roboto", sans-serif;
 }
 
 .scrolling-background {

src/routes/(app)/+error.svelte

@@ -10,7 +10,7 @@
 		<p>Please try again later, or report this incident to a Rowblox developer if it persists.</p>
 	</div>
 	<div class="py-4 px-2 text-lg text-black">
-		<span class="mr-2 px-3 py-1 rounded border-2 border-blue-500 shadow-lg cursor-pointer hover:bg-blue-200" onclick="javascript:history.back()">Go Back</span>
+		<span class="mr-2 px-3 py-1 rounded border-2 border-blue-500 text-blue-500 shadow-lg cursor-pointer hover:bg-blue-200" onclick="javascript:history.back()">Go Back</span>
-		<a class="mr-2 px-3 py-1 rounded border-2 border-gray-500 shadow-lg hover:bg-gray-200" href="/">Go Home</a>
+		<a class="mr-2 px-3 py-1 rounded border-2 border-gray-500 text-gray-500 shadow-lg hover:bg-gray-200" href="/">Go Home</a>
 	</div>
 </div>

src/routes/(app)/+layout.svelte

@@ -6,32 +6,17 @@
 		<a class="mr-7" href="/games">Games</a>
 		<a class="mr-7" href="/catalog">Catalog</a>
 		<a class="mr-7" href="/forums">Forums</a>
-		<input
+		<input class="rounded px-2 border-2 border-grey-300 text-black" type="text" name="search" id="search" placeholder="Search" />
-			class="rounded px-2 border-2 border-grey-300 text-black"
-			type="text"
-			name="search"
-			id="search"
-			placeholder="Search"
-		/>
 		<span class="flex-grow" />
-		<a class="mr-2 px-2 flex items-center rounded bg-blue-600 shadow-md" href="/my/money">
+		<a class="mr-2 px-2 flex items-center my-auto rounded bg-blue-500 shadow-lg" href="/my/money">
 			<img class="h-6 mr-1.5" src="/img/rowbux.png" alt="" />
 			100
 		</a>
 		<div class="relative inline-block dropdown">
 			<button class="hover:text-zinc-200" href="/my/profile"
 				>Only16Characters
-				<svg
+				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4 inline-block">
-					xmlns="http://www.w3.org/2000/svg"
+					<path fill-rule="evenodd" d="M12.53 16.28a.75.75 0 01-1.06 0l-7.5-7.5a.75.75 0 011.06-1.06L12 14.69l6.97-6.97a.75.75 0 111.06 1.06l-7.5 7.5z" clip-rule="evenodd" />
-					viewBox="0 0 24 24"
-					fill="currentColor"
-					class="w-4 h-4 inline-block"
-				>
-					<path
-						fill-rule="evenodd"
-						d="M12.53 16.28a.75.75 0 01-1.06 0l-7.5-7.5a.75.75 0 011.06-1.06L12 14.69l6.97-6.97a.75.75 0 111.06 1.06l-7.5 7.5z"
-						clip-rule="evenodd"
-					/>
 				</svg>
 			</button>
 

src/routes/(app)/+page.svelte

@@ -9,14 +9,14 @@
 
 <div class="flex items-center">
 	<img class="rounded-full border-2 border-grey-300 w-36 h-36 mx-2 shadow-lg" src="" alt="" />
-	<p class="mx-2 font-bold text-3xl">Hello, abcdefghijklmnop!</p>
+	<p class="mx-2 font-bold text-3xl">Hello, Only16Characters!</p>
 </div>
 
 <div class="my-2">
 	<div class="flex items-center">
 		<p class="font-bold text-2xl my-1">Friends</p>
 		<span class="flex-grow" />
-		<a class="text-lg mr-2 px-3 py-0.5 rounded border-2 border-blue-500 shadow-lg cursor-pointer hover:bg-blue-200 text-blue-500" href="/my/friends">View All</a>
+		<a class="text-lg px-3 py-0.5 rounded border-2 border-blue-500 shadow-lg cursor-pointer hover:bg-blue-200 text-blue-500" href="/my/friends">View All</a>
 	</div>
 	<Friend />
 </div>
@@ -25,7 +25,7 @@
 	<div class="flex items-center">
 		<p class="font-bold text-2xl mt-1">Popular Games</p>
 		<span class="flex-grow" />
-		<a class="text-lg mr-2 px-3 py-0.5 rounded border-2 border-blue-500 shadow-lg cursor-pointer hover:bg-blue-200 text-blue-500" href="/games">View All</a>
+		<a class="text-lg px-3 py-0.5 rounded border-2 border-blue-500 shadow-lg cursor-pointer hover:bg-blue-200 text-blue-500" href="/games">View All</a>
 	</div>
 	<Game />
 </div>

src/routes/(app)/games/+page.svelte

@@ -1,29 +1,15 @@
+<script>
+	import Game from "$lib/components/GameListed.svelte";
+</script>
+
 <svelte:head>
 	<title>Games - Rowblox</title>
 </svelte:head>
 
-<div class="max-w-lg text-left text-black">
+<div class="flex items-center">
-    <p class="text-4xl text-left font-['Helvetica'] font-bold mt-20 py-5">Games</p>
+	<p class="font-bold text-2xl my-1">Games</p>
-    <div class="text-xl text-blue-500">
+	<span class="flex-grow" />
-		<a class="px-5 py-1 rounded shadow-lg border-2 border-blue-500 hover:bg-blue-300" href="/my/places">Create a game</a>
+	<a class="text-lg px-3 py-0.5 rounded border-2 border-blue-500 shadow-lg cursor-pointer hover:bg-blue-200 text-blue-500" href="/games/create">Create Game</a>
-	</div>
 </div>
 
-<div class="rounded-lg border border-gray-400 w-52 mt-10 h-60 flex-auto">
+<Game />
-    <div class="p-2">
-        <h1 class="mb-2 text-xl font-bold">ORC Court</h1>
-        <img class="w-44 h-32 mx-auto" src="/img/worker.png" alt="" />
-        <p class="text-bold">Welcome to Court!</p>
-    </div>
-    <div class="text-xl text-white">
-		<a class="px-5 py-1 rounded shadow-lg border-2 bg-green-500 mx-2" href="/game/id">Play</a>
-	</div> 
-    </div>
-   
-
-
-
-
-
-
-

tailwind.config.cjs

@@ -5,7 +5,7 @@ module.exports = {
 		container: {
 			center: true,
 			padding: {
-				"2xl": "16rem"
+				"2xl": "12rem"
 			}
 		},
 		extend: {}