From 4d436ca76d2af28474f3d2509a52b226916700c1 Mon Sep 17 00:00:00 2001
From: I-Have-An-Issue <34550332+I-Have-An-Issue@users.noreply.github.com>
Date: Sat, 8 Oct 2022 22:49:41 -0400
Subject: [PATCH] Home + Games (needs fine-tuning positioning)

---
 src/lib/components/UserListed.svelte |  4 ++--
 src/routes/(app)/+page.svelte        | 18 +++++++++++++++++-
 src/routes/(app)/games/+page.svelte  | 12 +++++++++++-
 tailwind.config.cjs                  |  2 +-
 4 files changed, 31 insertions(+), 5 deletions(-)

diff --git a/src/lib/components/UserListed.svelte b/src/lib/components/UserListed.svelte
index 2666b6a..babe819 100644
--- a/src/lib/components/UserListed.svelte
+++ b/src/lib/components/UserListed.svelte
@@ -1,6 +1,6 @@
-<div class="max-w-[7rem]">
+<div class="max-w-[6rem] inline-block">
 	<a href="/users/1">
-		<img class="rounded-full border-2 border-grey-300 w-28 h-28 shadow-lg" src="" alt="" />
+		<img class="rounded-full border-2 border-grey-300 w-24 h-24 shadow-lg" src="" alt="" />
 		<p class="text-center">Rowblox</p>
 	</a>
 </div>
diff --git a/src/routes/(app)/+page.svelte b/src/routes/(app)/+page.svelte
index 1d01f83..cc2d5e0 100644
--- a/src/routes/(app)/+page.svelte
+++ b/src/routes/(app)/+page.svelte
@@ -13,12 +13,21 @@
 </div>
 
 <div class="my-2">
-	<div class="flex items-center">
+	<div class="flex items-center mb-2">
 		<p class="font-bold text-2xl my-1">Friends</p>
 		<span class="flex-grow" />
 		<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 />
+	<Friend />
+	<Friend />
+	<Friend />
+	<Friend />
+	<Friend />
+	<Friend />
+	<Friend />
+	<Friend />
+	<Friend />
 </div>
 
 <div class="my-2">
@@ -28,4 +37,11 @@
 		<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 />
+	<Game />
+	<Game />
+	<Game />
+	<Game />
+	<Game />
+	<Game />
+	<Game />
 </div>
diff --git a/src/routes/(app)/games/+page.svelte b/src/routes/(app)/games/+page.svelte
index 146c10b..a9a8b6d 100644
--- a/src/routes/(app)/games/+page.svelte
+++ b/src/routes/(app)/games/+page.svelte
@@ -7,9 +7,19 @@
 </svelte:head>
 
 <div class="flex items-center">
-	<p class="font-bold text-2xl my-1">Games</p>
+	<p class="font-bold text-3xl my-1">Games</p>
 	<span class="flex-grow" />
+	<input class="rounded px-2 border-2 border-grey-300 text-black mr-2 py-1" type="text" name="search" id="search" placeholder="Search" />
+	<button 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 mr-2">Search</button>
 	<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>
 
 <Game />
+<Game />
+<Game />
+<Game />
+<Game />
+<Game />
+<Game />
+<Game />
+<Game />
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index cc1363e..6ae27f5 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -5,7 +5,7 @@ module.exports = {
 		container: {
 			center: true,
 			padding: {
-				"2xl": "12rem"
+				"2xl": "16rem"
 			}
 		},
 		extend: {}