[mirotalksfu] - improve UI

public/js/Room.js

@@ -591,13 +591,12 @@ async function shareRoom(useNavigator = false) {
         Swal.fire({
             background: swalBackground,
             position: 'center',
-            title: 'Share your meeting room',
+            title: 'Share the room',
             html: `
-            <br/>
             <div id="qrRoomContainer">
                 <canvas id="qrRoom"></canvas>
             </div>
-            <br/><br/>
+            <br/>
             <p style="background:transparent; color:rgb(8, 189, 89);">Join from your mobile device</p>
             <p style="background:transparent; color:white;">No need for apps, simply capture the QR code with your mobile camera</p>
             <p style="background:transparent; color:white;">Or</p>
@@ -605,6 +604,8 @@ async function shareRoom(useNavigator = false) {
             <p style="background:transparent; color:rgb(8, 189, 89);">${RoomURL}</p>`,
             showDenyButton: true,
             showCancelButton: true,
+            cancelButtonColor: 'red',
+            denyButtonColor: 'green',
             confirmButtonText: `Copy URL`,
             denyButtonText: `Email invite`,
             cancelButtonText: `Close`,

public/views/Room.html

@@ -364,10 +364,10 @@
 
         <section id="participants" class="fadein center hidden">
             <header id="participantsHeader" class="participants-header">
-                <div id="participantsTitle" class="participants-header-title"></div>
                 <div class="participants-header-options">
                     <button id="participantsCloseBtn" class="fas fa-times"></button>
                 </div>
+                <div id="participantsTitle" class="participants-header-title"></div>
             </header>
             <main>
                 <div id="roomParticipants"></div>