[mirotalk] - profile tab UI improvements

.env.template

@@ -1,5 +1,5 @@
 # ====================================================
-# MiroTalk P2P v.1.8.22 - Environment Configuration
+# MiroTalk P2P v.1.8.23 - Environment Configuration
 # ====================================================
 
 # App environment

app/src/config.template.js

@@ -2,7 +2,7 @@
 
 /**
  * ==============================================
- * MiroTalk P2P v.1.8.22 - Configuration File
+ * MiroTalk P2P v.1.8.23 - Configuration File
  * ==============================================
  *
  * This file is the central configuration source.

app/src/server.js

@@ -45,7 +45,7 @@ dependencies: {
  * @license For commercial use or closed source, contact us at license.mirotalk@gmail.com or purchase directly from CodeCanyon
  * @license CodeCanyon: https://codecanyon.net/item/mirotalk-p2p-webrtc-realtime-video-conferences/38376661
  * @author  Miroslav Pejic - miroslav.pejic.85@gmail.com
- * @version 1.8.22
+ * @version 1.8.23
  *
  */
 

package-lock.json

@@ -1,12 +1,12 @@
 {
     "name": "mirotalk",
-    "version": "1.8.22",
+    "version": "1.8.23",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "mirotalk",
-            "version": "1.8.22",
+            "version": "1.8.23",
             "license": "AGPL-3.0",
             "dependencies": {
                 "@mattermost/client": "11.6.0",

package.json

@@ -1,6 +1,6 @@
 {
     "name": "mirotalk",
-    "version": "1.8.22",
+    "version": "1.8.23",
     "description": "A free WebRTC browser-based video call",
     "main": "server.js",
     "scripts": {

public/css/client.css

@@ -3318,7 +3318,7 @@ button {
 --------------------------------------------------------------*/
 
 #myPeerNameSet {
-    width: 50%;
+    flex: 1;
     padding: 10px;
     border: var(--border);
     border-radius: 8px;
@@ -3331,6 +3331,19 @@ button {
     margin-bottom: 5px;
 }
 
+#myProfileAvatarContainer {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 12px;
+}
+
+#myProfileAvatarBtns {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+}
+
 #myProfileAvatar {
     margin-top: 10px;
     width: 64px;
@@ -3419,7 +3432,22 @@ button {
 
 #myProfileAvatarUploadBtn,
 #myProfileAvatarResetBtn {
-    margin-top: 6px;
+    margin-top: 0;
+}
+
+#myPeerNameSetContainer {
+    display: flex;
+    align-items: stretch;
+    gap: 8px;
+}
+
+#myPeerNameSetBtn {
+    padding: 10px 8px;
+    font-size: 0.75rem;
+    white-space: nowrap;
+    width: fit-content;
+    flex-shrink: 0;
+    box-sizing: border-box;
 }
 
 /*--------------------------------------------------------------

public/js/brand.js

@@ -109,7 +109,7 @@ let brand = {
     },
     about: {
         imageUrl: '../images/mirotalk-logo.gif',
-        title: 'WebRTC P2P v1.8.22',
+        title: 'WebRTC P2P v1.8.23',
         html: `
             <button 
                 id="support-button" 

public/js/client.js

@@ -15,7 +15,7 @@
  * @license For commercial use or closed source, contact us at license.mirotalk@gmail.com or purchase directly from CodeCanyon
  * @license CodeCanyon: https://codecanyon.net/item/mirotalk-p2p-webrtc-realtime-video-conferences/38376661
  * @author  Miroslav Pejic - miroslav.pejic.85@gmail.com
- * @version 1.8.22
+ * @version 1.8.23
  *
  */
 
@@ -15580,7 +15580,7 @@ function showAbout() {
     Swal.fire({
         background: swBg,
         position: 'center',
-        title: brand.about?.title && brand.about.title.trim() !== '' ? brand.about.title : 'WebRTC P2P v1.8.22',
+        title: brand.about?.title && brand.about.title.trim() !== '' ? brand.about.title : 'WebRTC P2P v1.8.23',
         imageUrl: brand.about?.imageUrl && brand.about.imageUrl.trim() !== '' ? brand.about.imageUrl : images.about,
         customClass: { image: 'img-about' },
         html: `

public/views/client.html

@@ -1062,16 +1062,16 @@ access to use this app.
 
                     <div id="tabProfile" class="tabcontent">
                         <div id="tabRoomPeerName">
-                            <div>
+                            <div id="myProfileAvatarContainer">
                                 <img id="myProfileAvatar" />
-                            </div>
+                                <div id="myProfileAvatarBtns">
-                            <div>
+                                    <button id="myProfileAvatarUploadBtn">
-                                <button id="myProfileAvatarUploadBtn">
+                                        <i class="fas fa-image"></i>&nbsp;Set avatar
-                                    <i class="fas fa-image"></i>&nbsp;Set avatar
+                                    </button>
-                                </button>
+                                    <button id="myProfileAvatarResetBtn" class="hidden">
-                                <button id="myProfileAvatarResetBtn" class="hidden">
+                                        <i class="fas fa-rotate-left"></i>&nbsp;Reset avatar
-                                    <i class="fas fa-rotate-left"></i>&nbsp;Reset avatar
+                                    </button>
-                                </button>
+                                </div>
                             </div>
                             <br />
                             <div class="title">
@@ -1079,9 +1079,9 @@ access to use this app.
                                 <p>Name</p>
                             </div>
                             <br /><br />
-                            <div>
+                            <div id="myPeerNameSetContainer">
                                 <input id="myPeerNameSet" type="text" placeholder="Change name..." maxlength="254" />
-                                <button id="myPeerNameSetBtn"><i class="fas fa-user-edit"></i>&nbsp;Change name</button>
+                                <button id="myPeerNameSetBtn"><i class="fas fa-user-edit"></i>&nbsp;Change</button>
                             </div>
                         </div>
                         <br />