From d88f6e2bbf54df782589d666abff6c84e4621634 Mon Sep 17 00:00:00 2001
From: April Hall <ari@arithefirst.com>
Date: Mon, 6 Jan 2025 20:45:09 -0500
Subject: [PATCH] fix: Page style changes

---
 src/app.css                       |  7 +++++++
 src/lib/components/message.svelte |  2 +-
 src/routes/+page.svelte           | 28 ++++++++++++++++------------
 3 files changed, 24 insertions(+), 13 deletions(-)

diff --git a/src/app.css b/src/app.css
index a31e444..b10751c 100644
--- a/src/app.css
+++ b/src/app.css
@@ -1,3 +1,10 @@
 @import 'tailwindcss/base';
 @import 'tailwindcss/components';
 @import 'tailwindcss/utilities';
+
+.abs-centered {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+}
\ No newline at end of file
diff --git a/src/lib/components/message.svelte b/src/lib/components/message.svelte
index 33f0dc8..58e7b39 100644
--- a/src/lib/components/message.svelte
+++ b/src/lib/components/message.svelte
@@ -3,7 +3,7 @@
   const { message, imageSrc, user }: TypeMessage   = $props()
 </script>
 
-<div class="w-full hover:bg-base-200 flex py-2">
+<div class="w-full hover:bg-base-300 bg-base-200 flex py-2">
   <div class="avatar mx-2">
     <div class="w-12 rounded">
       <img src={imageSrc} alt="Profile image for {user}" />
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 95fd490..3b9ba4d 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -33,18 +33,22 @@
   });
 </script>
 
-<main class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-1/2 h-fit">
-  <h1 class="text-lg"><span class="text-svelte">SvelteKit</span> with Socket.IO Integration</h1>
-  <form class="my-1 flex" on:submit={sendMessage}>
-    <input type="text" placeholder="Type here" class="input input-bordered w-1/2 mr-1" bind:value={msg} />
-    <button class="btn w-1/2" type="submit">Send</button>
-  </form>
-  <button
-    class="btn w-full"
-    on:click={() => {
+<main class="grid grid-cols-2 h-screen w-full">
+  <div class="relative h-full w-full">
+    <div class="h-fit col-span-1 w-10/12 abs-centered">
+      <h1 class="text-lg"><span class="text-svelte">SV</span>Chat</h1>
+      <form class="my-1 flex" on:submit={sendMessage}>
+        <input type="text" placeholder="Type here" class="input input-bordered w-1/2 mr-1" bind:value={msg} />
+        <button class="btn w-1/2" type="submit">Send Message</button>
+      </form>
+      <button
+        class="btn w-full"
+        on:click={() => {
       log = [];
-    }}>Clear</button>
-  <section>
+    }}>Clear Messages</button>
+    </div>
+  </div>
+  <div class="col-span-1 overflow-scroll bg-base-200 m-4 rounded-lg">
     {#each log as message}
       <Message
         imageSrc={message.imageSrc}
@@ -52,5 +56,5 @@
         message={message.message}
       />
     {/each}
-  </section>
+  </div>
 </main>
\ No newline at end of file