[mirotalksfu] - improve UI

public/css/Room.css

@@ -81,8 +81,8 @@ body {
     width: 100%;
     height: 100%;
     overflow: hidden;
-    background: url('../images/background.jpg');
     /* background: var(--body-bg); */
+    background: url('../images/background.jpg');
 }
 
 /*--------------------------------------------------------------
@@ -131,14 +131,20 @@ body {
 }
 
 .init-user select {
+    width: 100%;
     margin-top: 15px;
     padding: 10px;
+    background: #2c2c2c;
+    color: white;
+    border: var(--border);
+    border-radius: 5px;
     cursor: pointer;
 }
 
 .init-user button {
     margin-top: 20px;
     margin-bottom: 10px;
+    width: 50px;
 }
 
 /*--------------------------------------------------------------
@@ -593,6 +599,10 @@ em-emoji-picker {
     background-color: transparent !important;
 }
 
+.swal2-input {
+    border: var(--border) !important;
+}
+
 .swal2-popup {
     /* border: var(--border) !important; */
     border: 0.5px solid rgb(255 255 255 / 32%) !important;

public/js/Room.js

@@ -230,7 +230,6 @@ async function initEnumerateDevices() {
     console.log('01 ----> init Enumerate Devices');
     await initEnumerateVideoDevices();
     await initEnumerateAudioDevices();
-    hide(loadingDiv);
     whoAreYou();
     if (!isVideoAllowed) {
         hide(initVideo);
@@ -447,6 +446,9 @@ function whoAreYou() {
     console.log('04 ----> Who are you');
     sound('open');
 
+    hide(loadingDiv);
+    document.body.style.background = 'var(--body-bg)';
+
     if (peer_name) {
         checkMedia();
         getPeerInfo();
@@ -465,7 +467,7 @@ function whoAreYou() {
     Swal.fire({
         allowOutsideClick: false,
         allowEscapeKey: false,
-        background: 'rgba(0, 0, 0, 0.7)', //swalBackground,
+        background: swalBackground,
         title: 'MiroTalk SFU',
         input: 'text',
         inputPlaceholder: 'Enter your name',