missing translations, updates logos, styling fixes, show contact details on avatar in chat

Author: jakapozun

Spixi/Resources/Raw/html/contact_details.html

@@ -16,7 +16,6 @@
     <link rel="stylesheet" type="text/css" href="libs/fontawesome/css/fontawesome.min.css">
     <link rel="stylesheet" type="text/css" href="libs/fontawesome/css/solid.min.css">
 
-
     <script src="js/jquery.min.js"></script>
     <script src="js/jquery.touchSwipe.min.js"></script>
     <script src="js/bootstrap.min.js"></script>
@@ -34,7 +33,7 @@
             <div class="spixi-contact-details-header-user">
                 <img id="avatar" src="img/spixiavatar.png" alt="avatar" class="spixi-contact-details-avatar"/>
                 <div class="spixi-contact-details-username" id="username-view-container">
-                    <div class="label-lg s-text-inverse" id="nickname"></div>
+                    <div class="label-lg s-text-inverse" id="nickname">testtesttesttesttetesttestteststtesttesttesttesttesttesttesttesttesttesttesttesttest</div>
                     <i class="fas fa-pen" onclick="showEditUsername()"></i>
                 </div>
                 <div class="spixi-contact-details-username-edit" style="display: none;" id="username-edit-container">
@@ -97,7 +96,7 @@
                 </div>
             </div>
             <div class="spixi-contact-details-body-address-container">
-                <div id="toastbar" class="spixi-toastbar"><i class="fa fa-paste"></i>*SL{address-copied}</div>
+                <div id="toastbar" class="spixi-toastbar"><i class="fa fa-paste"></i> *SL{address-copied}</div>
                 <span class="label-sm s-text-02">*SL{contact-details-account-address}</span>
                 <div style="margin: 0" class="address_qr" id="qrcode"></div>
                 <div class="payment-data-hash-copy">

Spixi/Resources/Raw/html/css/spixiui-dark.css

@@ -1821,6 +1821,11 @@ img.emoji {
     cursor: pointer;
 }
 
+#menu_nickname,
+#user-address {
+    color: var(--colors-text-01);
+}
+
 .spixi-sidebar-avatar {
     max-width: 64px;
     max-height: 64px;
@@ -5071,7 +5076,7 @@ img.emoji {
 }
 
 .options {
-    background: radial-gradient(54.59% 54.59% at 50% 45.41%, #182735 0%, #0B1013 80.77%);
+    background: var(--colors-surface-01);
     position: absolute;
     top: 100%;
     left: 0;

Spixi/Resources/Raw/html/css/spixiui-light.css

@@ -1810,6 +1810,11 @@ img.emoji {
     cursor: pointer;
 }
 
+#menu_nickname,
+#user-address{
+    color: var(--colors-text-inverse);
+}
+
 .spixi-sidebar-avatar {
     max-width: 64px;
     max-height: 64px;
@@ -4817,11 +4822,14 @@ img.emoji {
 }
 
 .spixi-contact-details-header-user {
+    width: 100%;
+    max-width: 556px;
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 16px;
     position: relative;
+    overflow: hidden;
 }
 
 .spixi-contact-details-username {
@@ -4836,10 +4844,18 @@ img.emoji {
     }
 }
 
+.spixi-contact-details-username #nickname{
+    max-width: 280px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
 .spixi-contact-details-header-actions {
     display: flex;
     gap: 68px;
     width: 100%;
+    max-width: 556px;
     flex-wrap: wrap;
     justify-content: center;;
 }

Spixi/Resources/Raw/html/img/dark/spixi-logo-full.svg

@@ -421,10 +421,10 @@
             <div class="spixi-sidebar-header-user-details">
                 <img id="avatar_image" class="spixi-sidebar-avatar" src="img/spixiavatar.png" alt="user-avatar"/>
                 <div class="spixi-sidebar-header-user-details-text">
-                    <span id="menu_nickname" class="label-lg s-text-inverse">*SL{index-side-title}</span>
+                    <span id="menu_nickname" class="label-lg">*SL{index-side-title}</span>
                     <div class="masked-user-address" onclick="onMaskWalletAddressHandler()">
                         <img src="img/ixi-icon.svg" alt="ixi-icon" width="20" height="20"/>
-                        <span id="user-address" class="label-xs s-text-inverse"></span>
+                        <span id="user-address" class="label-xs"></span>
                     </div>
                 </div>
             </div>

Spixi/Resources/Raw/html/img/spixi-logo-full.svg

@@ -363,9 +363,7 @@ <h4>16. Entire Agreement</h4>
         if (!selectedLang) {
             return;
         }
-
         changeLanguage(selectedLang)
-
     }
 
     function showOnboardingSection() {

Spixi/Resources/Raw/html/index.html

@@ -670,12 +670,16 @@ function addText(id, address, nick, avatar, text, time, className) {
         }
         var avatarHtml = avatarEl.outerHTML;
         avatarEl.onclick = function (e) {
-            if (nick == "") {
-                address = userAddress;
-                nick = userNick;
+            if(!isBot){
+                showBotDetails()
+            } else{
+                if (nick == "") {
+                    address = userAddress;
+                    nick = userNick;
+                }
+                showUserDetails(avatarHtml + " " + nick, address);
+                e.preventDefault;
             }
-            showUserDetails(avatarHtml + " " + nick, address);
-            e.preventDefault;
         };
 
         bubbleEl.appendChild(avatarEl);

Spixi/Resources/Raw/html/intro.html

@@ -376,7 +376,7 @@ function limitToTwoDecimals(inputAsString) {
 }
 
 function checkThemePath(path) {
-    const theme = localStorage.getItem('theme');
+    const theme = localStorage.getItem('theme') || 'light';
     if (theme === 'dark') {
         return path.replace('img/', 'img/dark/');
     }