Merge branch 'main' of github.com:utastudents/cse3310_sp24_group_28

html/main.js

@@ -201,6 +201,8 @@ connection.onmessage = function(evt){
     }
     else if(msg == "unapproved"){
       document.getElementById("serverMessage").innerHTML = "Name already taken";
+      document.getElementById("serverMessage").style.display = "block";
+
     }
   }
 

html/styles.css

@@ -3,28 +3,73 @@ body{
   font-family: monospace;
 }
 h1{
-  background-color: white;
+  /*background-color: white;*/
   text-align:center;
+  font-size: 48px;  
+  font-weight: bold; 
+}
+@keyframes rgbColor {
+  0% {
+    background-color: rgb(238, 233, 233); 
+  }
+  20% {
+    background-color: rgb(255, 228, 225); 
+  }
+  40% {
+    background-color: rgb(255, 240, 245); 
+  }
+  60% {
+    background-color: rgb(230, 230, 250); 
+  }
+  80% {
+    background-color: rgb(245, 245, 245); 
+  }
+  100% {
+    background-color: rgb(240, 255, 255); 
+  }
+}
+
+
+body {
+  background-color: rgb(232, 232, 232);
+  animation: rgbColor 60s infinite; 
+  font-family: monospace;
 }
 
+#serverMessage {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 100%;
+  text-align: center;
+  color: red;
+  font-size: 18px;
+}
+
+
 #textInput {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   height: 100vh;
+  font-size: 18px;
   position: absolute;
-  top: calc(50% + 130px);
+  top: calc(50% + 230px);
   left: 50%;
   transform: translate(-50%, -50%);
 }
 #lobby{
   text-align: center;
+  font-size: 18px;
+
 }
 #lobbyList{
   background-color: white;
   margin: 0 auto;
   margin-bottom: 10px;
+  font-size: 18px;
   width:300px;
   border:3px solid;
   border-color: black;
@@ -75,7 +120,7 @@ h1{
 }
 #midBox{
   background-color: rgb(255, 255, 255);
-  height:790px;
+  height:730px;
   width:300px;
   margin-right: 5px;
   float:left;
@@ -110,13 +155,14 @@ h1{
   background-color: #fff;
   border: 1px solid #ccc;
   border-radius: 5px;
-  padding: 5px;
+  padding: 10px;
   overflow-y: auto;
   scrollbar-width: thin;
   scrollbar-color: rgba(0, 0, 0, 0.5) rgba(0, 0, 0, 0.1);
-  max-height: 400px; 
+  max-height: 500px; 
   width: 265px; 
-  height: calc(70% - 20px); 
+  height: calc(93% - 20px); 
+  font-size: 13px;
 
 }