feat(config): update config page buttons layout, closes #263

MetaCubeX · Sep 22, 2023 · dd0452d · dd0452d
1 parent 7ee64dd
commit dd0452d
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 15 deletions.
diff --git a/src/i18n/en.ts b/src/i18n/en.ts
@@ -88,8 +88,8 @@ export default {
   closed: 'Closed',
   sort: 'Sort',
   hideUnAvailableProxies: 'Hide UnAvailable Proxies',
-  reloadConfigFile: 'Reload Config File',
-  flushFakeIPData: 'Flush Fake-IP Data',
+  reloadConfig: 'Reload Config',
+  flushFakeIP: 'Flush Fake-IP',
   tagClientSourceIPWithName: 'Tag Client Source IP With Name',
   tag: 'Tag',
   coreConfig: 'Core Config',

diff --git a/src/i18n/zh.ts b/src/i18n/zh.ts
@@ -49,7 +49,7 @@ export default {
   favDayTheme: '浅色主题偏好',
   favNightTheme: '深色主题偏好',
   renderInTwoColumns: '双列渲染',
-  updateGEODatabases: '更新 GEO 数据库文件',
+  updateGEODatabases: '更新 GEO 数据库',
   restartCore: '重启核心',
   upgradeCore: '更新核心',
   proxiesSorting: '节点排序',
@@ -88,8 +88,8 @@ export default {
   closed: '已关闭',
   sort: '排序',
   hideUnAvailableProxies: '隐藏不可用节点',
-  reloadConfigFile: '重新加载配置文件',
-  flushFakeIPData: '清空 Fake-IP 数据',
+  reloadConfig: '重载配置',
+  flushFakeIP: '清空 Fake-IP',
   tagClientSourceIPWithName: '为客户端源 IP 地址添加名称标记',
   tag: '标记',
   coreConfig: '核心配置',

diff --git a/src/pages/Config.tsx b/src/pages/Config.tsx
@@ -217,31 +217,52 @@ const ConfigForm = () => {
         </For>
       </form>
 
-      <div class="flex flex-wrap items-center gap-2">
-        <Button loading={reloadingConfigFile()} onClick={reloadConfigFileAPI}>
-          {t('reloadConfigFile')}
-        </Button>
-
-        <Button loading={flushingFakeIPData()} onClick={flushFakeIPDataAPI}>
-          {t('flushFakeIPData')}
+      <div class="flex flex-wrap items-center justify-center gap-2">
+        <Button
+          class="btn-primary"
+          loading={reloadingConfigFile()}
+          onClick={reloadConfigFileAPI}
+        >
+          {t('reloadConfig')}
         </Button>
 
         <Button
+          class="btn-secondary"
           loading={updatingGEODatabases()}
           onClick={updateGEODatabasesAPI}
         >
           {t('updateGEODatabases')}
         </Button>
 
-        <Button loading={upgradingBackend()} onClick={upgradeBackendAPI}>
+        <Button
+          class="btn-accent"
+          loading={flushingFakeIPData()}
+          onClick={flushFakeIPDataAPI}
+        >
+          {t('flushFakeIP')}
+        </Button>
+      </div>
+
+      <div class="flex flex-wrap items-center justify-center gap-2">
+        <Button
+          class="btn-error"
+          loading={upgradingBackend()}
+          onClick={upgradeBackendAPI}
+        >
           {t('upgradeCore')}
         </Button>
 
-        <Button loading={restartingBackend()} onClick={restartBackendAPI}>
+        <Button
+          class="btn-warning"
+          loading={restartingBackend()}
+          onClick={restartBackendAPI}
+        >
           {t('restartCore')}
         </Button>
 
-        <Button onClick={onSwitchEndpointClick}>{t('switchEndpoint')}</Button>
+        <Button class="btn-info" onClick={onSwitchEndpointClick}>
+          {t('switchEndpoint')}
+        </Button>
       </div>
     </div>
   )