Styling changes

public/style.css

@@ -30,7 +30,7 @@ body {
     width: 100%;
     height: 100vh;
     display: grid;
-    grid-template-rows: 100px 1fr 175px;
+    grid-template-rows: 100px 1fr 150px;
 }
 
 #rooms {
@@ -45,6 +45,10 @@ body {
     flex-direction: column;
 }
 
+#rooms #rooms-header {
+    margin-top: 7px;
+}
+
 #rooms h1 {
     margin-bottom: 30px;
 }
@@ -78,7 +82,7 @@ body {
 }
 
 #rooms.opened {
-    width: 30vw;
+    width: 20vw;
     padding: 20px;
 }
 
@@ -86,21 +90,8 @@ body {
     padding-left: 70px;
 }
 
-#rooms input {
-    width: 80%;
-}
-
-#rooms input::placeholder {
-    text-align: center;
-}
-
 #rooms form {
-    text-align: center;
-    margin: auto 0 20px 0;
-}
-
-#rooms form button {
-    margin-top: 10px;
+    margin: auto 5px 20px 5px;
 }
 
 nav,
@@ -129,11 +120,9 @@ nav span {
 footer {
     justify-content: center;
     gap: 30px;
-    padding: 20px;
 }
 
-textarea,
-input[type="text"] {
+:is(textarea, input[type="text"]):not(.input-field) {
     border: none;
     color: white;
     background-color: transparent;
@@ -317,6 +306,48 @@ button:is(:disabled, :hover) {
 #no-rooms.changed {
     display: none;
 }
+.input-group {
+    display: flex;
+    justify-content: center;
+}
+
+.input-field {
+    flex: 1;
+    width: 100%;
+    font-size: 1em;
+}
+
+.input-field::placeholder {
+    color: var(--secondary) !important;
+}
+
+.input-field:not(:first-child) {
+    border-left: 0;
+}
+.input-field:not(:last-child) {
+    border-right: 0;
+}
+
+.input-item {
+    background-color: var(--secondary);
+    font: inherit;
+}
+
+.input-field,
+.input-item {
+    border: 1px solid #93806c40;
+    padding: 0.5rem 0.75rem;
+}
+
+.input-field:first-child,
+.input-item:first-child {
+    border-radius: 5px 0 0 5px;
+}
+
+.input-field:last-child,
+.input-item:last-child {
+    border-radius: 0 5px 5px 0;
+}
 
 @media (max-width: 1500px) {
     #rooms-header {
@@ -324,7 +355,7 @@ button:is(:disabled, :hover) {
     }
 }
 
-@media (max-width: 1000px) {
+@media (max-width: 1300px) {
     #rooms.opened {
         width: 100vw;
     }
@@ -358,7 +389,7 @@ button:is(:disabled, :hover) {
         flex-direction: column;
     }
 
-    button:not(#menu, .button-circle) {
+    button:not(#menu, .button-circle, .input-item) {
         display: block;
         width: 100%;
     }

views/index.ejs

@@ -49,14 +49,15 @@
                 <%} %>
             </ul>
             <form method="POST" action="/">
-                <input
-                    id="room"
-                    name="room"
-                    autocomplete="off"
-                    type="text"
-                    placeholder="Room Name"
-                />
-                <button class="button-primary" type="submit">New Room</button>
+                <div class="input-group">
+                    <input placeholder="Room Name" type="text" name="room" id="room" class="input-field" />
+                    <button class="input-item" type="submit">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plus-circle" viewBox="0 0 16 16">
+                            <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
+                            <path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"/>
+                        </svg>
+                    </button>
+                </div>
             </form>
         </div>
         <div id="content">