From 03be8ce973be36734880293d6f753f3ac330c3d2 Mon Sep 17 00:00:00 2001
From: Miroslav Pejic <miroslav.pejic.85@gmail.com>
Date: Mon, 3 Apr 2023 18:45:22 +0200
Subject: [PATCH] [mirotalksfu] - improve settings UI

---
 public/css/Room.css    | 10 ++------
 public/js/Room.js      |  3 +--
 public/views/Room.html | 58 +++++++++++++++++++++++++-----------------
 3 files changed, 37 insertions(+), 34 deletions(-)

diff --git a/public/css/Room.css b/public/css/Room.css
index 0228a452..78166d19 100644
--- a/public/css/Room.css
+++ b/public/css/Room.css
@@ -345,14 +345,6 @@ body {
     transform: scale(1);
 }
 
-#sessionTimeButton {
-    cursor: default;
-    position: absolute;
-    right: 15px;
-    bottom: 15px;
-    width: auto;
-}
-
 /* on open display devices tab */
 #tabDevices {
     display: block;
@@ -1017,7 +1009,9 @@ progress {
 --------------------------------------------------------------*/
 
 table {
+    width: 320px;
     color: #fff;
+    table-layout: fixed;
     border-collapse: collapse;
     border-radius: 5px;
     border-style: hidden;
diff --git a/public/js/Room.js b/public/js/Room.js
index 5a0a6dbd..2cbf9a1c 100644
--- a/public/js/Room.js
+++ b/public/js/Room.js
@@ -187,7 +187,6 @@ function initClient() {
         setTippy('chatGhostButton', 'Toggle transparent background', 'bottom');
         setTippy('chatCloseButton', 'Close', 'right');
         setTippy('participantsCloseBtn', 'Close', 'left');
-        setTippy('sessionTime', 'Session time', 'top');
     }
     setupWhiteboard();
     initEnumerateDevices();
@@ -829,7 +828,7 @@ function startSessionTimer() {
     let callStartTime = Date.now();
     setInterval(function printTime() {
         let callElapsedTime = Date.now() - callStartTime;
-        sessionTime.innerHTML = ' ' + getTimeToString(callElapsedTime);
+        sessionTime.innerHTML = getTimeToString(callElapsedTime);
     }, 1000);
 }
 
diff --git a/public/views/Room.html b/public/views/Room.html
index 43fb5c74..a4a1bdb5 100644
--- a/public/views/Room.html
+++ b/public/views/Room.html
@@ -219,30 +219,40 @@ access to use this app.
                         <i class="fas fa-lock"></i>
                         <p>Unlock room</p>
                     </button>
-                    <div id="lobbyButton" class="hidden">
-                        <div class="form-check form-switch form-switch-md">
-                            <input class="form-check-input" type="checkbox" id="switchLobby" />
-                            <label class="form-check-label" style="color: #fff" for="switchLobby">&nbsp;Lobby</label>
-                        </div>
-                    </div>
-                    <div id="pitchBarButton">
-                        <div class="form-check form-switch form-switch-md">
-                            <input class="form-check-input" type="checkbox" id="switchPitchBar" checked />
-                            <label class="form-check-label" style="color: #fff" for="switchPitchBar"
-                                >&nbsp;Audio pitch bar</label
-                            >
-                        </div>
-                    </div>
-                    <div id="soundsButton">
-                        <div class="form-check form-switch form-switch-md">
-                            <input class="form-check-input" type="checkbox" id="switchSounds" checked />
-                            <label class="form-check-label" style="color: #fff" for="switchSounds">&nbsp;Sounds</label>
-                        </div>
-                    </div>
-                    <button id="sessionTimeButton">
-                        <i class="fas fa-clock"></i>
-                        <p id="sessionTime"></p>
-                    </button>
+                    <table>
+                        <tr id="lobbyButton" class="hidden">
+                            <td>
+                                <label for="switchLobby"><i class="fas fa-shield-halved"></i>&nbsp;Lobby</label>
+                            </td>
+                            <td class="form-check form-switch form-switch-md" style="margin-left: 10px">
+                                <input id="switchLobby" class="form-check-input" type="checkbox" />
+                            </td>
+                        </tr>
+                        <tr id="pitchBarButton">
+                            <td>
+                                <label for="switchPitchBar"
+                                    ><i class="fas fa-microphone-lines"></i>&nbsp;Pitch bar</label
+                                >
+                            </td>
+                            <td class="form-check form-switch form-switch-md" style="margin-left: 10px">
+                                <input id="switchPitchBar" class="form-check-input" type="checkbox" checked />
+                            </td>
+                        </tr>
+                        <tr id="soundsButton">
+                            <td>
+                                <label for="switchSounds"><i class="fas fa-music"></i>&nbsp;Sounds</label>
+                            </td>
+                            <td class="form-check form-switch form-switch-md" style="margin-left: 10px">
+                                <input id="switchSounds" class="form-check-input" type="checkbox" checked />
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <label for="sessionTime"><i class="fas fa-clock"></i>&nbsp;Session time</label>
+                            </td>
+                            <td><label id="sessionTime">00:00:00</label></td>
+                        </tr>
+                    </table>
                 </div>
 
                 <div id="tabRecording" class="tabcontent">