Merge pull request #18 from phillip-che/phillip-branch

client/app/globals.css

@@ -37,3 +37,9 @@ a {
     color-scheme: light;
   }
 }
+
+@media only screen and (max-width: 1000px) {
+  .main {
+    margin: 0 auto;
+  }
+}

client/components/LoginFields.tsx

@@ -31,7 +31,7 @@ const LoginFields = () => {
   const handleCreateRoomClick = () => {
     setUsername(usernameInput);
     sessionStorage.setItem("username", usernameInput);
-    socket.emit(EVENTS.CLIENT.CREATE_ROOM, {username: username});
+    socket.emit(EVENTS.CLIENT.CREATE_ROOM, {username: usernameInput});
   };
 
   useEffect(() => {

client/styles/ChatContainer.css

@@ -1,4 +1,12 @@
 .chat-container {
     display: flex;
     width: 1000px;
+}
+
+@media only screen and (max-width: 1000px) {
+    .chat-container {
+        display: flex;
+        flex-direction: column;
+        width: auto;
+    }
 }

client/styles/ChatRoomInfo.css

@@ -51,4 +51,23 @@
     50% {
         opacity: 0.6;
     }
+}
+
+@media only screen and (max-width: 1000px) {
+    .chat-room-info {
+        margin: auto;
+        display: flex;
+        flex-direction: column;
+        height: auto;
+        width: 350px;
+        gap: 5px;
+    }
+    .user-list {
+        text-align: center;
+        margin-top: 5px;
+        margin-bottom: 30px;
+    }
+    .user-count {
+        justify-content: center;
+    }
 }

client/styles/HomeContainer.css

@@ -6,4 +6,11 @@ h2 {
     padding: 10rem;
     box-shadow: 0 1px 1px 0 #3E3E3D, 0 6px 20px 0 #3E3E3D;
     border-radius: 10px;
+}
+
+@media only screen and (max-width: 1000px) {
+    .home-container {
+        padding: 0rem;
+        box-shadow: none;
+    }
 }

client/styles/LeaveChatButton.css

@@ -36,14 +36,14 @@
       transform: translateY(-8px);
     }
   }
-  .bob-on-hover {
+.bob-on-hover {
     display: inline-block;
     vertical-align: middle;
     -webkit-transform: perspective(1px) translateZ(0);
     transform: perspective(1px) translateZ(0);
     box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-  }
-  .bob-on-hover:hover, .bob-on-hover:focus, .bob-on-hover:active {
+}
+.bob-on-hover:hover, .bob-on-hover:focus, .bob-on-hover:active {
     -webkit-animation-name: bob-on-hover-float, bob-on-hover;
     animation-name: bob-on-hover-float, bob-on-hover;
     -webkit-animation-duration: .3s, 1.5s;
@@ -58,4 +58,12 @@
     animation-fill-mode: forwards;
     -webkit-animation-direction: normal, alternate;
     animation-direction: normal, alternate;
-  }
+}
+
+@media only screen and (max-width: 1000px) {
+    .leave-room-button {
+        display: flex;
+        margin-left: 0px;
+        align-self: center;
+    }
+}

client/styles/MessageInput.css

@@ -2,7 +2,6 @@
     display: flex;
     width: 750px;
     margin-top: 10px;
-
 }
 
 .send-message-button {
@@ -23,4 +22,10 @@
 
 .file-upload label:hover {
     opacity: 0.5;
+}
+
+@media only screen and (max-width: 1000px) {
+    .message-input {
+        width: auto;
+    }
 }

client/styles/MessagesContainer.css

@@ -7,4 +7,10 @@
     margin-top: 1rem;
     overflow-x: hidden;
     border-radius: 5px;
+}
+
+@media only screen and (max-width: 1000px) {
+    .messages-container {
+        width: 350px;
+    }
 }