[improve] update login page and status page color (apache#1977)

Co-authored-by: tomsun28 <[email protected]>

Author: lwjxy

web-app/src/app/routes/status-public/status-public.component.html

@@ -194,19 +194,18 @@
             </nz-list>
           </div>
           <ng-template #incidentHeader>
-            <div style="width: 100%; border: 1px dotted gray; border-radius: 3px">
+            <div
+              style="width: 100%; border: 2px solid gray; border-radius: 3px"
+              [ngStyle]="{ borderColor: getStatusBorderColor(incident.state) }"
+            >
               <div style="margin: 10px; display: flex; justify-content: space-between">
                 <div style="font-weight: bold; font-size: large">
-                  <span *ngIf="incident.state == 0" style="color: #ff2f2f">{{ incident.name }}</span>
-                  <span *ngIf="incident.state == 1" style="color: #e56c23">{{ incident.name }}</span>
-                  <span *ngIf="incident.state == 2" style="color: #19a7e7">{{ incident.name }}</span>
-                  <span *ngIf="incident.state == 3" style="color: #34be8f">{{ incident.name }}</span>
+                  <span>{{ incident.name }}</span>
                 </div>
                 <div style="font-weight: bold">
-                  <span *ngIf="incident.state == 0" style="color: #ff2f2f">{{ 'status.incident.state.' + incident.state | i18n }}</span>
-                  <span *ngIf="incident.state == 1" style="color: #e56c23">{{ 'status.incident.state.' + incident.state | i18n }}</span>
-                  <span *ngIf="incident.state == 2" style="color: #19a7e7">{{ 'status.incident.state.' + incident.state | i18n }}</span>
-                  <span *ngIf="incident.state == 3" style="color: #34be8f">{{ 'status.incident.state.' + incident.state | i18n }}</span>
+                  <span [ngStyle]="{ color: getStatusBorderColor(incident.state) }">{{
+                    'status.incident.state.' + incident.state | i18n
+                  }}</span>
                 </div>
               </div>
               <div style="margin-left: 10px; margin-top: 10px; margin-bottom: 10px; display: flex; font-size: medium">

web-app/src/app/routes/status-public/status-public.component.ts

@@ -164,5 +164,17 @@ export class StatusPublicComponent implements OnInit {
     return processTime;
   }
 
+  getStatusBorderColor(status: number): string {
+    if (status === 0) {
+      return '#ff2f2f';
+    } else if (status === 1) {
+      return '#e56c23';
+    } else if (status === 2) {
+      return '#19a7e7';
+    } else {
+      return '#34be8f';
+    }
+  }
+
   protected readonly Array = Array;
 }

web-app/src/index.html

@@ -6,7 +6,7 @@
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
-  <style type="text/css">.preloader{position:fixed;top:0;left:0;width:100%;height:100%;overflow:hidden;background:#49a9ee;z-index:9999;transition:opacity .65s}.preloader-hidden-add{opacity:1;display:block}.preloader-hidden-add-active{opacity:0}.preloader-hidden{display:none}.cs-loader{position:absolute;top:0;left:0;height:100%;width:100%}.cs-loader-inner{transform:translateY(-50%);top:50%;position:absolute;width:100%;color:#fff;text-align:center}.cs-loader-inner label{font-size:20px;opacity:0;display:inline-block}@keyframes lol{0%{opacity:0;transform:translateX(-300px)}33%{opacity:1;transform:translateX(0)}66%{opacity:1;transform:translateX(0)}100%{opacity:0;transform:translateX(300px)}}.cs-loader-inner label:nth-child(6){animation:lol 3s infinite ease-in-out}.cs-loader-inner label:nth-child(5){animation:lol 3s .1s infinite ease-in-out}.cs-loader-inner label:nth-child(4){animation:lol 3s .2s infinite ease-in-out}.cs-loader-inner label:nth-child(3){animation:lol 3s .3s infinite ease-in-out}.cs-loader-inner label:nth-child(2){animation:lol 3s .4s infinite ease-in-out}.cs-loader-inner label:nth-child(1){animation:lol 3s .5s infinite ease-in-out}</style>
+  <style type="text/css">.preloader{position:fixed;top:0;left:0;width:100%;height:100%;overflow:hidden;background:#c192c7;z-index:9999;transition:opacity .65s}.preloader-hidden-add{opacity:1;display:block}.preloader-hidden-add-active{opacity:0}.preloader-hidden{display:none}.cs-loader{position:absolute;top:0;left:0;height:100%;width:100%}.cs-loader-inner{transform:translateY(-50%);top:50%;position:absolute;width:100%;color:#fff;text-align:center}.cs-loader-inner label{font-size:20px;opacity:0;display:inline-block}@keyframes lol{0%{opacity:0;transform:translateX(-300px)}33%{opacity:1;transform:translateX(0)}66%{opacity:1;transform:translateX(0)}100%{opacity:0;transform:translateX(300px)}}.cs-loader-inner label:nth-child(6){animation:lol 3s infinite ease-in-out}.cs-loader-inner label:nth-child(5){animation:lol 3s .1s infinite ease-in-out}.cs-loader-inner label:nth-child(4){animation:lol 3s .2s infinite ease-in-out}.cs-loader-inner label:nth-child(3){animation:lol 3s .3s infinite ease-in-out}.cs-loader-inner label:nth-child(2){animation:lol 3s .4s infinite ease-in-out}.cs-loader-inner label:nth-child(1){animation:lol 3s .5s infinite ease-in-out}</style>
   <!-- Google tag (gtag.js) -->
   <script async src="https://www.googletagmanager.com/gtag/js?id=G-13PPZZ7P4Y"></script>
   <script>