From e04b05f0e2173c65ae7f9072cbf22e3beed31b06 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adina=20=C8=9Aeudan?= <adina@devplant.ro>
Date: Wed, 25 May 2022 13:42:37 +0300
Subject: [PATCH] RED-4085: UI improvement for boolean system preferences

---
 .../system-preferences-form.component.html    | 38 ++++++++++---------
 1 file changed, 21 insertions(+), 17 deletions(-)

diff --git a/apps/red-ui/src/app/modules/admin/screens/general-config/system-preferences-form/system-preferences-form.component.html b/apps/red-ui/src/app/modules/admin/screens/general-config/system-preferences-form/system-preferences-form.component.html
index 88d9f982b..2ae3347fa 100644
--- a/apps/red-ui/src/app/modules/admin/screens/general-config/system-preferences-form/system-preferences-form.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/general-config/system-preferences-form/system-preferences-form.component.html
@@ -4,23 +4,27 @@
 <form (submit)="save()" *ngIf="form" [formGroup]="form">
     <div class="dialog-content">
         <div class="dialog-content-left">
-            <div *ngFor="let key of keys" class="iqser-input-group required">
-                <label [translate]="translations.label[key.name]"></label>
-                <input
-                    *ngIf="key.type === 'number'"
-                    [formControlName]="key.name"
-                    [name]="key.name"
-                    [placeholder]="translations.placeholder[key.name] | translate"
-                    type="number"
-                />
-                <input
-                    *ngIf="key.type === 'string'"
-                    [formControlName]="key.name"
-                    [name]="key.name"
-                    [placeholder]="translations.placeholder[key.name] | translate"
-                    type="text"
-                />
-                <mat-slide-toggle color="primary" [formControlName]="key.name" *ngIf="key.type === 'boolean'"></mat-slide-toggle>
+            <div *ngFor="let key of keys" [class.required]="key.type !== 'boolean'" class="iqser-input-group">
+                <ng-container *ngIf="key.type !== 'boolean'">
+                    <label [translate]="translations.label[key.name]"></label>
+                    <input
+                        *ngIf="key.type === 'number'"
+                        [formControlName]="key.name"
+                        [name]="key.name"
+                        [placeholder]="translations.placeholder[key.name] | translate"
+                        type="number"
+                    />
+                    <input
+                        *ngIf="key.type === 'string'"
+                        [formControlName]="key.name"
+                        [name]="key.name"
+                        [placeholder]="translations.placeholder[key.name] | translate"
+                        type="text"
+                    />
+                </ng-container>
+                <mat-slide-toggle *ngIf="key.type === 'boolean'" [formControlName]="key.name" color="primary">
+                    {{ translations.label[key.name] | translate }}
+                </mat-slide-toggle>
             </div>
         </div>
     </div>