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/html/common/head.html

@@ -13,6 +13,20 @@
         [v-cloak] {
             display: none;
         }
+        /* vazirmatn-regular - arabic_latin_latin-ext */
+        @font-face {
+            font-display: swap;
+            font-family: 'Vazirmatn';
+            font-style: normal;
+            font-weight: 400;
+            src: url('{{ .base_path }}assets/Vazirmatn-UI-NL-Regular.woff2') format('woff2');
+            unicode-range: U+0600-06FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE80-FEFC, U+0030-0039;
+        }
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Vazirmatn', 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB',
+                         'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif, 'Apple Color Emoji',
+                         'Segoe UI Emoji', 'Segoe UI Symbol';
+        }
     </style>
     <title>{{ .host }}-{{ i18n .title}}</title>
 </head>

web/html/common/prompt_modal.html

@@ -1,8 +1,7 @@
 {{define "promptModal"}}
 <a-modal id="prompt-modal" v-model="promptModal.visible" :title="promptModal.title"
          :closable="true" @ok="promptModal.ok" :mask-closable="false"
-         :class="themeSwitcher.darkCardClass"
-         :ok-text="promptModal.okText" cancel-text='{{ i18n "cancel" }}'>
+         :ok-text="promptModal.okText" cancel-text='{{ i18n "cancel" }}' :class="themeSwitcher.currentTheme">
     <a-input id="prompt-modal-input" :type="promptModal.type"
              v-model="promptModal.value"
              :autosize="{minRows: 10, maxRows: 20}"

web/html/common/qrcode_modal.html

@@ -1,9 +1,8 @@
 {{define "qrcodeModal"}}
 <a-modal id="qrcode-modal" v-model="qrModal.visible" :title="qrModal.title"
          :closable="true"
-         :class="themeSwitcher.darkCardClass"
          :footer="null"
-         width="300px">
+         width="300px" :class="themeSwitcher.currentTheme">
     <a-tag color="green" style="margin-bottom: 10px;display: block;text-align: center;" >{{ i18n "pages.inbounds.clickOnQRcode" }}</a-tag>
     <template v-if="app.subSettings.enable && qrModal.subId">
         <a-divider>Subscription</a-divider>
@@ -11,7 +10,7 @@
     </template>
     <a-divider>{{ i18n "pages.inbounds.client" }}</a-divider>
     <template v-for="(row, index) in qrModal.qrcodes">
-        <a-tag color="orange" style="margin-top: 10px;display: block;text-align: center;">[[ row.remark ]]</a-tag>
+        <a-tag color="blue" style="margin: 10px 0; display: block; text-align: center;">[[ row.remark ]]</a-tag>
         <canvas @click="copyToClipboard('qrCode-'+index, row.link)" :id="'qrCode-'+index" style="width: 100%; height: 100%;"></canvas>
     </template>
 </a-modal>

web/html/common/text_modal.html

@@ -1,8 +1,7 @@
 {{define "textModal"}}
 <a-modal id="text-modal" v-model="txtModal.visible" :title="txtModal.title"
          :closable="true" ok-text='{{ i18n "copy" }}' cancel-text='{{ i18n "close" }}'
-         :class="themeSwitcher.darkCardClass"
-         :ok-button-props="{attrs:{id:'txt-modal-ok-btn'}}">
+         :ok-button-props="{attrs:{id:'txt-modal-ok-btn'}}" :class="themeSwitcher.currentTheme">
     <a-button v-if="!ObjectUtil.isEmpty(txtModal.fileName)" type="primary" style="margin-bottom: 10px;"
               :href="'data:application/text;charset=utf-8,' + encodeURIComponent(txtModal.content)"
               :download="txtModal.fileName">