[mirotalksfu] - improve settings UI

public/css/Room.css

@@ -215,6 +215,10 @@ body {
     border-radius: 5px;
 }
 
+#mySettingsCloseBtn {
+    margin: 10px;
+}
+
 #mySettings button:hover {
     background-color: rgb(42 42 42 / 70%);
     border-radius: 5px;
@@ -223,6 +227,7 @@ body {
 #sessionTimeButton {
     cursor: default;
     position: absolute;
+    right: 15px;
     bottom: 15px;
 }
 
@@ -230,6 +235,11 @@ body {
     cursor: pointer;
 }
 
+#soundsButton,
+#lobbyButton {
+    padding: 10px;
+}
+
 /*--------------------------------------------------------------
 # Style the tab
 --------------------------------------------------------------*/

public/js/Room.js

@@ -142,6 +142,7 @@ function initClient() {
             'Lobby mode lets you protect your meeting by only allowing people to enter after a formal approval by a moderator',
             'right',
         );
+        setTippy('switchSounds', 'Toggle the sounds notifications', 'right');
         setTippy('whiteboardGhostButton', 'Toggle transparent background', 'bottom');
         setTippy('wbBackgroundColorEl', 'Background color', 'bottom');
         setTippy('wbDrawingColorEl', 'Drawing color', 'bottom');
@@ -172,7 +173,7 @@ function initClient() {
         setTippy('chatGhostButton', 'Toggle transparent background', 'bottom');
         setTippy('chatCloseButton', 'Close', 'right');
         setTippy('participantsCloseBtn', 'Close', 'left');
-        setTippy('sessionTime', 'Session time', 'right');
+        setTippy('sessionTime', 'Session time', 'top');
     }
     setupWhiteboard();
     initEnumerateDevices();

public/views/Room.html

@@ -184,9 +184,11 @@
                             <label class="form-check-label" style="color: #fff" for="switchLobby">&nbsp;Lobby</label>
                         </div>
                     </div>
-                    <div class="form-check form-switch form-switch-md">
+                    <div id="soundsButton">
-                        <input class="form-check-input" type="checkbox" id="switchSounds" checked />
+                        <div class="form-check form-switch form-switch-md">
-                        <label class="form-check-label" style="color: #fff" for="switchSounds">&nbsp;Sounds</label>
+                            <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>