diff options
Diffstat (limited to 'public/src/app/rule-engine/confirm-popup')
3 files changed, 43 insertions, 9 deletions
diff --git a/public/src/app/rule-engine/confirm-popup/confirm-popup.component.html b/public/src/app/rule-engine/confirm-popup/confirm-popup.component.html index 49c800a..837e0f8 100644 --- a/public/src/app/rule-engine/confirm-popup/confirm-popup.component.html +++ b/public/src/app/rule-engine/confirm-popup/confirm-popup.component.html @@ -1,12 +1,36 @@ -<div class="container" data-tests-id="delete-popup"> +<div class="container-popup" data-tests-id="delete-popup"> <div class="header"> - Delete + <div style="display: flex; width:100%;"> + <span style="color: #CF2A2A; + padding-right: 15px; + height: 100%; + display: flex; + justify-content: center; + align-items: center;" [innerHTML]="'x-circle' | feather:28"></span> + <span style="font-family: 'Open Sans', sans-serif; + font-size: 24px; width: 100%;"> + Delete + </span> + <span style=" + height: 100%; + display: flex; + color:rgb(90, 90, 90); + justify-content: center; + align-items: center;" [innerHTML]="'x' | feather:20" (click)="close(false)"></span> + </div> </div> - <div class="content"> + <div class="content" style="padding: 0 0 20px 50px; font-family: 'Open Sans', sans-serif; font-size: 14px;"> Are you sure you want to delete? </div> <div class="buttons"> - <button mat-raised-button (click)="close(true)" data-tests-id="btnDelete" style="margin-right: 1rem;" color="primary">Delete</button> - <button mat-raised-button (click)="close(false)" data-tests-id="btnCancel" style="border: 1px solid #009FDB; color: #009FDB; background: #ffffff;">Cancel</button> + + <button mat-raised-button color="primary" style="background-color: #CF2A2A; margin-right: 10px; font-size: 14px; font-family: 'Open Sans', sans-serif; height: 36px; color:white;" + (click)="close(true)" data-tests-id="btnDelete"> + DELETE + </button> + <button mat-raised-button class="btn-secondry" style="border-color: #CF2A2A !important; color:#CF2A2A !important; font-size: 14px; font-family: 'Open Sans', sans-serif;text-align: center; height: 36px;" + (click)="close(false)" data-tests-id="btnCancel"> + CANCEL + </button> </div> </div> diff --git a/public/src/app/rule-engine/confirm-popup/confirm-popup.component.scss b/public/src/app/rule-engine/confirm-popup/confirm-popup.component.scss index 2a826ff..4e3539d 100644 --- a/public/src/app/rule-engine/confirm-popup/confirm-popup.component.scss +++ b/public/src/app/rule-engine/confirm-popup/confirm-popup.component.scss @@ -1,10 +1,19 @@ -.container { +.my-confrim-dialog .mat-dialog-container { + height: 180px; +} + +.container-popup { display: flex; justify-content: space-between; + flex-direction: column; margin: 0 !important; - border-top: solid 6px #ffb81c; + border-top: solid 6px #cf2a2a; .header { border-bottom: none; + padding-top: 15px; + padding-left: 20px; + padding-right: 12px; + padding-bottom: 0; } .content { margin: 1rem; diff --git a/public/src/app/rule-engine/confirm-popup/confirm-popup.component.ts b/public/src/app/rule-engine/confirm-popup/confirm-popup.component.ts index 23b6cee..d65cc5b 100644 --- a/public/src/app/rule-engine/confirm-popup/confirm-popup.component.ts +++ b/public/src/app/rule-engine/confirm-popup/confirm-popup.component.ts @@ -1,10 +1,11 @@ -import { Component, Inject } from '@angular/core'; +import { Component, Inject, ViewEncapsulation } from '@angular/core'; import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material'; @Component({ selector: 'app-confirm-popup', templateUrl: './confirm-popup.component.html', - styleUrls: ['./confirm-popup.component.scss'] + styleUrls: ['./confirm-popup.component.scss'], + encapsulation: ViewEncapsulation.None }) export class ConfirmPopupComponent { constructor( |