From 76afff2a6f5bcc2fad72955f15a216d0eebacacd Mon Sep 17 00:00:00 2001
From: Tara Rostami <132676256+TaraRostami@users.noreply.github.com>
Date: Tue, 16 Sep 2025 02:25:21 -0500
Subject: UI Improvements and Fixes (#3470)

---
 web/html/index.html                     | 6 +++---
 web/html/modals/inbound_info_modal.html | 5 +++--
 web/html/subscription.html              | 6 +++---
 3 files changed, 9 insertions(+), 8 deletions(-)

(limited to 'web/html')

diff --git a/web/html/index.html b/web/html/index.html
index 6f691876..2ff8db3e 100644
--- a/web/html/index.html
+++ b/web/html/index.html
@@ -2,7 +2,7 @@
 {{ template "page/head_end" .}}
 
 {{ template "page/body_start" .}}
-<a-layout id="app" v-cloak :class="themeSwitcher.currentTheme">
+<a-layout id="app" v-cloak :class="themeSwitcher.currentTheme + ' index-page'">
   <a-sidebar></a-sidebar>
   <a-layout id="content-layout">
     <a-layout-content>
@@ -88,7 +88,7 @@
                   </template>
                   <template #extra>
                     <template v-if="status.xray.state != 'error'">
-                      <a-badge status="processing" class="running-animation" :text="status.xray.stateMsg" :color="status.xray.color"/>
+                      <a-badge status="processing" :class="({ green: 'xray-running-animation', orange: 'xray-stop-animation' }[status.xray.color]) || 'xray-processing-animation'" :text="status.xray.stateMsg" :color="status.xray.color"/>
                     </template>
                     <template v-else>
                       <a-popover :overlay-class-name="themeSwitcher.currentTheme">
@@ -105,7 +105,7 @@
                         <template slot="content">
                           <span class="max-w-400" v-for="line in status.xray.errorMsg.split('\n')">[[ line ]]</span>
                         </template>
-                        <a-badge :text="status.xray.stateMsg" :color="status.xray.color"/>
+                        <a-badge :text="status.xray.stateMsg" :color="status.xray.color" :class="status.xray.color === 'red' ? 'xray-error-animation' : ''"/>
                       </a-popover>
                     </template>
                   </template>
diff --git a/web/html/modals/inbound_info_modal.html b/web/html/modals/inbound_info_modal.html
index 7b7b0af7..8b825ca8 100644
--- a/web/html/modals/inbound_info_modal.html
+++ b/web/html/modals/inbound_info_modal.html
@@ -102,14 +102,15 @@
       <a-tag :color="inbound.stream.security == 'none' ? 'red' : 'green'">[[ inbound.stream.security ]]</a-tag>
       <br />
       <td>Authentication</td>
-        <a-tag :color="inbound.settings.selectedAuth ? 'green' : 'red'">[[ inbound.settings.selectedAuth ? inbound.settings.selectedAuth : '' ]]</a-tag>
+        <a-tag v-if="inbound.settings.selectedAuth" color="green">[[ inbound.settings.selectedAuth ? inbound.settings.selectedAuth : '' ]]</a-tag>
+        <a-tag v-else color="red">{{ i18n "none" }}</a-tag>
       <br />
       {{ i18n "encryption" }}
         <a-tag :color="inbound.settings.encryption ? 'green' : 'red'">[[ inbound.settings.encryption ? inbound.settings.encryption : '' ]]</a-tag>
       <br />
       <template v-if="inbound.stream.security != 'none'">
         {{ i18n "domainName" }}
-        <a-tag v-if="inbound.serverName" :color="inbound.serverName ? 'green' : 'orange'">[[ inbound.serverName ? inbound.serverName : '' ]]</a-tag>
+        <a-tag v-if="inbound.serverName" color="green">[[ inbound.serverName ? inbound.serverName : '' ]]</a-tag>
         <a-tag v-else color="orange">{{ i18n "none" }}</a-tag>
       </template>
     </template>
diff --git a/web/html/subscription.html b/web/html/subscription.html
index e96a78f1..aad9ec0d 100644
--- a/web/html/subscription.html
+++ b/web/html/subscription.html
@@ -9,7 +9,7 @@
 {{ template "page/head_end" .}}
 
 {{ template "page/body_start" .}}
-<a-layout id="app" v-cloak :class="themeSwitcher.currentTheme">
+<a-layout id="app" v-cloak :class="themeSwitcher.currentTheme + ' subscription-page'">
     <a-layout-content class="p-2">
         <a-row type="flex" justify="center" class="mt-2">
             <a-col :xs="24" :sm="22" :md="18" :lg="14" :xl="12">
@@ -200,7 +200,7 @@
                                     style="text-align:center;">
                                     <!-- Android dropdown -->
                                     <a-dropdown :trigger="['click']">
-                                        <a-button :block="isMobile"
+                                        <a-button icon="android" :block="isMobile"
                                             :style="{ marginTop: isMobile ? '6px' : 0 }"
                                             size="large" type="primary">
                                             Android <a-icon type="down" />
@@ -225,7 +225,7 @@
                                     style="text-align:center;">
                                     <!-- iOS dropdown -->
                                     <a-dropdown :trigger="['click']">
-                                        <a-button :block="isMobile"
+                                        <a-button icon="apple" :block="isMobile"
                                             :style="{ marginTop: isMobile ? '6px' : 0 }"
                                             size="large" type="primary">
                                             iOS <a-icon type="down" />
-- 
cgit v1.2.3