From f5732b473bc98dcff0a746187c401daea41dfe37 Mon Sep 17 00:00:00 2001
From: Miroslav Pejic <miroslav.pejic.85@gmail.com>
Date: Fri, 1 Dec 2023 19:37:15 +0100
Subject: [PATCH] [mirotalksfu] - improve UI

---
 public/css/Room.css    | 11 +++++++++++
 public/js/Room.js      |  6 +++---
 public/views/Room.html |  2 +-
 3 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/public/css/Room.css b/public/css/Room.css
index d0c7c256..ed1a8445 100644
--- a/public/css/Room.css
+++ b/public/css/Room.css
@@ -394,10 +394,21 @@ th {
 .microphone-table-width {
     width: 180px;
 }
+
+/*--------------------------------------------------------------
+# Dropdown menu
+--------------------------------------------------------------*/
+
 .dropdown-menu {
     background: var(--body-bg);
 }
 
+.dropdown-menu button:hover {
+    background-color: var(--body-bg);
+    color: white;
+    transform: scale(1);
+}
+
 /*--------------------------------------------------------------
 # Style the tab
 --------------------------------------------------------------*/
diff --git a/public/js/Room.js b/public/js/Room.js
index ef3d692a..8bcfde0e 100644
--- a/public/js/Room.js
+++ b/public/js/Room.js
@@ -3064,7 +3064,7 @@ async function getParticipantsList(peers) {
             >
             <!-- <i class="fas fa-bars"></i> -->
             </button>
-            <ul class="dropdown-menu" aria-labelledby="${socket.id}-chatDropDownMenu">
+            <ul class="dropdown-menu text-start" aria-labelledby="${socket.id}-chatDropDownMenu">
                 <li><button class="btn-sm ml5" id="sendAllButton" onclick="rc.selectFileToShare('${socket.id}', true)">${_PEER.sendFile} Share file to all</button></li>
                 <li><button class="btn-sm ml5" id="sendVideoToAll" onclick="rc.shareVideo('all');">${_PEER.sendVideo} Share audio/video to all</button></li>
                 <li><button class="btn-sm ml5" id="ejectAllButton" onclick="rc.peerAction('me','${socket.id}','eject',true,true)">${_PEER.ejectPeer} Eject all participants</button></li>
@@ -3129,7 +3129,7 @@ async function getParticipantsList(peers) {
                         >
                         <!-- <i class="fas fa-bars"></i> -->
                         </button>
-                        <ul class="dropdown-menu" aria-labelledby="${peer_id}-chatDropDownMenu">
+                        <ul class="dropdown-menu text-start" aria-labelledby="${peer_id}-chatDropDownMenu">
                             <li><button class="btn-sm ml5" id='${peer_id}___shareFile' onclick="rc.selectFileToShare('${peer_id}', false)">${peer_sendFile} Share file</button></li>
                             <li><button class="btn-sm ml5" id="${peer_id}___sendVideoTo" onclick="rc.shareVideo('${peer_id}');">${_PEER.sendVideo} Share audio/video</button></li>
                             <li><button class="btn-sm ml5" id='${peer_id}___pEject' onclick="rc.peerAction('me',this.id,'eject')">${peer_eject} Eject participant</button></li>
@@ -3189,7 +3189,7 @@ async function getParticipantsList(peers) {
                         >
                         <!-- <i class="fas fa-bars"></i> -->
                         </button>
-                        <ul class="dropdown-menu" aria-labelledby="${peer_id}-chatDropDownMenu">
+                        <ul class="dropdown-menu text-start" aria-labelledby="${peer_id}-chatDropDownMenu">
                             <li><button class="btn-sm ml5" id='${peer_id}___shareFile' onclick="rc.selectFileToShare('${peer_id}', false)">${peer_sendFile} Share file</button></li>
                             <li><button class="btn-sm ml5" id="${peer_id}___sendVideoTo" onclick="rc.shareVideo('${peer_id}');">${_PEER.sendVideo} Share Audio/Video</button></li>
                         </ul>
diff --git a/public/views/Room.html b/public/views/Room.html
index 9195e620..9147f61e 100644
--- a/public/views/Room.html
+++ b/public/views/Room.html
@@ -406,7 +406,7 @@ access to use this app.
                                 <i class="fas fa-screwdriver-wrench"></i>
                                 <p>Advance options</p>
                             </button>
-                            <div class="dropdown-menu" aria-labelledby="micOptionsButton">
+                            <div class="dropdown-menu text-start" aria-labelledby="micOptionsButton">
                                 <!-- onclick="event.stopPropagation()" -->
                                 <table class="settingsTable">
                                     <tr id="autoGainControlButton">