From fcf5921b7e43185e2dc39843069b6d1b5369aa71 Mon Sep 17 00:00:00 2001
From: Vladyslav_Prykhodko <vprykhodko@thingsboard.io>
Date: Wed, 14 Feb 2024 15:59:41 +0200
Subject: [PATCH] UI: Clear style code in notification component

---
 .../sent-notification-dialog.component.html   | 108 ++++++++---------
 .../sent-notification-dialog.component.scss   |  53 ++------
 .../sent/sent-notification-dialog.componet.ts |   2 +-
 ...tion-template-configuration.component.html | 114 +++++++++---------
 ...tion-template-configuration.component.scss |  10 +-
 ...emplate-notification-dialog.component.html |   4 +-
 ...emplate-notification-dialog.component.scss |  18 +--
 .../app/shared/models/notification.models.ts  |   4 +-
 8 files changed, 132 insertions(+), 181 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.component.html b/ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.component.html
index 71daee5343..8f5d41de34 100644
--- a/ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.component.html
@@ -39,18 +39,10 @@
       <ng-template matStepLabel>{{ 'notification.compose' | translate }}</ng-template>
       <form [formGroup]="notificationRequestForm">
         <div fxLayoutAlign="center">
-          <tb-toggle-header (valueChange)="notificationRequestForm.get('useTemplate').patchValue($event)"
-                            class="tb-notification-use-template-toggle-group"
-                            ignoreMdLgSize
-                            useSelectOnMdLg="false"
-                            appearance="fill"
-                            name="useTemplate"
-                            [options]="[
-                                         { name: translate.instant('notification.start-from-scratch'), value: false},
-                                         { name: translate.instant('notification.use-template'), value: true}
-                                       ]"
-                            [value]="notificationRequestForm.get('useTemplate').value">
-          </tb-toggle-header>
+          <tb-toggle-select formControlName="useTemplate" appearance="fill">
+            <tb-toggle-option  [value]="false">{{ 'notification.start-from-scratch' | translate }}</tb-toggle-option>
+            <tb-toggle-option  [value]="true">{{ 'notification.use-template' | translate }}</tb-toggle-option>
+          </tb-toggle-select>
         </div>
         <div *ngIf="notificationRequestForm.get('useTemplate').value; else scratchTemplate">
           <tb-template-autocomplete
@@ -68,7 +60,7 @@
                 <div>
                   <label [ngClass]="{'tb-error': notificationRequestForm.get('template.configuration.deliveryMethodsTemplates').hasError('atLeastOne')}"
                          class="tb-title tb-required">{{ "notification.delivery-methods" | translate }}</label>
-                  <div class="tb-hint" translate>notification.at-least-one-should-be-selected</div>
+                  <div class="tb-form-hint" translate>notification.at-least-one-should-be-selected</div>
                 </div>
                 <button
                   matTooltip="{{ 'notification.refresh-allow-delivery-method' | translate }}"
@@ -82,7 +74,7 @@
               <section formGroupName="deliveryMethodsTemplates" class="delivery-methods-container">
                 <ng-container *ngFor="let deliveryMethods of notificationDeliveryMethods">
                   <a *ngIf="isInteractDeliveryMethod(deliveryMethods); else deliveryMethod"
-                     class="delivery-method-container interact"
+                     class="tb-form-panel stroked delivery-method-container tb-pointer interact"
                      [routerLink]="configurationPage(deliveryMethods)"
                      [formGroupName]="deliveryMethods"
                      [matTooltip]="getDeliveryMethodsTooltip(deliveryMethods)"
@@ -95,7 +87,7 @@
                     </mat-icon>
                   </a>
                   <ng-template #deliveryMethod>
-                    <section class="delivery-method-container"
+                    <section class="delivery-method-container tb-form-panel stroked"
                              [formGroupName]="deliveryMethods"
                              [matTooltip]="getDeliveryMethodsTooltip(deliveryMethods)"
                              [matTooltipDisabled]="getDeliveryMethodsTemplatesControl(deliveryMethods).enabled"
@@ -126,7 +118,7 @@
             </button>
           </tb-entity-list>
         </ng-template>
-        <section formGroupName="additionalConfig" class="additional-config-group">
+        <section formGroupName="additionalConfig" class="tb-form-panel stroked no-padding-bottom no-gap">
           <mat-slide-toggle formControlName="enabled" class="toggle">
             {{ 'notification.scheduler-later' | translate }}
           </mat-slide-toggle>
@@ -162,82 +154,82 @@
       <mat-progress-spinner color="warn" mode="indeterminate"
                             strokeWidth="5" *ngIf="(isLoading$ | async) && !preview">
       </mat-progress-spinner>
-      <div *ngIf="preview" style="padding-bottom: 16px">
-        <section class="preview-group notification" *ngIf="preview.processedTemplates.WEB?.enabled">
+      <div *ngIf="preview" class="tb-form-panel no-padding no-border">
+        <section class="preview-group tb-form-panel stroked no-gap">
           <div fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
-            <mat-icon class="tb-mat-18" svgIcon="mdi:bell-badge"></mat-icon>
-            <div class="group-title" translate>notification.delivery-method.web-preview</div>
+            <tb-icon class="tb-mat-18">supervisor_account</tb-icon>
+            <div class="tb-form-panel-title">{{ 'notification.recipients-count' | translate : {count: preview.totalRecipientsCount} }}</div>
+          </div>
+          <div class="details-recipients" *ngIf="notificationRequestForm.get('targets').value?.length > 1">
+            <div *ngFor="let detail of preview.recipientsCountByTarget | keyvalue" class="details-recipient">
+              <span class="number">{{ detail.value }}</span>{{ detail.key }}
+            </div>
+          </div>
+          <mat-divider class="divider"></mat-divider>
+          <mat-chip-listbox>
+            <mat-chip *ngFor="let recipientTitle of preview.recipientsPreview">
+              <span>{{ recipientTitle }}</span>
+            </mat-chip>
+          </mat-chip-listbox>
+        </section>
+        <section class="preview-group notification tb-form-panel stroked no-gap" *ngIf="preview.processedTemplates.WEB?.enabled">
+          <div fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
+            <tb-icon class="tb-mat-18">mdi:bell-badge</tb-icon>
+            <div class="tb-form-panel-title" translate>notification.delivery-method.web-preview</div>
           </div>
           <div class="web-preview">
             <tb-notification preview [notification]="preview.processedTemplates.WEB"></tb-notification>
           </div>
         </section>
-        <section class="preview-group notification" *ngIf="preview.processedTemplates.EMAIL?.enabled">
+        <section class="preview-group notification tb-form-panel stroked no-gap" *ngIf="preview.processedTemplates.MOBILE_APP?.enabled">
           <div fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
-            <mat-icon class="tb-mat-18" svgIcon="mdi:email"></mat-icon>
-            <div class="group-title" translate>notification.delivery-method.email-preview</div>
+            <tb-icon class="tb-mat-18">mdi:cellphone-text</tb-icon>
+            <div class="tb-form-panel-title" translate>notification.delivery-method.mobile-app-preview</div>
           </div>
           <div class="notification-content">
-            <div class="subject">{{ preview.processedTemplates.EMAIL.subject }}</div>
-            <mat-divider></mat-divider>
-            <div class="html-content" [innerHTML]="(preview.processedTemplates.EMAIL.body | safe: 'html')"></div>
+            <div class="subject">{{ preview.processedTemplates.MOBILE_APP.subject }}</div>
+            <div>{{ preview.processedTemplates.MOBILE_APP.body }}</div>
           </div>
         </section>
-        <section class="preview-group notification" *ngIf="preview.processedTemplates.SMS?.enabled">
+        <section class="preview-group notification tb-form-panel stroked no-gap" *ngIf="preview.processedTemplates.SMS?.enabled">
           <div fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
-            <mat-icon class="tb-mat-18" svgIcon="mdi:message-processing"></mat-icon>
-            <div class="group-title" translate>notification.delivery-method.sms-preview</div>
+            <tb-icon class="tb-mat-18">mdi:message-processing</tb-icon>
+            <div class="tb-form-panel-title" translate>notification.delivery-method.sms-preview</div>
           </div>
           <div class="notification-content">
             {{ preview.processedTemplates.SMS.body }}
           </div>
         </section>
-        <section class="preview-group notification" *ngIf="preview.processedTemplates.SLACK?.enabled">
+        <section class="preview-group notification tb-form-panel stroked no-gap" *ngIf="preview.processedTemplates.EMAIL?.enabled">
           <div fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
-            <mat-icon class="tb-mat-18" svgIcon="mdi:slack"></mat-icon>
-            <div class="group-title" translate>notification.delivery-method.slack-preview</div>
+            <tb-icon class="tb-mat-18">mdi:email</tb-icon>
+            <div class="tb-form-panel-title" translate>notification.delivery-method.email-preview</div>
           </div>
           <div class="notification-content">
-            {{ preview.processedTemplates.SLACK.body }}
+            <div class="subject">{{ preview.processedTemplates.EMAIL.subject }}</div>
+            <mat-divider></mat-divider>
+            <div class="html-content" [innerHTML]="(preview.processedTemplates.EMAIL.body | safe: 'html')"></div>
           </div>
         </section>
-        <section class="preview-group notification" *ngIf="preview.processedTemplates.MOBILE_APP?.enabled">
+        <section class="preview-group notification tb-form-panel stroked no-gap" *ngIf="preview.processedTemplates.SLACK?.enabled">
           <div fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
-            <mat-icon class="tb-mat-18" svgIcon="mdi:cellphone-text"></mat-icon>
-            <div class="group-title" translate>notification.delivery-method.mobile-app-preview</div>
+            <tb-icon class="tb-mat-18">mdi:slack</tb-icon>
+            <div class="tb-form-panel-title" translate>notification.delivery-method.slack-preview</div>
           </div>
           <div class="notification-content">
-            <div class="subject">{{ preview.processedTemplates.MOBILE_APP.subject }}</div>
-            <div>{{ preview.processedTemplates.MOBILE_APP.body }}</div>
+            {{ preview.processedTemplates.SLACK.body }}
           </div>
         </section>
-        <section class="preview-group notification" *ngIf="preview.processedTemplates.MICROSOFT_TEAMS?.enabled">
+        <section class="preview-group notification tb-form-panel stroked no-gap" *ngIf="preview.processedTemplates.MICROSOFT_TEAMS?.enabled">
           <div fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
-            <mat-icon class="tb-mat-18" svgIcon="mdi:microsoft-teams"></mat-icon>
-            <div class="group-title" translate>notification.delivery-method.microsoft-teams-preview</div>
+            <tb-icon class="tb-mat-18">mdi:microsoft-teams</tb-icon>
+            <div class="tb-form-panel-title" translate>notification.delivery-method.microsoft-teams-preview</div>
           </div>
           <div class="notification-content mini">
             <div class="subject">{{ preview.processedTemplates.MICROSOFT_TEAMS.subject }}</div>
             {{ preview.processedTemplates.MICROSOFT_TEAMS.body }}
           </div>
         </section>
-        <section class="preview-group">
-          <div fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
-            <mat-icon  class="tb-mat-18">supervisor_account</mat-icon>
-            <div class="group-title">{{ 'notification.recipients-count' | translate : {count: preview.totalRecipientsCount} }}</div>
-          </div>
-          <div class="details-recipients" *ngIf="notificationRequestForm.get('targets').value?.length > 1">
-            <div *ngFor="let detail of preview.recipientsCountByTarget | keyvalue" class="details-recipient">
-              <span class="number">{{ detail.value }}</span>{{ detail.key }}
-            </div>
-          </div>
-          <mat-divider class="divider"></mat-divider>
-          <mat-chip-listbox>
-            <mat-chip *ngFor="let recipientTitle of preview.recipientsPreview">
-              <span>{{ recipientTitle }}</span>
-            </mat-chip>
-          </mat-chip-listbox>
-        </section>
       </div>
     </mat-step>
   </mat-horizontal-stepper>
diff --git a/ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.component.scss b/ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.component.scss
index b5527b9adc..8a42cc47b0 100644
--- a/ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.component.scss
+++ b/ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.component.scss
@@ -64,7 +64,7 @@
     font-size: 13px;
   }
 
-  .tb-hint {
+  .tb-form-hint {
     padding: 0 0 8px;
   }
 
@@ -88,20 +88,14 @@
 
   .delivery-methods-container {
     margin-bottom: 20px;
-    display: flex;
-    flex-wrap: wrap;
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, auto));
     gap: 8px;
 
     .delivery-method-container {
-      display: inline-flex;
-      flex: 1 1 calc(50% - 8px);
-      max-width: calc(50% - 8px);
-      padding: 16px 12px;
-      border: 1px solid rgba(0, 0, 0, 0.1);
-      border-radius: 6px;
+      flex-direction: row;
 
       &.interact {
-        cursor: pointer;
         color: inherit;
       }
 
@@ -112,32 +106,17 @@
     }
   }
 
-  .additional-config-group {
-    padding: 16px 16px 0;
-    margin-bottom: 12px;
-    border: 1px solid rgba(0, 0, 0, 0.1);
-    border-radius: 6px;
-    width: 100%;
-    height: 100%;
-
-    .toggle {
-      margin-bottom: 16px;
-    }
+  .toggle {
+    margin-bottom: 16px;
   }
 
   .preview-group {
-    padding: 16px;
-    margin-bottom: 10px;
-    border: 1px groove rgba(0, 0, 0, .12);
-    border-radius: 4px;
-
     &.notification {
       background-color: #F3F6FA;
-    }
 
-    .group-title {
-      font-weight: 500;
-      font-size: 14px;
+      tb-icon, .tb-form-panel-title {
+        color: rgba(0, 0, 0, .38);
+      }
     }
 
     &> div:not(:last-child) {
@@ -212,7 +191,7 @@
     }
   }
 
-  .tb-notification-use-template-toggle-group {
+  tb-toggle-select {
     margin-bottom: 24px;
     width: 320px;
   }
@@ -240,18 +219,6 @@
         }
       }
     }
-
-    .tb-form-panel .mat-expansion-panel.tb-settings {
-      padding: 11px 16px;
-
-      & > .mat-expansion-panel-content > .mat-expansion-panel-body {
-        gap: 0;
-      }
-    }
-  }
-
-  .tb-notification-use-template-toggle-group {
-    margin-bottom: 24px;
   }
 
   .preview-group {
diff --git a/ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.componet.ts b/ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.componet.ts
index 98fd3ba61d..da95bec91d 100644
--- a/ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.componet.ts
+++ b/ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.componet.ts
@@ -89,7 +89,7 @@ export class SentNotificationDialogComponent extends
               protected fb: FormBuilder,
               private notificationService: NotificationService,
               private dialog: MatDialog,
-              public translate: TranslateService) {
+              private translate: TranslateService) {
     super(store, router, dialogRef, fb);
 
     this.notificationDeliveryMethods.forEach(method => {
diff --git a/ui-ngx/src/app/modules/home/pages/notification/template/notification-template-configuration.component.html b/ui-ngx/src/app/modules/home/pages/notification/template/notification-template-configuration.component.html
index a856f1eb7d..f8c138f809 100644
--- a/ui-ngx/src/app/modules/home/pages/notification/template/notification-template-configuration.component.html
+++ b/ui-ngx/src/app/modules/home/pages/notification/template/notification-template-configuration.component.html
@@ -237,6 +237,62 @@
       </ng-template>
     </mat-expansion-panel>
   </section>
+  <section class="tb-form-panel tb-slide-toggle stroked"
+           [formGroupName]="NotificationDeliveryMethod.EMAIL"
+           *ngIf="templateConfigurationForm.get('EMAIL.enabled').value">
+    <mat-expansion-panel class="tb-settings" expanded>
+      <mat-expansion-panel-header fxLayout="row wrap" class="fill-width">
+        <mat-panel-title class="template-tittle">
+          <tb-icon>{{ NotificationDeliveryMethodInfoMap.get(NotificationDeliveryMethod.EMAIL).icon }}</tb-icon>
+          {{ NotificationDeliveryMethodInfoMap.get(NotificationDeliveryMethod.EMAIL).name | translate }}
+        </mat-panel-title>
+      </mat-expansion-panel-header>
+      <ng-template matExpansionPanelContent class="tb-extension-panel">
+        <mat-form-field class="mat-block">
+          <mat-label translate>notification.subject</mat-label>
+          <input matInput formControlName="subject">
+          <mat-error *ngIf="templateConfigurationForm.get('EMAIL.subject').hasError('required')">
+            {{ 'notification.subject-required' | translate }}
+          </mat-error>
+        </mat-form-field>
+        <mat-label class="tb-title tb-required"
+                   [class.tb-error]="(interacted || templateConfigurationForm.get('EMAIL.body').touched) && templateConfigurationForm.get('EMAIL.body').hasError('required')"
+                   translate>notification.message
+        </mat-label>
+        <editor [init]="tinyMceOptions" formControlName="body"></editor>
+        <mat-error class="tb-mat-error"
+                   *ngIf="(interacted || templateConfigurationForm.get('EMAIL.body').touched) && templateConfigurationForm.get('EMAIL.body').hasError('required')">
+          {{ 'notification.message-required' | translate }}
+        </mat-error>
+      </ng-template>
+    </mat-expansion-panel>
+  </section>
+  <section class="tb-form-panel tb-slide-toggle stroked"
+           [formGroupName]="NotificationDeliveryMethod.SLACK"
+           *ngIf="templateConfigurationForm.get('SLACK.enabled').value">
+    <mat-expansion-panel class="tb-settings" expanded>
+      <mat-expansion-panel-header fxLayout="row wrap" class="fill-width">
+        <mat-panel-title class="template-tittle">
+          <tb-icon>{{ NotificationDeliveryMethodInfoMap.get(NotificationDeliveryMethod.SLACK).icon }}</tb-icon>
+          {{ NotificationDeliveryMethodInfoMap.get(NotificationDeliveryMethod.SLACK).name | translate }}
+        </mat-panel-title>
+      </mat-expansion-panel-header>
+      <ng-template matExpansionPanelContent class="tb-extension-panel">
+        <mat-form-field class="mat-block">
+          <mat-label translate>notification.message</mat-label>
+          <textarea matInput
+                    cdkTextareaAutosize
+                    cols="1"
+                    cdkAutosizeMinRows="1"
+                    formControlName="body">
+          </textarea>
+          <mat-error *ngIf="templateConfigurationForm.get('SLACK.body').hasError('required')">
+            {{ 'notification.message-required' | translate }}
+          </mat-error>
+        </mat-form-field>
+      </ng-template>
+    </mat-expansion-panel>
+  </section>
   <section class="tb-form-panel tb-slide-toggle stroked"
            [formGroupName]="NotificationDeliveryMethod.MICROSOFT_TEAMS"
            *ngIf="templateConfigurationForm.get('MICROSOFT_TEAMS.enabled').value">
@@ -292,7 +348,7 @@
                     <mat-error
                       *ngIf="templateConfigurationForm.get('MICROSOFT_TEAMS.button.text').hasError('maxlength')">
                       {{'notification.button-text-max-length' | translate :
-                          {length: templateConfigurationForm.get('MICROSOFT_TEAMS.button.text').getError('maxlength').requiredLength}
+                      {length: templateConfigurationForm.get('MICROSOFT_TEAMS.button.text').getError('maxlength').requiredLength}
                       }}
                     </mat-error>
                   </mat-form-field>
@@ -339,60 +395,4 @@
       </ng-template>
     </mat-expansion-panel>
   </section>
-  <section class="tb-form-panel tb-slide-toggle stroked"
-           [formGroupName]="NotificationDeliveryMethod.SLACK"
-           *ngIf="templateConfigurationForm.get('SLACK.enabled').value">
-    <mat-expansion-panel class="tb-settings" expanded>
-      <mat-expansion-panel-header fxLayout="row wrap" class="fill-width">
-        <mat-panel-title class="template-tittle">
-          <tb-icon>{{ NotificationDeliveryMethodInfoMap.get(NotificationDeliveryMethod.SLACK).icon }}</tb-icon>
-          {{ NotificationDeliveryMethodInfoMap.get(NotificationDeliveryMethod.SLACK).name | translate }}
-        </mat-panel-title>
-      </mat-expansion-panel-header>
-      <ng-template matExpansionPanelContent class="tb-extension-panel">
-        <mat-form-field class="mat-block">
-          <mat-label translate>notification.message</mat-label>
-          <textarea matInput
-                    cdkTextareaAutosize
-                    cols="1"
-                    cdkAutosizeMinRows="1"
-                    formControlName="body">
-          </textarea>
-          <mat-error *ngIf="templateConfigurationForm.get('SLACK.body').hasError('required')">
-            {{ 'notification.message-required' | translate }}
-          </mat-error>
-        </mat-form-field>
-      </ng-template>
-    </mat-expansion-panel>
-  </section>
-  <section class="tb-form-panel tb-slide-toggle stroked"
-           [formGroupName]="NotificationDeliveryMethod.EMAIL"
-           *ngIf="templateConfigurationForm.get('EMAIL.enabled').value">
-    <mat-expansion-panel class="tb-settings" expanded>
-      <mat-expansion-panel-header fxLayout="row wrap" class="fill-width">
-        <mat-panel-title class="template-tittle">
-          <tb-icon>{{ NotificationDeliveryMethodInfoMap.get(NotificationDeliveryMethod.EMAIL).icon }}</tb-icon>
-          {{ NotificationDeliveryMethodInfoMap.get(NotificationDeliveryMethod.EMAIL).name | translate }}
-        </mat-panel-title>
-      </mat-expansion-panel-header>
-      <ng-template matExpansionPanelContent class="tb-extension-panel">
-        <mat-form-field class="mat-block">
-          <mat-label translate>notification.subject</mat-label>
-          <input matInput formControlName="subject">
-          <mat-error *ngIf="templateConfigurationForm.get('EMAIL.subject').hasError('required')">
-            {{ 'notification.subject-required' | translate }}
-          </mat-error>
-        </mat-form-field>
-        <mat-label class="tb-title tb-required"
-                   [class.tb-error]="(interacted || templateConfigurationForm.get('EMAIL.body').touched) && templateConfigurationForm.get('EMAIL.body').hasError('required')"
-                   translate>notification.message
-        </mat-label>
-        <editor [init]="tinyMceOptions" formControlName="body"></editor>
-        <mat-error class="tb-mat-error"
-                   *ngIf="(interacted || templateConfigurationForm.get('EMAIL.body').touched) && templateConfigurationForm.get('EMAIL.body').hasError('required')">
-          {{ 'notification.message-required' | translate }}
-        </mat-error>
-      </ng-template>
-    </mat-expansion-panel>
-  </section>
 </section>
diff --git a/ui-ngx/src/app/modules/home/pages/notification/template/notification-template-configuration.component.scss b/ui-ngx/src/app/modules/home/pages/notification/template/notification-template-configuration.component.scss
index b69b950a42..312f69bdc7 100644
--- a/ui-ngx/src/app/modules/home/pages/notification/template/notification-template-configuration.component.scss
+++ b/ui-ngx/src/app/modules/home/pages/notification/template/notification-template-configuration.component.scss
@@ -15,9 +15,14 @@
  */
 :host {
   .tb-template-header {
-    margin-bottom: 12px;
+    position: sticky;
+    top: 0;
+    z-index: 1;
+    padding-bottom: 12px;
+    background-color: var(--mdc-dialog-container-color, white);
+
     .tb-hint-available-params {
-      color: rgba(0,0,0,0.54);
+      color: rgba(0, 0, 0, 0.54);
       letter-spacing: 0.4px;
 
       .content {
@@ -29,6 +34,7 @@
   .template-tittle {
     gap: 12px;
     font-weight: normal;
+
     tb-icon {
       color: rgba(0, 0, 0, .38);
     }
diff --git a/ui-ngx/src/app/modules/home/pages/notification/template/template-notification-dialog.component.html b/ui-ngx/src/app/modules/home/pages/notification/template/template-notification-dialog.component.html
index 09e673bb4b..73618fd939 100644
--- a/ui-ngx/src/app/modules/home/pages/notification/template/template-notification-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/notification/template/template-notification-dialog.component.html
@@ -59,9 +59,9 @@
           <div class="tb-hint" translate>notification.at-least-one-should-be-selected</div>
           <section formGroupName="deliveryMethodsTemplates" class="delivery-methods-container">
             <section *ngFor="let deliveryMethods of notificationDeliveryMethods"
-                     class="delivery-method-container"
+                     class="tb-form-panel stroked"
                      [formGroupName]="deliveryMethods">
-              <mat-slide-toggle class="delivery-method" formControlName="enabled">
+              <mat-slide-toggle formControlName="enabled">
                 {{ notificationDeliveryMethodInfoMap.get(deliveryMethods).name | translate }}
               </mat-slide-toggle>
             </section>
diff --git a/ui-ngx/src/app/modules/home/pages/notification/template/template-notification-dialog.component.scss b/ui-ngx/src/app/modules/home/pages/notification/template/template-notification-dialog.component.scss
index 0e28d5d5e3..c8ed234490 100644
--- a/ui-ngx/src/app/modules/home/pages/notification/template/template-notification-dialog.component.scss
+++ b/ui-ngx/src/app/modules/home/pages/notification/template/template-notification-dialog.component.scss
@@ -68,23 +68,9 @@
 
   .delivery-methods-container {
     margin-bottom: 20px;
-    display: flex;
-    flex-wrap: wrap;
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, auto));
     gap: 8px;
-
-    .delivery-method-container {
-      display: inline-flex;
-      flex: 1 1 calc(50% - 8px);
-      max-width: calc(50% - 8px);
-      padding: 16px 12px;
-      border: 1px solid rgba(0, 0, 0, 0.1);
-      border-radius: 6px;
-
-      .delivery-method {
-        width: 100%;
-        height: 100%;
-      }
-    }
   }
 }
 
diff --git a/ui-ngx/src/app/shared/models/notification.models.ts b/ui-ngx/src/app/shared/models/notification.models.ts
index 44451bc800..185d9006db 100644
--- a/ui-ngx/src/app/shared/models/notification.models.ts
+++ b/ui-ngx/src/app/shared/models/notification.models.ts
@@ -380,9 +380,9 @@ export enum NotificationDeliveryMethod {
   WEB = 'WEB',
   MOBILE_APP = 'MOBILE_APP',
   SMS = 'SMS',
-  MICROSOFT_TEAMS = 'MICROSOFT_TEAMS',
-  SLACK = 'SLACK',
   EMAIL = 'EMAIL',
+  SLACK = 'SLACK',
+  MICROSOFT_TEAMS = 'MICROSOFT_TEAMS'
 }
 
 export interface NotificationDeliveryMethodInfo {