[mirotalkc2c] - refactor select inputs, update deps

Author: miroslavpejic85

.env.template

@@ -1,5 +1,5 @@
 # ====================================================
-# MiroTalk C2C v.1.2.83 - Environment Configuration
+# MiroTalk C2C v.1.2.84 - Environment Configuration
 # ====================================================
 
 # App environment

backend/server.js

@@ -9,7 +9,7 @@
  * @license For private project or commercial purposes contact us at: license.mirotalk@gmail.com or purchase it directly via Code Canyon:
  * @license https://codecanyon.net/item/mirotalk-c2c-webrtc-real-time-cam-2-cam-video-conferences-and-screen-sharing/43383005
  * @author  Miroslav Pejic - miroslav.pejic.85@gmail.com
- * @version 1.2.83
+ * @version 1.2.84
  */
 
 require('dotenv').config();

frontend/css/client.css

@@ -441,15 +441,39 @@ video::-webkit-media-controls {
 }
 
 #settings select {
-    margin-top: 15px;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    margin-top: 10px;
     width: 100%;
-    height: 40px;
+    height: auto;
     max-width: 280px;
-    border-radius: 5px;
-    background-color: var(--secondary-color);
+    padding: 10px 36px 10px 14px;
+    border: 1px solid var(--secondary-color);
+    border-radius: 8px;
+    background-color: var(--primary-color);
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23f5f5f5' d='M1.41 0L6 4.58 10.59 0 12 1.41l-6 6-6-6z'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: right 12px center;
+    background-size: 12px;
     color: var(--text-color);
+    font-family: 'Montserrat', sans-serif;
     font-size: 0.9rem;
     cursor: pointer;
+    box-sizing: border-box;
+    transition:
+        border-color 0.2s ease,
+        box-shadow 0.2s ease;
+}
+
+#settings select:hover {
+    border-color: rgba(255, 255, 255, 0.25);
+}
+
+#settings select:focus {
+    outline: none;
+    border-color: var(--accent-color);
+    box-shadow: 0 0 0 3px rgba(55, 109, 249, 0.2);
 }
 
 #settings span {
@@ -579,8 +603,37 @@ th {
 }
 
 #google_translate_element select {
-    background: var(--secondary-color) !important;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    width: 100%;
+    max-width: 280px;
+    padding: 10px 36px 10px 14px !important;
+    border: 1px solid var(--secondary-color) !important;
+    border-radius: 8px !important;
+    background-color: var(--primary-color) !important;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23f5f5f5' d='M1.41 0L6 4.58 10.59 0 12 1.41l-6 6-6-6z'/%3E%3C/svg%3E") !important;
+    background-repeat: no-repeat !important;
+    background-position: right 12px center !important;
+    background-size: 12px !important;
     color: var(--text-color) !important;
+    font-family: 'Montserrat', sans-serif;
+    font-size: 0.9rem;
+    cursor: pointer;
+    box-sizing: border-box;
+    transition:
+        border-color 0.2s ease,
+        box-shadow 0.2s ease;
+}
+
+#google_translate_element select:hover {
+    border-color: rgba(255, 255, 255, 0.25) !important;
+}
+
+#google_translate_element select:focus {
+    outline: none;
+    border-color: var(--accent-color) !important;
+    box-shadow: 0 0 0 3px rgba(55, 109, 249, 0.2) !important;
 }
 
 /*--------------------------------------------------------------

frontend/js/client.js

@@ -9,7 +9,7 @@
  * @license For private project or commercial purposes contact us at: license.mirotalk@gmail.com or purchase it directly via Code Canyon:
  * @license https://codecanyon.net/item/mirotalk-c2c-webrtc-real-time-cam-2-cam-video-conferences-and-screen-sharing/43383005
  * @author  Miroslav Pejic - miroslav.pejic.85@gmail.com
- * @version 1.2.83
+ * @version 1.2.84
  */
 
 const roomId = new URLSearchParams(window.location.search).get('room');

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "mirotalkc2c",
-    "version": "1.2.83",
+    "version": "1.2.84",
     "description": "A free WebRTC Cam-2-Cam browser-based video calls",
     "main": "server.js",
     "scripts": {
@@ -38,7 +38,7 @@
     "license": "AGPL-3.0",
     "homepage": "https://github.com/miroslavpejic85/mirotalkc2c",
     "dependencies": {
-        "@mattermost/client": "11.4.0",
+        "@mattermost/client": "11.5.0",
         "@ngrok/ngrok": "1.7.0",
         "@sentry/node": "^10.46.0",
         "colors": "^1.4.0",
@@ -47,7 +47,7 @@
         "dompurify": "^3.3.3",
         "dotenv": "^17.3.1",
         "express": "^5.2.1",
-        "express-openid-connect": "^2.19.4",
+        "express-openid-connect": "^2.20.1",
         "he": "^1.2.0",
         "helmet": "^8.1.0",
         "httpolyglot": "0.1.2",