DESIGN REFACTOR (#600)

### New features
- New face + dark mode
  - [Change font to vazirmatn](057f3190de)
  - [use customized andtv](f956009fd2)
  - [popConfirm for del and reset client](66c98e8392)
  - [Separate page for xray config](9e1cd6315f)
  - Separate face for mobile view
- [Show online users](bf892e9965) [#559](https://github.com/alireza0/x-ui/issues/559)
- [Auto renew](96408967ae)

### Bug fixes
- [[tgbot] Retry loop on start](211c05ec29)
- [fix docker-compose version](1dcec91ce4)
- [fix redirect after restart](81d25a032c)

web/assets/js/util/common.js

@@ -33,13 +33,15 @@ function safeBase64(str) {
 
 function formatSecond(second) {
     if (second < 60) {
-        return second.toFixed(0) + ' s';
+        return second.toFixed(0) + 's';
     } else if (second < 3600) {
-        return (second / 60).toFixed(0) + ' m';
+        return (second / 60).toFixed(0) + 'm';
     } else if (second < 3600 * 24) {
-        return (second / 3600).toFixed(0) + ' h';
+        return (second / 3600).toFixed(0) + 'h';
     } else {
-        return (second / 3600 / 24).toFixed(0) + ' d';
+        day = Math.floor(second / 3600 / 24);
+        remain = ((second/3600) - (day*24)).toFixed(0);
+        return day + 'd' + (remain > 0 ? ' ' + remain + 'h' : '');
     }
 }
 
@@ -53,7 +55,7 @@ function addZero(num) {
 
 function toFixed(num, n) {
     n = Math.pow(10, n);
-    return Math.round(num * n) / n;
+    return Math.floor(num * n) / n;
 }
 
 function debounce(fn, delay) {
@@ -94,11 +96,13 @@ function setCookie(cname, cvalue, exdays) {
 function usageColor(data, threshold, total) {
     switch (true) {
         case data === null:
+            return "green";
+        case total < 0:
             return "blue";
-        case total <= 0:
-            return "blue";
+        case total == 0:
+            return "purple";
         case data < total - threshold:
-            return "cyan";
+            return "blue";
         case data < total:
             return "orange";
         default:
@@ -106,6 +110,28 @@ function usageColor(data, threshold, total) {
     }
 }
 
+function userExpiryColor(threshold, client, isDark = false) {
+    if (!client.enable) {
+        return isDark ? '#2c3950' : '#bcbcbc';
+    }
+    now = new Date().getTime(),
+    expiry = client.expiryTime;
+    switch (true) {
+        case expiry === null:
+            return "#389e0d";
+        case expiry < 0:
+            return "#0e49b5";
+        case expiry == 0:
+            return "#7a316f";
+        case now < expiry - threshold:
+            return "#0e49b5";
+        case now < expiry:
+            return "#ffa031";
+        default:
+            return "#e04141";
+    }
+}
+
 function doAllItemsExist(array1, array2) {
     for (let i = 0; i < array1.length; i++) {
         if (!array2.includes(array1[i])) {