From 3f3716c7c3b025aa5feddd8e6693445e9a2d7130 Mon Sep 17 00:00:00 2001
From: Miroslav Pejic <miroslav.pejic@cloud.timenet.it>
Date: Thu, 13 Jan 2022 22:17:48 +0100
Subject: [PATCH] [mirotalk] - fix css

---
 public/css/client.css   | 12 ++++++++++++
 public/js/client.js     | 10 +++++-----
 public/view/client.html |  2 +-
 3 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/public/css/client.css b/public/css/client.css
index c7253afe..d27a4d29 100755
--- a/public/css/client.css
+++ b/public/css/client.css
@@ -573,6 +573,12 @@ button {
     color: #fff;
 }
 
+.left-msg .msg-caption-bubble {
+    background: var(--left-msg-bg);
+    border-bottom-left-radius: 0;
+    color: #fff;
+}
+
 /* right side */
 
 .right-msg {
@@ -611,6 +617,12 @@ button {
     border-radius: 15px;
 }
 
+.msg-caption-bubble {
+    max-width: 250px;
+    padding: 15px;
+    border-radius: 15px;
+}
+
 .msg-info {
     display: flex;
     justify-content: space-between;
diff --git a/public/js/client.js b/public/js/client.js
index 7bbddecb..cc00aeb0 100644
--- a/public/js/client.js
+++ b/public/js/client.js
@@ -1184,7 +1184,7 @@ function setTheme(theme) {
                 '--msger-private-bg',
                 'linear-gradient(to left, #383838, #000000)',
             );
-            document.documentElement.style.setProperty('--left-msg-bg', '#da05f3');
+            document.documentElement.style.setProperty('--left-msg-bg', '#9400a5');
             document.documentElement.style.setProperty('--private-msg-bg', '#f77070');
             document.documentElement.style.setProperty('--right-msg-bg', '#579ffb');
             document.documentElement.style.setProperty('--wb-bg', 'linear-gradient(to left, #1f1e1e, #000000)');
@@ -1194,7 +1194,7 @@ function setTheme(theme) {
             document.documentElement.style.setProperty('--btns-left', '20px');
             document.documentElement.style.setProperty('--btn-opc', '1');
             document.documentElement.style.setProperty('--my-settings-label-color', 'white');
-            document.documentElement.style.setProperty('--box-shadow', '3px 3px 6px #0500ff, -3px -3px 6px #da05f3');
+            document.documentElement.style.setProperty('--box-shadow', '3px 3px 6px #0500ff, -3px -3px 6px #9400a5');
             break;
         case 'dark':
             // dark theme
@@ -3484,11 +3484,11 @@ function handleSpeechTranscript(config) {
     const msgHTML = `
 	<div class="msg left-msg">
 		<div class="msg-img" style="background-image: url('${avatar_image}')"></div>
-		<div>
+		<div class="msg-caption-bubble">
             <div class="msg-info">
-                <div class="msg-info-name" style="color:white;">${name} : ${time_stamp}</div>
+                <div class="msg-info-name">${name} : ${time_stamp}</div>
             </div>
-            <div class="msg-text" style="color:white;">${transcipt}</div>
+            <div class="msg-text">${transcipt}</div>
         </div>
 	</div>
     `;
diff --git a/public/view/client.html b/public/view/client.html
index b81e9eac..54262154 100755
--- a/public/view/client.html
+++ b/public/view/client.html
@@ -185,7 +185,7 @@ access to use this app.
 
                 <main id="captionChat" class="msger-chat"></main>
                 <div class="msger-inputarea">
-                    <label>Speech recognition</label>
+                    <label><i class="fas fa-microphone-alt"></i>Speech recognition</label>
                     <button type="button" id="speechRecognitionStart" class="fas fa-play">&nbsp;Start</button>
                     <button type="button" id="speechRecognitionStop" class="fas fa-stop">&nbsp;Stop</button>
                 </div>