More chat ui

resources/chatbox.scss

@@ -11,15 +11,6 @@
     float: right;
     margin-right: 1em;
 }
-#emoji-button {
-    position: absolute;
-    right: 1em;
-    font-size: 2em;
-    color: lightgray;
-}
-#emoji-button:hover {
-    color: gray;
-}
 #chat-log {
     padding: 0;
     padding-top: 2em;
@@ -58,18 +49,12 @@
     overflow-y: scroll;
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
-    height: 75%;
+    flex-grow: 1;
 }
 
 #chat-input {
-    width: 100%;
-    padding: 0.4em 4em 1em 1.2em;
-    border: 0;
     color: black;
-    border-top-left-radius: 0;
-    border-top-right-radius: 0;
-    height: 100%;
-    font-size: 16px;
+    border: 2px solid #e4a81c;
 }
 #chat-online-content {
     padding: 0;
@@ -87,7 +72,7 @@
     #chat-container {
         display: flex;
         width: 100%;
-        height: calc(100vh - 3em);;
+        height: calc(100vh - 3em);
         border: 1px solid #ccc;
         /*border-radius: 0 4px 0 0;*/
         border-bottom: 0;
@@ -99,9 +84,6 @@
     #chat-area {
         flex-grow: 1;
     }
-    .chat-left-panel, .chat-right-panel {
-        display: block !important;
-    }
 }
 #chat-input, #chat-log .content-message {
     font-family: "Noto Sans", Arial, "Lucida Grande", sans-serif;
@@ -109,14 +91,7 @@
 .info-pic {
     height: 100%;
 }
-.info-circle {
-    position: absolute;
-    cx: 12%;
-    cy: 12%;
-    r: 12%;
-    stroke: white;
-    stroke-width: 1;
-}
+
 .info-name {
     margin-left: 10px;
     font-size: 2em;
@@ -173,6 +148,7 @@
     display: flex;
     padding: 15px;
     gap: 0.5em;
+    border-radius: 6px;
 }
 .status-row:hover {
     background: lightgray;
@@ -191,6 +167,8 @@
     border-radius: 15px;
     max-width: 70%;
     width: fit-content;
+    font-size: 1.05rem;
+    line-height: 1.3;
 }
 .message-text-other {
     background: #eeeeee;
@@ -200,7 +178,12 @@
     background: rgb(0, 132, 255);
     color: white;
 }
-
+.chat-input-icon {
+    color: #045343;
+}
+.chat-input-icon:hover {
+    background: lightgray;
+}
 .chat {
     .active-span {
         color: #636363;
@@ -239,9 +222,6 @@
 
 @media (max-width: 799px) {
     #chat-area {
-        height: calc(100vh - 50px);
-    }
-    #emoji-button {
-        display: none;
+        height: calc(100vh - 120px);
     }
 }