[mirotalkc2c] - improve chat UI

miroslavpejic85 · Dec 30, 2024 · d82c3a5 · d82c3a5
1 parent ba0c98d
commit d82c3a5
Show file tree

Hide file tree

Showing 6 changed files with 28 additions and 48 deletions.
diff --git a/backend/server.js b/backend/server.js
@@ -9,7 +9,7 @@
  * @license For private project or commercial purposes contact us at: license.mirotalk@gmail.com or purchase it directly via Code Canyon:
  * @license https://codecanyon.net/item/mirotalk-c2c-webrtc-real-time-cam-2-cam-video-conferences-and-screen-sharing/43383005
  * @author  Miroslav Pejic - miroslav.pejic.85@gmail.com
- * @version 1.1.50
+ * @version 1.1.51
  */
 
 require('dotenv').config();

diff --git a/frontend/css/chat.css b/frontend/css/chat.css
@@ -25,7 +25,7 @@
     justify-content: space-between;
     align-items: center;
     padding: 16px;
-    background: #2a7aef;
+    background: var(--primary-color);
     color: white;
     border-bottom: 1px solid rgba(255, 255, 255, 0.1);
     border-radius: 12px 0 0 0;
@@ -62,8 +62,6 @@
     overflow-y: auto;
     height: 80vh;
     flex-grow: 1;
-    scrollbar-width: thin;
-    scrollbar-color: #2a7aef #2f3136;
     transition: max-height 0.3s ease;
 }
 
@@ -94,9 +92,11 @@
     border-radius: 12px;
     background: var(--chat-bg);
     color: var(--text-color);
-    overflow: auto;
     word-wrap: break-word;
     user-select: text;
+    overflow: auto;
+    scrollbar-width: thin;
+    scrollbar-color: #393939 #000000;
 }
 
 .chat .body .msg.sent .text {
@@ -106,7 +106,7 @@
 }
 
 .chat .body .msg.received .text {
-    background: #2a7aef;
+    background: var(--primary-color);
     color: white;
     border-radius: 12px 12px 0 12px;
 }
@@ -123,15 +123,15 @@
     display: flex;
     align-items: center;
     padding: 5px;
-    background: #2b2d36;
+    background: var(--primary-color);
     border-top: 1px solid rgba(255, 255, 255, 0.1);
 }
 
 .chat .footer textarea {
     flex-grow: 1;
     padding: 5px;
     height: 40px;
-    border: 1px solid #2a7aef;
+    border: var(--border);
     border-radius: 8px;
     background: #2b2d36;
     color: var(--text-color);
@@ -141,10 +141,9 @@
 }
 
 .chat .footer textarea:focus {
-    border-color: #2a7aef;
     height: 60px;
     outline: none;
-    box-shadow: 0 0 5px #2a7aef;
+    box-shadow: 0 0 5px #000000;
 }
 
 .chat .footer .footer-buttons {
@@ -159,7 +158,7 @@
     padding: 5px;
     border: none;
     border-radius: 50px;
-    background: #2a7aef;
+    background: var(--secondary-color);
     color: white;
     text-align: center;
     font-size: 1.1rem;
@@ -171,25 +170,7 @@
 }
 
 .chat .footer .footer-buttons button:hover {
-    background-color: var(--secondary-color);
-}
-
-.chat .body::-webkit-scrollbar,
-.chat .msg .text::-webkit-scrollbar,
-.chat .footer textarea::-webkit-scrollbar {
-    width: 5px;
-}
-
-.chat .body::-webkit-scrollbar-track,
-.chat .msg .text::-webkit-scrollbar-track,
-.chat .footer textarea::-webkit-scrollbar-track {
-    background: transparent;
-}
-
-.chat .body::-webkit-scrollbar-thumb,
-.chat .msg .text::-webkit-scrollbar-thumb,
-.chat .footer textarea::-webkit-scrollbar-thumb {
-    background: var(--primary-color);
+    background-color: var(--primary-color);
 }
 
 .chatEmojiPicker {

diff --git a/frontend/css/client.css b/frontend/css/client.css
@@ -117,7 +117,6 @@ body {
     bottom: 0;
     display: none;
     text-align: center;
-    border-radius: 20px;
     background: transparent;
 }
 
@@ -155,6 +154,16 @@ body {
     color: #e74c3c !important;
 }
 
+/* Responsive for mobile */
+@media (max-width: 320px) {
+    #buttonsBar button {
+        font-size: 0.8rem;
+        width: 1.5rem;
+        height: 1.5rem;
+        padding: 0px;
+    }
+}
+
 /*--------------------------------------------------------------
 # Video Wrap - Header - Footer
 --------------------------------------------------------------*/
@@ -580,16 +589,6 @@ hr {
     border: 1px solid grey;
 }
 
-/* Responsive for mobile */
-@media (max-width: 320px) {
-    #buttonsBar button {
-        font-size: 0.8rem;
-        width: 1.5rem;
-        height: 1.5rem;
-        padding: 0px;
-    }
-}
-
 /*
 z-index:
     0 waitingDivContainer

diff --git a/frontend/html/client.html b/frontend/html/client.html
@@ -56,8 +56,8 @@
         <noscript>You need to enable JavaScript to run this app.</noscript>
 
         <div id="loadingDivContainer">
-            <div id="loadingDiv" class="center pulsate">
-                <h1>Loading</h1>
+            <div id="loadingDiv" class="center">
+                <h1 class="pulsate">Loading</h1>
                 <pre>
 Please allow camera & microphone
 access to use this app.          
@@ -66,8 +66,8 @@ <h1>Loading</h1>
         </div>
 
         <div id="waitingDivContainer" class="fadeIn">
-            <div id="waitingDiv" class="center pulsate">
-                <h1>Waiting</h1>
+            <div id="waitingDiv" class="center">
+                <h1 class="pulsate">Waiting</h1>
                 <pre>
 Wait user to join.
                 </pre>
@@ -169,8 +169,8 @@ <h1>Waiting</h1>
             <div class="footer">
                 <textarea id="chatInput" placeholder="Write a message..."></textarea>
                 <div class="footer-buttons">
-                    <button id="chatSendBtn" class="fas fa-paper-plane"></button>
                     <button id="chatEmojiBtn" class="fas fa-smile"></button>
+                    <button id="chatSendBtn" class="fas fa-paper-plane"></button>
                 </div>
             </div>
             <div id="chatEmoji" class="chatEmojiPicker hidden"></div>

diff --git a/frontend/js/client.js b/frontend/js/client.js
@@ -9,7 +9,7 @@
  * @license For private project or commercial purposes contact us at: license.mirotalk@gmail.com or purchase it directly via Code Canyon:
  * @license https://codecanyon.net/item/mirotalk-c2c-webrtc-real-time-cam-2-cam-video-conferences-and-screen-sharing/43383005
  * @author  Miroslav Pejic - miroslav.pejic.85@gmail.com
- * @version 1.1.50
+ * @version 1.1.51
  */
 
 const roomId = new URLSearchParams(window.location.search).get('room');

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "mirotalkc2c",
-    "version": "1.1.50",
+    "version": "1.1.51",
     "description": "A free WebRTC Cam-2-Cam browser-based video calls",
     "main": "server.js",
     "scripts": {