From 1608a44ac7cf88b73bada45b524c51cf315d39b5 Mon Sep 17 00:00:00 2001
From: Raven Scott <raven@ssh.surf>
Date: Mon, 3 Jun 2024 23:05:03 -0400
Subject: [PATCH] make things look better on screen

---
 index.html | 10 +++++++---
 style.css  | 24 ++++++++++++++++++++++++
 2 files changed, 31 insertions(+), 3 deletions(-)

diff --git a/index.html b/index.html
index 032aa3e..312a59e 100644
--- a/index.html
+++ b/index.html
@@ -29,10 +29,14 @@
       <div id="user-info">
         <!-- User info will be populated dynamically -->
       </div>
-      <label for="connection-topic">Enter connection topic:</label>
-      <input type="text" id="join-chat-room-topic" placeholder="Enter connection topic">
       <button id="create-chat-room">Create</button>
-      <button id="join-chat-room">Join</button> <!-- Changed id -->
+      <div id="or">
+        - or -
+      </div>
+      <div id="join-chat-room-container">
+        <!-- <label for="connection-topic">Enter Your Connection Topic:</label> -->
+        <input type="text" id="join-chat-room-topic" placeholder="topic">
+        <button id="join-chat-room">Join</button> <!-- Changed id -->
     </div>
     <div id="chat" class="hidden">
       <div id="header">
diff --git a/style.css b/style.css
index c9bdf32..50df5a5 100644
--- a/style.css
+++ b/style.css
@@ -122,6 +122,24 @@ main {
     margin-bottom: 1rem;
 }
 
+#join-chat-room-container {
+    display: flex;
+    align-items: center;
+    margin-top: 1rem; /* Add margin between this container and the previous content */
+}
+
+#join-chat-room-container label {
+    margin-right: 0.5rem; /* Add margin to the right of the label */
+}
+
+#join-chat-room-container input {
+    margin-right: 0.5rem; /* Add margin to the right of the input field */
+}
+
+#join-chat-room-container button {
+    margin-left: 0.5rem; /* Add margin to the left of the button */
+}
+
 #details {
     display: flex;
     justify-content: space-between;
@@ -130,6 +148,10 @@ main {
     border-radius: 4px;
 }
 
+#submit-button {
+    margin-left: 1rem; /* Added left margin */
+}
+
 #messages {
     flex: 1;
     min-height: 200px; /* Ensures minimum height to prevent squishing */
@@ -144,11 +166,13 @@ main {
 #message-form {
     display: flex;
     margin-top: 1rem;
+    margin-right: 1rem; /* Added right margin */
 }
 
 #message {
     flex: 1;
     margin-right: 0.5rem;
+    padding-right: 0.5rem; /* Added right padding */
 }
 
 #user-info {