[mirotalk] - improve UI

public/css/client.css

@@ -333,6 +333,7 @@ body {
 .msg {
     display: flex;
     align-items: flex-end;
+    font-size: 0.8rem;
     margin-bottom: 10px;
 }
 
@@ -815,10 +816,9 @@ em-emoji-picker {
     background-color: transparent !important;
 }
 
-/* .swal2-popup {
-    font-size: 0.8 !important;
+.swal2-popup {
     border: var(--border) !important;
-} */
+}
 
 .swal2-select {
     background-color: black !important;

public/css/whiteboard.css

@@ -44,6 +44,7 @@
 .whiteboard-header-options button {
     padding: 10px;
     font-size: 1.2rem;
+    margin: 1px;
     background: rgb(0, 0, 0);
     color: #fff;
     border: var(--border);
@@ -66,7 +67,7 @@
     padding: 2px;
     width: 20px;
     height: 20px;
-    margin-left: 5px;
+    margin: 1px;
     border-radius: 50px;
     border: solid 0.5px #afadad38;
     cursor: pointer;

public/js/client.js

@@ -4180,9 +4180,12 @@ function downloadRecordedStream() {
         userLog(
             'success-html',
             `<div style="text-align: left;">
-                🔴 &nbsp; Recording Info <br/>
-                FILE: ${recFileName} <br/>
-                SIZE: ${blobFileSize} <br/>
+                🔴 &nbsp; Recording Info: <br/>
+                <ul>
+                    <li>File: ${recFileName}</li>
+                    <li>Size: ${blobFileSize}</li>
+                </ul>
+                <br/>
                 Please wait to be processed, then will be downloaded to your ${currentDevice} device.
             </div>`,
         );