From bcce79f9cc0f49d9d4286c02480fe80c86590321 Mon Sep 17 00:00:00 2001
From: MaxKey <shimingxy@qq.com>
Date: Sun, 24 Apr 2022 19:10:53 +0800
Subject: [PATCH] change theme

---
 .../src/app/layout/basic/basic.component.ts   | 11 +++--
 .../layout/basic/widgets/user.component.ts    |  6 +++
 .../alert-center/alert-center.component.html  | 17 +++----
 .../alert-notice/alert-notice.component.html  | 22 ++++++---
 .../alert-setting.component.html              | 14 +++---
 .../monitor-list/monitor-list.component.html  | 37 ++++++++-------
 web-app/src/assets/i18n/zh-CN.json            |  2 +-
 web-app/src/assets/i18n/zh-TW.json            |  2 +-
 web-app/src/styles/theme.less                 | 46 +++++++++++++++++--
 9 files changed, 104 insertions(+), 53 deletions(-)

diff --git a/web-app/src/app/layout/basic/basic.component.ts b/web-app/src/app/layout/basic/basic.component.ts
index f0f6281..75ee547 100644
--- a/web-app/src/app/layout/basic/basic.component.ts
+++ b/web-app/src/app/layout/basic/basic.component.ts
@@ -17,11 +17,7 @@ import { environment } from '@env/environment';
           <i nz-icon nzIconfont="icon-gitee"></i>
         </a>
       </layout-default-header-item>
-      <layout-default-header-item direction="left" hidden="mobile">
-        <a layout-default-header-item-trigger routerLink="/passport/lock">
-          <i nz-icon nzType="lock"></i>
-        </a>
-      </layout-default-header-item>
+      
       <layout-default-header-item direction="left" hidden="pc">
         <div layout-default-header-item-trigger (click)="searchToggleStatus = !searchToggleStatus">
           <i nz-icon nzType="search"></i>
@@ -33,6 +29,11 @@ import { environment } from '@env/environment';
       <layout-default-header-item direction="right" hidden="mobile">
         <header-notify></header-notify>
       </layout-default-header-item>
+      <layout-default-header-item direction="right" hidden="mobile">
+        <a layout-default-header-item-trigger routerLink="/passport/lock">
+          <i nz-icon nzType="lock"></i>
+        </a>
+      </layout-default-header-item>
       <layout-default-header-item direction="right" hidden="mobile">
         <div layout-default-header-item-trigger nz-dropdown [nzDropdownMenu]="settingsMenu" nzTrigger="click" nzPlacement="bottomRight">
           <i nz-icon nzType="setting"></i>
diff --git a/web-app/src/app/layout/basic/widgets/user.component.ts b/web-app/src/app/layout/basic/widgets/user.component.ts
index f710b71..e8c1e86 100644
--- a/web-app/src/app/layout/basic/widgets/user.component.ts
+++ b/web-app/src/app/layout/basic/widgets/user.component.ts
@@ -7,6 +7,11 @@ import { LocalStorageService } from '../../../service/local-storage.service';
 @Component({
   selector: 'header-user',
   template: `
+   <div class="alain-default__nav-item d-flex align-items-center px-sm"   (click)="logout()">
+      <i nz-icon nzType="logout" class="mr-sm"></i>
+      {{ 'menu.account.logout' | i18n }}
+    </div>
+    <!--
     <div class="alain-default__nav-item d-flex align-items-center px-sm" nz-dropdown nzPlacement="bottomRight" [nzDropdownMenu]="userMenu">
       <nz-avatar [nzSrc]="user.avatar" nzSize="small" class="mr-sm"></nz-avatar>
       {{ user.name }}
@@ -20,6 +25,7 @@ import { LocalStorageService } from '../../../service/local-storage.service';
         </div>
       </div>
     </nz-dropdown-menu>
+-->
   `,
   changeDetection: ChangeDetectionStrategy.OnPush
 })
diff --git a/web-app/src/app/routes/alert/alert-center/alert-center.component.html b/web-app/src/app/routes/alert/alert-center/alert-center.component.html
index 9d6877f..5090aec 100644
--- a/web-app/src/app/routes/alert/alert-center/alert-center.component.html
+++ b/web-app/src/app/routes/alert/alert-center/alert-center.component.html
@@ -14,10 +14,10 @@
 <nz-divider></nz-divider>
 
 <div>
-  <button nz-button nzType="primary" (click)="onDeleteAlerts()">
-    <i nz-icon nzType="delete" nzTheme="outline"></i>
-    {{ 'alert.center.delete' | i18n }}
+  <button nz-button nzType="primary" (click)="sync()" nz-tooltip [nzTooltipTitle]="'common.refresh' | i18n">
+    <i nz-icon nzType="sync" nzTheme="outline"></i>
   </button>
+  
   <button nz-button nzType="primary" (click)="onMarkReadAlerts()">
     <i nz-icon nzType="down-circle" nzTheme="outline"></i>
     {{ 'alert.center.deal' | i18n }}
@@ -26,8 +26,9 @@
     <i nz-icon nzType="up-circle" nzTheme="outline"></i>
     {{ 'alert.center.no-deal' | i18n }}
   </button>
-  <button nz-button nzType="primary" (click)="sync()" nz-tooltip [nzTooltipTitle]="'common.refresh' | i18n">
-    <i nz-icon nzType="sync" nzTheme="outline"></i>
+  <button nz-button nzType="primary" nzDanger (click)="onDeleteAlerts()">
+    <i nz-icon nzType="delete" nzTheme="outline"></i>
+    {{ 'alert.center.delete' | i18n }}
   </button>
 
   <button style="margin-right: 25px; float: right" nz-button nzType="primary" (click)="loadAlertsTable()">
@@ -122,9 +123,6 @@
       </td>
       <td nzAlign="center">{{ data.gmtCreate | date: 'YYYY-MM-dd HH:mm:ss' }}</td>
       <td nzAlign="center">
-        <button nz-button nzType="primary" (click)="onDeleteOneAlert(data.id)" nz-tooltip [nzTooltipTitle]="'alert.center.delete' | i18n">
-          <i nz-icon nzType="delete" nzTheme="outline"></i>
-        </button>
         <button nz-button nzType="primary" (click)="onMarkReadOneAlert(data.id)" nz-tooltip [nzTooltipTitle]="'alert.center.deal' | i18n">
           <i nz-icon nzType="down-circle" nzTheme="outline"></i>
         </button>
@@ -137,6 +135,9 @@
         >
           <i nz-icon nzType="up-circle" nzTheme="outline"></i>
         </button>
+        <button nz-button nzType="primary" nzDanger (click)="onDeleteOneAlert(data.id)" nz-tooltip [nzTooltipTitle]="'alert.center.delete' | i18n">
+          <i nz-icon nzType="delete" nzTheme="outline"></i>
+        </button>
       </td>
     </tr>
   </tbody>
diff --git a/web-app/src/app/routes/alert/alert-notice/alert-notice.component.html b/web-app/src/app/routes/alert/alert-notice/alert-notice.component.html
index b62ec62..ee12d68 100644
--- a/web-app/src/app/routes/alert/alert-notice/alert-notice.component.html
+++ b/web-app/src/app/routes/alert/alert-notice/alert-notice.component.html
@@ -19,13 +19,16 @@
 
 <nz-tabset nzSize="large">
   <nz-tab [nzTitle]="'alert.notice.receiver' | i18n">
+    <button nz-button nzType="primary" (click)="syncReceiver()">
+      <i nz-icon nzType="sync" nzTheme="outline"></i>
+      {{ 'common.refresh' | i18n }}
+    </button>
+
     <button nz-button nzType="primary" (click)="onNewNoticeReceiver()">
       <i nz-icon nzType="appstore-add" nzTheme="outline"></i>
       {{ 'alert.notice.receiver.new' | i18n }}
     </button>
-    <button nz-button nzType="primary" (click)="syncReceiver()" nz-tooltip [nzTooltipTitle]="'common.refresh' | i18n">
-      <i nz-icon nzType="sync" nzTheme="outline"></i>
-    </button>
+    
     <nz-table
       #fixedTable
       [nzData]="receivers"
@@ -100,6 +103,7 @@
             <button
               nz-button
               nzType="primary"
+              nzDanger
               (click)="onDeleteOneNoticeReceiver(data.id)"
               nz-tooltip
               [nzTooltipTitle]="'alert.notice.receiver.delete' | i18n"
@@ -112,13 +116,16 @@
     </nz-table>
   </nz-tab>
   <nz-tab [nzTitle]="'alert.notice.rule' | i18n">
-    <button nz-button nzType="primary" (click)="onNewNoticeRule()">
+    <button nz-button nzType="primary" (click)="syncRule()" >
+      <i nz-icon nzType="sync" nzTheme="outline"></i>
+      {{ 'common.refresh' | i18n }}
+    </button>
+
+    <button nz-button nzType="primary" (click)="onNewNoticeRule()" >
       <i nz-icon nzType="appstore-add" nzTheme="outline"></i>
       {{ 'alert.notice.rule.new' | i18n }}
     </button>
-    <button nz-button nzType="primary" (click)="syncRule()" nz-tooltip [nzTooltipTitle]="'common.refresh' | i18n">
-      <i nz-icon nzType="sync" nzTheme="outline"></i>
-    </button>
+    
     <nz-table
       #ruleFixedTable
       [nzData]="rules"
@@ -174,6 +181,7 @@
             <button
               nz-button
               nzType="primary"
+              nzDanger
               (click)="onDeleteOneNoticeRule(data.id)"
               nz-tooltip
               [nzTooltipTitle]="'alert.notice.rule.delete' | i18n"
diff --git a/web-app/src/app/routes/alert/alert-setting/alert-setting.component.html b/web-app/src/app/routes/alert/alert-setting/alert-setting.component.html
index 738bbd2..2a790a6 100644
--- a/web-app/src/app/routes/alert/alert-setting/alert-setting.component.html
+++ b/web-app/src/app/routes/alert/alert-setting/alert-setting.component.html
@@ -17,21 +17,18 @@
 </nz-breadcrumb>
 <nz-divider></nz-divider>
 
+<button nz-button nzType="primary" (click)="sync()" nz-tooltip [nzTooltipTitle]="'common.refresh' | i18n">
+  <i nz-icon nzType="sync" nzTheme="outline"></i>
+</button>
 <button nz-button nzType="primary" (click)="onNewAlertDefine()">
   <i nz-icon nzType="appstore-add" nzTheme="outline"></i>
   {{ 'alert.setting.new' | i18n }}
 </button>
-<button nz-button nzType="primary" (click)="onEditAlertDefine()">
-  <i nz-icon nzType="edit" nzTheme="outline"></i>
-  {{ 'common.button.edit' | i18n }}
-</button>
-<button nz-button nzType="primary" (click)="onDeleteAlertDefines()">
+<button nz-button nzType="primary" nzDanger (click)="onDeleteAlertDefines()">
   <i nz-icon nzType="delete" nzTheme="outline"></i>
   {{ 'common.button.delete' | i18n }}
 </button>
-<button nz-button nzType="primary" (click)="sync()" nz-tooltip [nzTooltipTitle]="'common.refresh' | i18n">
-  <i nz-icon nzType="sync" nzTheme="outline"></i>
-</button>
+
 
 <nz-table
   #fixedTable
@@ -116,6 +113,7 @@
         </button>
         <button
           nz-button
+          nzDanger
           nzType="primary"
           (click)="onDeleteOneAlertDefine(data.id)"
           nz-tooltip
diff --git a/web-app/src/app/routes/monitor/monitor-list/monitor-list.component.html b/web-app/src/app/routes/monitor/monitor-list/monitor-list.component.html
index 56506d0..f1aeb23 100644
--- a/web-app/src/app/routes/monitor/monitor-list/monitor-list.component.html
+++ b/web-app/src/app/routes/monitor/monitor-list/monitor-list.component.html
@@ -14,20 +14,17 @@
 <nz-divider></nz-divider>
 
 <div>
+  <button nz-button nzType="primary" (click)="sync()" nz-tooltip [nzTooltipTitle]="'common.refresh' | i18n">
+    <i nz-icon nzType="sync" nzTheme="outline"></i>
+  </button>
   <button nz-button nzType="primary">
     <a routerLink="/monitors/new" [queryParams]="{ app: app }">
       <i nz-icon nzType="appstore-add" nzTheme="outline"></i>
       {{ 'monitors.new' | i18n }} {{ 'monitor.app.' + app | i18n }}
     </a>
   </button>
-  <button nz-button nzType="primary" (click)="onEditMonitor()">
-    <i nz-icon nzType="edit" nzTheme="outline"></i>
-    {{ 'monitors.edit' | i18n }}
-  </button>
-  <button nz-button nzType="primary" (click)="onDeleteMonitors()">
-    <i nz-icon nzType="delete" nzTheme="outline"></i>
-    {{ 'monitors.delete' | i18n }}
-  </button>
+
+  
   <button nz-button nzType="primary" (click)="onEnableManageMonitors()">
     <i nz-icon nzType="up-circle" nzTheme="outline"></i>
     {{ 'monitors.enable' | i18n }}
@@ -36,8 +33,9 @@
     <i nz-icon nzType="down-circle" nzTheme="outline"></i>
     {{ 'monitors.cancel' | i18n }}
   </button>
-  <button nz-button nzType="primary" (click)="sync()" nz-tooltip [nzTooltipTitle]="'common.refresh' | i18n">
-    <i nz-icon nzType="sync" nzTheme="outline"></i>
+  <button nz-button nzType="primary" nzDanger (click)="onDeleteMonitors()">
+    <i nz-icon nzType="delete" nzTheme="outline"></i>
+    {{ 'monitors.delete' | i18n }}
   </button>
 
   <button style="margin-right: 25px; float: right" nz-button nzType="primary" (click)="onFilterSearchMonitors()">
@@ -130,15 +128,6 @@
         <button nz-button nzType="primary" (click)="onEditOneMonitor(data.id)" nz-tooltip [nzTooltipTitle]="'monitors.edit-monitor' | i18n">
           <i nz-icon nzType="edit" nzTheme="outline"></i>
         </button>
-        <button
-          nz-button
-          nzType="primary"
-          (click)="onDeleteOneMonitor(data.id)"
-          nz-tooltip
-          [nzTooltipTitle]="'monitors.delete-monitor' | i18n"
-        >
-          <i nz-icon nzType="delete" nzTheme="outline"></i>
-        </button>
         <button
           nz-button
           nzType="primary"
@@ -157,6 +146,16 @@
         >
           <i nz-icon nzType="down-circle" nzTheme="outline"></i>
         </button>
+        <button
+          nz-button
+          nzDanger
+          nzType="primary"
+          (click)="onDeleteOneMonitor(data.id)"
+          nz-tooltip
+          [nzTooltipTitle]="'monitors.delete-monitor' | i18n"
+        >
+          <i nz-icon nzType="delete" nzTheme="outline"></i>
+        </button>
       </td>
     </tr>
   </tbody>
diff --git a/web-app/src/assets/i18n/zh-CN.json b/web-app/src/assets/i18n/zh-CN.json
index 3abef96..cdfb6aa 100644
--- a/web-app/src/assets/i18n/zh-CN.json
+++ b/web-app/src/assets/i18n/zh-CN.json
@@ -22,7 +22,7 @@
       "security": "安全设置",
       "binding": "账号绑定",
       "trigger": "触发错误",
-      "logout": "退出登录"
+      "logout": "退出"
     },
     "alert": {
       "": "告警",
diff --git a/web-app/src/assets/i18n/zh-TW.json b/web-app/src/assets/i18n/zh-TW.json
index 9140eb4..19489b3 100644
--- a/web-app/src/assets/i18n/zh-TW.json
+++ b/web-app/src/assets/i18n/zh-TW.json
@@ -22,7 +22,7 @@
       "security": "安全設置",
       "binding": "賬號綁定",
       "trigger": "觸發錯誤",
-      "logout": "退出登錄"
+      "logout": "退出"
     },
     "alert": {
       "": "告警",
diff --git a/web-app/src/styles/theme.less b/web-app/src/styles/theme.less
index e5e921c..55512da 100644
--- a/web-app/src/styles/theme.less
+++ b/web-app/src/styles/theme.less
@@ -7,12 +7,50 @@
 // ==========The following is the custom theme variable area==========
 // The theme parameters can be generated at https://ng-alain.github.io/ng-alain/
 // @primary-color: #f50;
-@primary-color: #722ED1;
+@primary-color: #3f51b5;
 @font-size-base: 12px;
 @nz-table-rep-padding-vertical: 2px;
 @nz-table-rep-padding-horizontal: 2px;
 @alain-default-header-hg: 52px;
-@alain-default-header-bg: #722ED1;
+@alain-default-header-bg: #3f51b5;
 @alain-default-header-padding: 8px;
-@alain-default-aside-nav-text-hover-color: #722ED1;
-@alain-default-aside-nav-selected-text-color: #722ED1;
+@alain-default-aside-nav-text-hover-color: #3f51b5;
+@alain-default-aside-nav-selected-text-color: #3f51b5;
+.ant-switch-checked{
+    background-color: #ff4081;
+}
+
+.ant-radio-group-solid .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled) {
+    color: #fff;
+    background: #ff4081;
+    border-color: #ff4081;
+}
+
+.ant-radio-wrapper:hover .ant-radio,
+.ant-radio:hover .ant-radio-inner,
+.ant-radio-input:focus + .ant-radio-inner {
+  border-color: #ff4081;
+  background: #ff4081;
+}
+
+
+
+.sidebar-nav .sidebar-nav__selected{
+  background: rgba(63,81,181,.15);
+  color: #3f51b5;
+}
+.sidebar-nav__sub .sidebar-nav__item{
+  color: #000000a6;
+}
+
+.sidebar-nav__open > .sidebar-nav__sub {
+  background-color: #fafafa;
+}
+.sidebar-nav__sub .sidebar-nav__item:hover{
+  background: rgba(0,0,0,.04);
+}
+
+.ant-btn-dangerous.ant-btn-primary {
+  border-color: #ff4081;
+  background: #ff4081;
+}