style dialog

src/app/shared/component/confirm-dialog/confirm-dialog.component.html

-<h2 mat-dialog-title style="border-bottom: solid 1px #eeeeee">CONFIRM TO IGNORE THE WARNING</h2>
-<mat-dialog-content>
-  <section class="example-section">
-  <span class="example-list-section">
-    <mat-checkbox class="example-margin"
-                  color="primary"
-                  [checked]="allComplete"
-                  [indeterminate]="someComplete()"
-                  (change)="setAll($event.checked)">
-      {{data.name}}
-    </mat-checkbox>
-  </span>
-    <span class="example-list-section">
-    <ul>
-      <li *ngFor="let item of data.gateStatus">
-        <mat-checkbox [(ngModel)]="item.ignore"
-                      color="primary"
-                      (ngModelChange)="updateAllComplete()">
+<h5 mat-dialog-title >CONFIRM TO IGNORE THE WARNING</h5>
+<mat-dialog-content style="padding-bottom: 4px">
+      <div *ngFor="let item of data">
+        <mat-checkbox [(ngModel)]="item.ignore">
           {{item.name}}
         </mat-checkbox>
-      </li>
-    </ul>
-  </span>
-  </section>
+      </div>
 </mat-dialog-content>
 <mat-dialog-actions align="end">
-  <button mat-button mat-dialog-close>Cancel</button>
-  <button mat-button mat-dialog-close style="background: #ff7723; color: #ffffff">Yes</button>
+  <button mat-button mat-dialog-close cdkFocusInitial>Close</button>
 </mat-dialog-actions>

src/app/shared/component/confirm-dialog/confirm-dialog.component.scss

-ul {
-  list-style-type: none;
-  margin-top: 4px;
+.mat-mdc-dialog-title {
+  border-bottom: solid 1px #eeeeee;
+  font-size: 14px;
+  color: #FFFFFF;
+  background: orange;
+}
+::ng-deep.mdc-checkbox .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background{
+  background: orange !important;
+  border: orange !important;
 }

src/app/shared/component/confirm-dialog/confirm-dialog.component.ts

 })
 export class ConfirmDialogComponent {
   constructor(public dialogRef: MatDialogRef<ConfirmDialogComponent>) {}
-  data = {
-    name: 'All',
-    ignore: false,
-    gateStatus: [
+  data = [
       {
-        name: 'GATE A',
-        position: { latitude: 123.456, longitude: 456.789 },
+        name: 'FIRE ALARM',
         ignore: false,
       },
-      {
-        name: 'GATE B',
-        position: { latitude: 111.222, longitude: 333.444 },
-        ignore: false,
-      },
-      {
-        name: 'GATE C',
-        position: { latitude: 222.333, longitude: 444.555 },
-        ignore: false,
-      },
-    ],
-  };
-
-  allComplete: boolean = false;
+    {
+      name: 'FENCE ALARM',
+      ignore: false,
+    },
+    ];
 
-  updateAllComplete() {
-    this.allComplete =
-      this.data.gateStatus != null &&
-      this.data.gateStatus.every((t) => t.ignore);
-  }
 
-  someComplete(): boolean {
-    if (this.data.gateStatus == null) {
-      return false;
-    }
-    return (
-      this.data.gateStatus.filter((t) => t.ignore).length > 0 &&
-      !this.allComplete
-    );
-  }
 
-  setAll(completed: boolean) {
-    this.allComplete = completed;
-    if (this.data.gateStatus == null) {
-      return;
-    }
-    this.data.gateStatus.forEach((t) => (t.ignore = completed));
-  }
 }