[mirotalksfu] - improve UI

public/css/Room.css

@@ -166,6 +166,19 @@ body {
     color: red;
 }
 
+/*--------------------------------------------------------------
+# Init Audio/Video buttons
+--------------------------------------------------------------*/
+
+#initAudioButton,
+#initVideoButton,
+#initAudioVideoButton {
+    font-size: 1.2rem;
+    padding: 10px;
+    border: var(--border);
+    border-radius: 5px;
+}
+
 /*--------------------------------------------------------------
 # Room QR
 --------------------------------------------------------------*/
@@ -553,6 +566,11 @@ em-emoji-picker {
     background-color: transparent !important;
 }
 
+.swal2-popup {
+    /* border: var(--border) !important; */
+    border: 0.5px solid rgb(255 255 255 / 32%) !important;
+}
+
 /*--------------------------------------------------------------
 # About
 --------------------------------------------------------------*/
@@ -864,6 +882,12 @@ progress {
     cursor: move;
 }
 
+.whiteboard-header button {
+    padding: 10px;
+    border-radius: 5px;
+    border: var(--border);
+}
+
 .whiteboardColorPicker {
     -webkit-appearance: none;
     -moz-appearance: none;

public/js/Room.js

@@ -427,7 +427,7 @@ function whoAreYou() {
         inputPlaceholder: 'Enter your name',
         inputValue: default_name,
         html: `<br />
-        <div style="overflow: hidden;">
+        <div style="padding: 10px;">
             <button id="initAudioButton" class="fas fa-microphone" onclick="handleAudio(event)"></button>
             <button id="initVideoButton" class="fas fa-video" onclick="handleVideo(event)"></button>
             <button id="initAudioVideoButton" class="fas fa-eye" onclick="handleAudioVideo(event)"></button>