Perf: Optimize prompt message style

Author: ZhaoJiSen

src/app/elements/asset-tree/asset-tree.component.ts

@@ -582,13 +582,13 @@ export class ElementAssetTreeComponent implements OnInit {
         const i = this.favoriteAssets.indexOf(assetId);
         this.favoriteAssets.splice(i, 1);
         const msg = this._i18n.instant('Disfavor') + ' ' + this._i18n.instant('success');
-        this._toastr.success(msg, '');
+        this._toastr.success(msg, '', { nzClass: 'custom-success-notification' });
       });
     } else {
       this._http.favoriteAsset(assetId, true).subscribe(() => {
         this.favoriteAssets.push(assetId);
         const msg = this._i18n.instant('Favorite') + ' ' + this._i18n.instant('success');
-        this._toastr.success(msg, '');
+        this._toastr.success(msg, '', { nzClass: 'custom-success-notification' });
       });
     }
   }

src/app/elements/connect/download-dialog/download-dialog.component.html

@@ -1,8 +1,16 @@
-<div class="content">
-  <p>
-    {{ "DownloadClientMsg" | translate }}
-  </p>
-  <label nz-checkbox name="auto-login" [(ngModel)]="ignoreRemind">
-    {{ "Don't prompt again" | translate }}
-  </label>
+<div class="download-dialog-content">
+  <div class="message-section">
+    <div class="icon-container">
+      <i nz-icon nzType="download" nzTheme="outline"></i>
+    </div>
+    <div class="message-text">
+      {{ "DownloadClientMsg" | translate }}
+    </div>
+  </div>
+
+  <div class="options-section">
+    <label nz-checkbox name="auto-login" [(ngModel)]="ignoreRemind" class="reminder-checkbox">
+      {{ "Don't prompt again" | translate }}
+    </label>
+  </div>
 </div>

src/app/elements/connect/download-dialog/download-dialog.component.scss

@@ -1,10 +1,26 @@
 
-.content {
-  padding: 24px;
-}
+.download-dialog-content {
+  .message-section {
+    display: flex;
+    align-items: flex-start;
+    gap: 12px;
+
+    .icon-container {
+      cursor: pointer;
+    }
 
+    .message-text {
+      flex: 1;
+      font-size: 15px;
+      color: #262626;
+    }
+  }
 
-.connect-type-group {
-  border: solid #cbc9c9 1px;
-  padding: 5px
+  .options-section {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    margin-top: 12px;
+  }
 }
+

src/app/elements/content/command-dialog/command-dialog.component.ts

@@ -43,12 +43,12 @@ export class ElementCommandDialogComponent implements OnInit {
     this._http.addQuickCommand(data).subscribe(
       async () => {
         const msg = await this._i18n.t('Save success');
-        this._toastr.success('' + msg, '', {nzDuration: 2000});
+        this._toastr.success('' + msg, '', {nzDuration: 2000, nzClass: 'custom-success-notification'});
         this.dialogRef.close(this.command);
       },
       (error) => {
         const msg = 'name:' + error.error.name;
-        this._toastr.error(msg, '');
+        this._toastr.error(msg, '', { nzClass: 'custom-error-notification' });
       }
     );
   }

src/app/elements/content/content-window/guide/guide.component.ts

@@ -59,7 +59,7 @@ export class ElementConnectorGuideComponent implements OnInit {
         } else {
           msg = error.error.msg || error.error.is_reusable || error.message;
         }
-        this._toastr.error(msg, '', { nzDuration: 2000 });
+        this._toastr.error(msg, '', { nzDuration: 2000, nzClass: 'custom-error-notification' });
       }
     );
   }
@@ -82,7 +82,7 @@ export class ElementConnectorGuideComponent implements OnInit {
 
   async onCopySuccess(evt) {
     const msg = await this._i18n.t('Copied');
-    this._toastr.success(msg, '');
+    this._toastr.success(msg, '', { nzClass: 'custom-success-notification' });
   }
 
   onHoverClipRef(evt) {

src/app/pages/monitor/monitor.component.ts

@@ -108,7 +108,7 @@ export class PagesMonitorComponent implements OnInit {
     const resumeTaskMsg = await this._i18n.t('Resume task has been send');
     const session_ids = res['ok'];
     const msg = this.isPaused ? resumeTaskMsg : pauseTaskMsg;
-    this._toastr.success(msg, '');
+    this._toastr.success(msg, '', { nzClass: 'custom-success-notification' });
     if (session_ids.indexOf(this.sessionID) !== -1) {
 
     }

src/app/services/connect-token/acl-dialog/acl-dialog.component.html

@@ -3,7 +3,7 @@ <h3 nz-typography nzTitle>{{ content.title | translate }}</h3>
 
   <div class="nz-modal-content">
     <div [class.error-message]="content.isError">
-      <nz-alert nzType="info" class="content-message" [nzDescription]="alertContent">
+      <nz-alert [nzType]="content.isError ? 'error' : 'info'" class="content-message" [nzDescription]="alertContent">
         <ng-template #alertContent>
           <div>{{ content.message | translate }}</div>
 

src/app/services/connect-token/acl-dialog/acl-dialog.component.ts

@@ -89,7 +89,7 @@ export class ElementACLDialogComponent implements OnInit {
 
   async onCopySuccess(evt) {
     const msg = await this._i18n.t('Copied');
-    this._toastr.success(msg, '');
+    this._toastr.success(msg, '', { nzClass: 'custom-success-notification' });
     writeText(evt);
   }
 
@@ -119,7 +119,7 @@ export class ElementACLDialogComponent implements OnInit {
                 this.content = this.getDialogContent(this.code);
               } else {
                 const msg = await this._i18n.t('Face verify success');
-                this._toastr.success(msg, '');
+                this._toastr.success(msg, '', { nzClass: 'custom-success-notification' });
                 this.dialogRef.close(connToken);
                 this.faceService.openFaceMonitor();
               }
@@ -174,7 +174,7 @@ export class ElementACLDialogComponent implements OnInit {
                 this.content = this.getDialogContent(this.code);
               } else {
                 const msg = await this._i18n.t('Face verify success');
-                this._toastr.success(msg, '');
+                this._toastr.success(msg, '', { nzClass: 'custom-success-notification' });
                 this.dialogRef.close(connToken);
               }
             }
@@ -274,10 +274,12 @@ export class ElementACLDialogComponent implements OnInit {
             this.code = 'ticket_review_pending';
             return;
           }
+
           const state = ticket.state.value;
+
           if (state === 'approved') {
             const msg = await this._i18n.t('Login review approved');
-            this._toastr.success(msg, '');
+            this._toastr.success(msg, '', { nzClass: 'custom-success-notification' }  );
             this.dialogRef.close(this.connectionToken);
           } else if (state === 'rejected') {
             this.code = 'ticket_review_rejected';

src/sass/ant.less

@@ -197,3 +197,19 @@
 .ant-splitter-bar-dragger-active::before {
   background: #5f5f5f;
 }
+
+.ant-notification-notice {
+  border-radius: 0.5rem;
+
+  &.custom-success-notification {
+    background-color: #50a352;
+  }
+
+  &.custom-error-notification {
+    background-color: #f56c6c;
+  }
+
+  .ant-notification-notice-content .ant-notification-notice-message {
+    color: #fff;
+  }
+}