[mirotalksfu] - improve settings UI

public/css/Room.css

@@ -1012,6 +1012,27 @@ progress {
     padding: 0;
 }
 
+/*--------------------------------------------------------------
+# Table
+--------------------------------------------------------------*/
+
+table {
+    color: #fff;
+    border-collapse: collapse;
+    border-radius: 5px;
+    border-style: hidden;
+    box-shadow: 0 0 0 1px #666;
+}
+table td,
+th {
+    /* border: var(--border); */
+    text-align: left;
+    padding: 10px;
+}
+table tr:nth-child(even) {
+    background-color: #2b2b2b;
+}
+
 /*--------------------------------------------------------------
 # Video exit, pin/Unpin btn
 --------------------------------------------------------------*/

public/js/Room.js

@@ -866,7 +866,7 @@ function startRecordingTimer() {
     recTimer = setInterval(function printTime() {
         if (rc.isRecording()) {
             recElapsedTime++;
-            recordingStatus.innerHTML = '🔴 REC ' + secondsToHms(recElapsedTime);
+            recordingStatus.innerHTML = secondsToHms(recElapsedTime);
         }
     }, 1000);
 }

public/js/RoomClient.js

@@ -3076,7 +3076,7 @@ class RoomClient {
             });
         }
         if (this.isMobileDevice) this.getId('swapCameraButton').className = '';
-        this.getId('recordingStatus').innerHTML = '🔴 REC 0s';
+        this.getId('recordingStatus').innerHTML = '0s';
         this.event(_EVENTS.stopRec);
         this.sound('recStop');
     }

public/views/Room.html

@@ -264,9 +264,12 @@ access to use this app.
                         <i class="far fa-play-circle"></i>
                         <p>Resume recording</p>
                     </button>
-                    <br />
-                    <p id="recordingStatus">🔴 REC 0s</p>
-                    <br />
+                    <table>
+                        <tr>
+                            <td>🔴&nbsp;Recording time:</td>
+                            <td id="recordingStatus">0s</td>
+                        </tr>
+                    </table>
                 </div>
 
                 <div id="tabVideoShare" class="tabcontent">