From e06ee2671150d189aa474e434ad5ed199ce4c48b Mon Sep 17 00:00:00 2001
From: Shahin <115543613+shahin-io@users.noreply.github.com>
Date: Tue, 27 Feb 2024 08:03:45 +0000
Subject: [PATCH] [ui] improve index code

---
 web/html/xui/index.html | 17 ++++++++---------
 web/service/server.go   |  6 +++---
 2 files changed, 11 insertions(+), 12 deletions(-)

diff --git a/web/html/xui/index.html b/web/html/xui/index.html
index 90c45b85..c64c9462 100644
--- a/web/html/xui/index.html
+++ b/web/html/xui/index.html
@@ -104,15 +104,14 @@
                     <a-col :sm="24" :lg="12">
                         <a-card hoverable>
                             <b>{{ i18n "pages.index.operationHours" }}:</b>
-                            <a-tag color="green">Xray [[ formatSecond(status.appStats.uptime) ]]</a-tag>
-                            <a-tag color="green">OS [[ formatSecond(status.uptime) ]]</a-tag>
+                            <a-tag :color="status.xray.color">Xray: [[ formatSecond(status.appStats.uptime) ]]</a-tag>
+                            <a-tag color="green">OS: [[ formatSecond(status.uptime) ]]</a-tag>
                         </a-card>
                     </a-col>
                     <a-col :sm="24" :lg="12">
                         <a-card hoverable>
                             <b>{{ i18n "pages.index.xrayStatus" }}:</b>
-                            <a-tag style="text-transform: capitalize;" :color="status.xray.color">[[ status.xray.state ]]
-                            </a-tag>
+                            <a-tag :color="status.xray.color">[[ status.xray.state ]]</a-tag>
                             <a-popover v-if="status.xray.state === State.Error"
                                 :overlay-class-name="themeSwitcher.currentTheme">
                                 <span slot="title" style="font-size: 12pt">An error occurred while running Xray
@@ -153,10 +152,10 @@
                         <a-card hoverable>
                             <b>{{ i18n "usage"}}:</b>
                             <a-tag color="green">
-                            RAM [[ sizeFormat(status.appStats.mem) ]]
+                            RAM: [[ sizeFormat(status.appStats.mem) ]]
                             </a-tag>
                             <a-tag color="green">
-                                Threads [[ status.appStats.threads ]]
+                                Threads: [[ status.appStats.threads ]]
                             </a-tag>
                         </a-card>
                     </a-col>
@@ -357,9 +356,9 @@
 <script>
 
     const State = {
-        Running: "running",
-        Stop: "stop",
-        Error: "error",
+        Running: "Running",
+        Stop: "Stop",
+        Error: "Error",
     }
     Object.freeze(State);
 
diff --git a/web/service/server.go b/web/service/server.go
index 822918a8..da4282d4 100644
--- a/web/service/server.go
+++ b/web/service/server.go
@@ -34,9 +34,9 @@ import (
 type ProcessState string
 
 const (
-	Running ProcessState = "running"
-	Stop    ProcessState = "stop"
-	Error   ProcessState = "error"
+	Running ProcessState = "Running"
+	Stop    ProcessState = "Stop"
+	Error   ProcessState = "Error"
 )
 
 type Status struct {