[DSC-1872] Replaced 'ui-switch' in SystemWideAlertFormComponent

Author: Simone-Ramundi

src/app/system-wide-alert/alert-form/system-wide-alert-form.component.html

@@ -4,10 +4,11 @@ <h2 id="header">{{'system-wide-alert.form.header' | translate}}</h2>
         <div class="form-group">
             <div class="row mb-2">
                 <div class="col">
-                    <ui-switch [checkedLabel]="'system-wide-alert.form.label.active' | translate"
-                               [uncheckedLabel]="'system-wide-alert.form.label.inactive' | translate"
-                               [checked]="formActive.value"
-                               (change)="setActive($event)"></ui-switch>
+                  <ds-switch
+                    [options]="switchOptions"
+                    [selectedValue]="formActive.value"
+                    (selectedValueChange)="setActive($event)">
+                  </ds-switch>
                 </div>
             </div>
             <div class="row">
@@ -29,9 +30,14 @@ <h2 id="header">{{'system-wide-alert.form.header' | translate}}</h2>
     </div>
     <div class="row">
         <div class="col mb-2 d-flex align-items-end">
-            <ui-switch size="small"
-                       [checked]="counterEnabled$ |async"
-                       (change)="setCounterEnabled($event)"></ui-switch>
+          <label class="custom-control custom-switch">
+            <input type="checkbox"
+                   class="custom-control-input"
+                   id="customSwitchBitstream"
+                   [checked]="counterEnabled$ | async"
+                   (change)="setCounterEnabled($event.target.checked)">
+            <span class="custom-control-label"></span>
+          </label>
             <span class="ml-2">{{ 'system-wide-alert.form.label.countdownTo.enable' | translate }}</span>
         </div>
     </div>

src/app/system-wide-alert/alert-form/system-wide-alert-form.component.ts

@@ -14,6 +14,7 @@ import { NotificationsService } from '../../shared/notifications/notifications.s
 import { Router } from '@angular/router';
 import { RequestService } from '../../core/data/request.service';
 import { TranslateService } from '@ngx-translate/core';
+import { SwitchColor, SwitchOption } from '../../shared/switch/switch.component';
 
 
 /**
@@ -76,6 +77,13 @@ export class SystemWideAlertFormComponent implements OnInit {
    */
   previewDays: number;
 
+  /**
+   * The custom options for the 'ds-switch' component
+   */
+  switchOptions: SwitchOption[] = [
+    { value: true, labelColor: SwitchColor.Success, backgroundColor: SwitchColor.Success ,label: 'system-wide-alert.form.label.active' },
+    { value: false, label: 'system-wide-alert.form.label.inactive' },
+  ];
 
   constructor(
     protected systemWideAlertDataService: SystemWideAlertDataService,