add css warning color tenant configuration

frontend/src/app/core/model/tenant-configuaration/tenant-configuration.ts

@@ -76,6 +76,7 @@ export interface CssColorsTenantConfigurationPersist{
     primaryText?: string;
     secondaryText?: string;
     invertedBtnColor?: string;
+    warningColor?: string;
 }
 
 export interface DefaultUserLocaleTenantConfigurationPersist{

frontend/src/app/core/services/tenant/tenant-handling.service.ts

@@ -90,6 +90,8 @@ export class TenantHandlingService extends BaseService {
 			if (localStorage.getItem('primaryText')) document.documentElement.style.setProperty(`--primary-text`, localStorage.getItem('primaryText'));
 			if (localStorage.getItem('secondaryText')) document.documentElement.style.setProperty(`--secondary-text`, localStorage.getItem('secondaryText'));
 			if (localStorage.getItem('invertedBtnColor')) document.documentElement.style.setProperty(`--inverted-btn-color`, localStorage.getItem('invertedBtnColor'));
+
+			if (localStorage.getItem('warningColor')) document.documentElement.style.setProperty(`--warning-color`, localStorage.getItem('warningColor'));
 		}
 	}
 }

frontend/src/app/ui/admin/tenant-configuration/editor/css-colors/css-colors-editor.component.html

@@ -1,7 +1,7 @@
 <div *ngIf="formGroup" class="container-fluid css-colors">
 	<div class="row">
 		<div class="col-12">
-			<div class="row">
+			<div class="row" style="row-gap: 0.5rem">
 
 				<mat-form-field class="col-12 col-md-6">
 					<mat-label>{{'TENANT-CONFIGURATION-EDITOR.FIELDS.PRIMARY-COLOR' | translate}}</mat-label>
@@ -56,6 +56,21 @@
 					<mat-error *ngIf="formGroup.get('cssColors')?.get('secondaryText')?.hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
 					<mat-error *ngIf="formGroup.get('cssColors')?.get('secondaryText')?.hasError('invalidColor')">{{'GENERAL.VALIDATION.INVALID-COLOR' | translate}}</mat-error>
 				</mat-form-field>
+                <mat-form-field class="col-12 col-md-6">
+					<mat-label >
+                        {{'TENANT-CONFIGURATION-EDITOR.FIELDS.WARNING-COLOR' | translate}}
+                    </mat-label>
+					<input matInput [formControl]="formGroup.get('cssColors')?.get('warningColorInput')" required />
+					<ngx-colors
+						class="suffix"
+						matSuffix
+						ngx-colors-trigger
+						[formControl]="formGroup.get('cssColors')?.get('warningColor')"
+					></ngx-colors>
+					<mat-error *ngIf="formGroup.get('cssColors')?.get('warningColor')?.hasError('backendError')">{{formGroup.get('cssColors')?.get('invertedBtnColor')?.getError('backendError').message}}</mat-error>
+					<mat-error *ngIf="formGroup.get('cssColors')?.get('warningColor')?.hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
+					<mat-error *ngIf="formGroup.get('cssColors')?.get('warningColor')?.hasError('invalidColor')">{{'GENERAL.VALIDATION.INVALID-COLOR' | translate}}</mat-error>
+				</mat-form-field>
 				<mat-form-field class="col-12 col-md-6">
 					<mat-label>
                         <mat-icon aria-hidden [matTooltip]="'TENANT-CONFIGURATION-EDITOR.FIELDS.LINK-COLOR-HINT' | translate">

frontend/src/app/ui/admin/tenant-configuration/editor/css-colors/css-colors-editor.component.ts

@@ -19,7 +19,6 @@ import { BasePendingChangesComponent } from '@common/base/base-pending-changes.c
 import { Observable } from 'rxjs';
 import { TenantConfigurationType } from '@app/core/common/enum/tenant-configuration-type';
 import { HttpErrorResponse } from '@angular/common/http';
-import { ResponseErrorCode } from '@app/core/common/enum/respone-error-code';
 import { LoggingService } from '@app/core/services/logging/logging-service';
 import { AnalyticsService } from '@app/core/services/matomo/analytics-service';
 
@@ -154,6 +153,17 @@ export class CssColorsEditorComponent extends BasePendingChangesComponent implem
 				emitEvent: false,
 			});
 		});
+
+        this.formGroup.get('cssColors')?.get('warningColor').valueChanges.subscribe((color) => {
+			this.formGroup.get('cssColors')?.get('warningColorInput').setValue(color, {
+				emitEvent: false,
+			});
+		});
+        this.formGroup.get('cssColors')?.get('warningColorInput').valueChanges.subscribe((color) => {
+			this.formGroup.get('cssColors')?.get('warningColor').setValue(color, {
+				emitEvent: false,
+			});
+		});
 	}
 
 	getItem(successFunction: (item: TenantConfiguration) => void) {
@@ -214,6 +224,7 @@ export class CssColorsEditorComponent extends BasePendingChangesComponent implem
         localStorage.setItem('primaryText', formData?.cssColors?.primaryText);
         localStorage.setItem('secondaryText', formData?.cssColors?.secondaryText);
         localStorage.setItem('invertedBtnColor', formData?.cssColors?.invertedBtnColor);
+        localStorage.setItem('warningColor', formData?.cssColors?.warningColor);
 
 		this.tenantConfigurationService.persist(formData)
 			.pipe(takeUntil(this._destroyed)).subscribe(

frontend/src/app/ui/admin/tenant-configuration/editor/css-colors/css-colors-editor.model.ts

@@ -60,6 +60,7 @@ export class CssColorsTenantConfigurationEditorModel implements CssColorsTenantC
     primaryText: string;
     secondaryText: string;
     invertedBtnColor: string;
+    warningColor: string;
 
 	protected formBuilder: UntypedFormBuilder = new UntypedFormBuilder();
 
@@ -76,6 +77,7 @@ export class CssColorsTenantConfigurationEditorModel implements CssColorsTenantC
             this.primaryText = localStorage.getItem('primaryText') ?? '#ffffff';
             this.secondaryText = localStorage.getItem('secondaryText') ?? '#000000';
             this.invertedBtnColor = localStorage.getItem('invertedBtnColor') ?? '#ffffff';
+            this.warningColor = localStorage.getItem('warningColor') ?? '#ff4081';
 		}
 		return this;
 	}
@@ -108,6 +110,9 @@ export class CssColorsTenantConfigurationEditorModel implements CssColorsTenantC
 			secondaryTextInput: [{ value: this.secondaryText, disabled: disabled}, context.getValidation('secondaryTextInput').validators ],
 			primaryTextInput: [{ value: this.primaryText, disabled: disabled}, context.getValidation('primaryTextInput').validators ],
 			invertedBtnColorInput: [{ value: this.invertedBtnColor, disabled: disabled}, context.getValidation('invertedBtnColorInput').validators ],
+
+            warningColor: [{ value: this.warningColor, disabled: disabled }, context.getValidation('secondaryText').validators],
+			warningColorInput: [{ value: this.warningColor, disabled: disabled }, context.getValidation('invertedBtnColor').validators],
 		},
 		{ updateOn: "change" });
 
@@ -137,6 +142,8 @@ export class CssColorsTenantConfigurationEditorModel implements CssColorsTenantC
 		baseValidationArray.push({ key: 'primaryTextInput', validators: [validColorValidator()] });
 		baseValidationArray.push({ key: 'secondaryTextInput', validators: [validColorValidator()] });
 		baseValidationArray.push({ key: 'invertedBtnColorInput', validators: [validColorValidator()] });
+		baseValidationArray.push({ key: 'warningColor', validators: [validColorValidator()] });
+		baseValidationArray.push({ key: 'warningColorInput', validators: [validColorValidator()] });
 
 		baseContext.validation = baseValidationArray;
 		return baseContext;

frontend/src/assets/i18n/baq.json

@@ -479,6 +479,7 @@
             "SECONDARY-COLOR-TEXT": "Secondary Color Text",
             "INVERTED-BUTTON-COLOR": "Inverted Button Color",
             "INVERTED-BUTTON-HINT": "Background color for buttons whose text color is the selected Primary color",
+            "WARNING-COLOR": "Warning Color",
 			"DISABLE-SYSTEM-SOURCES": "Disable System Sources",
 			"DEPOSIT-PLUGINS": "Plugin",
 			"FILE-TRANSFORMER-PLUGINS": "Plugin",

frontend/src/assets/i18n/de.json

@@ -482,6 +482,7 @@
             "SECONDARY-COLOR-TEXT": "Secondary Color Text",
             "INVERTED-BUTTON-COLOR": "Inverted Button Color",
             "INVERTED-BUTTON-HINT": "Background color for buttons whose text color is the selected Primary color",
+            "WARNING-COLOR": "Warning Color",
 			"DISABLE-SYSTEM-SOURCES": "Disable System Sources",
 			"DEPOSIT-PLUGINS": "Plugin",
 			"FILE-TRANSFORMER-PLUGINS": "Plugin",

frontend/src/assets/i18n/en.json

@@ -488,6 +488,7 @@
             "SECONDARY-COLOR-TEXT": "Secondary Color Text",
             "INVERTED-BUTTON-COLOR": "Inverted Button Color",
             "INVERTED-BUTTON-HINT": "Background color for buttons whose text color is the selected Primary color",
+            "WARNING-COLOR": "Warning Color",
 			"DISABLE-SYSTEM-SOURCES": "Disable System Sources",
 			"DEPOSIT-PLUGINS": "Plugin",
 			"FILE-TRANSFORMER-PLUGINS": "Plugin",

frontend/src/assets/i18n/es.json

@@ -482,6 +482,7 @@
             "SECONDARY-COLOR-TEXT": "Secondary Color Text",
             "INVERTED-BUTTON-COLOR": "Inverted Button Color",
             "INVERTED-BUTTON-HINT": "Background color for buttons whose text color is the selected Primary color",
+            "WARNING-COLOR": "Warning Color",
 			"DISABLE-SYSTEM-SOURCES": "Disable System Sources",
 			"DEPOSIT-PLUGINS": "Plugin",
 			"FILE-TRANSFORMER-PLUGINS": "Plugin",

frontend/src/assets/i18n/gr.json

@@ -482,6 +482,7 @@
             "SECONDARY-COLOR-TEXT": "Secondary Color Text",
             "INVERTED-BUTTON-COLOR": "Inverted Button Color",
             "INVERTED-BUTTON-HINT": "Background color for buttons whose text color is the selected Primary color",
+            "WARNING-COLOR": "Warning Color",
 			"DISABLE-SYSTEM-SOURCES": "Disable System Sources",
 			"DEPOSIT-PLUGINS": "Plugin",
 			"FILE-TRANSFORMER-PLUGINS": "Plugin",

frontend/src/assets/i18n/hr.json

@@ -481,6 +481,7 @@
             "PRIMARY-COLOR-TEXT": "Primary Color Text",
             "INVERTED-BUTTON-COLOR": "Inverted Button Color",
             "INVERTED-BUTTON-HINT": "Background color for buttons whose text color is the selected Primary color",
+            "WARNING-COLOR": "Warning Color",
 			"DISABLE-SYSTEM-SOURCES": "Disable System Sources",
 			"DEPOSIT-PLUGINS": "Plugin",
 			"FILE-TRANSFORMER-PLUGINS": "Plugin",

frontend/src/assets/i18n/pl.json

@@ -482,6 +482,7 @@
             "SECONDARY-COLOR-TEXT": "Secondary Color Text",
             "INVERTED-BUTTON-COLOR": "Inverted Button Color",
             "INVERTED-BUTTON-HINT": "Background color for buttons whose text color is the selected Primary color",
+            "WARNING-COLOR": "Warning Color",
 			"DISABLE-SYSTEM-SOURCES": "Disable System Sources",
 			"DEPOSIT-PLUGINS": "Plugin",
 			"FILE-TRANSFORMER-PLUGINS": "Plugin",

frontend/src/assets/i18n/pt.json

@@ -481,6 +481,7 @@
             "SECONDARY-COLOR-TEXT": "Secondary Color Text",
             "INVERTED-BUTTON-COLOR": "Inverted Button Color",
             "INVERTED-BUTTON-HINT": "Background color for buttons whose text color is the selected Primary color",
+            "WARNING-COLOR": "Warning Color",
 			"DISABLE-SYSTEM-SOURCES": "Disable System Sources",
 			"DEPOSIT-PLUGINS": "Plugin",
 			"FILE-TRANSFORMER-PLUGINS": "Plugin",

frontend/src/assets/i18n/sk.json

@@ -482,6 +482,7 @@
             "SECONDARY-COLOR-TEXT": "Secondary Color Text",
             "INVERTED-BUTTON-COLOR": "Inverted Button Color",
             "INVERTED-BUTTON-HINT": "Background color for buttons whose text color is the selected Primary color",
+            "WARNING-COLOR": "Warning Color",
 			"DISABLE-SYSTEM-SOURCES": "Disable System Sources",
 			"DEPOSIT-PLUGINS": "Plugin",
 			"FILE-TRANSFORMER-PLUGINS": "Plugin",

frontend/src/assets/i18n/sr.json

@@ -482,6 +482,7 @@
             "SECONDARY-COLOR-TEXT": "Secondary Color Text",
             "INVERTED-BUTTON-COLOR": "Inverted Button Color",
             "INVERTED-BUTTON-HINT": "Background color for buttons whose text color is the selected Primary color",
+            "WARNING-COLOR": "Warning Color",
 			"DISABLE-SYSTEM-SOURCES": "Disable System Sources",
 			"DEPOSIT-PLUGINS": "Plugin",
 			"FILE-TRANSFORMER-PLUGINS": "Plugin",

frontend/src/assets/i18n/tr.json

@@ -482,6 +482,7 @@
             "SECONDARY-COLOR-TEXT": "Secondary Color Text",
             "INVERTED-BUTTON-COLOR": "Inverted Button Color",
             "INVERTED-BUTTON-HINT": "Background color for buttons whose text color is the selected Primary color",
+            "WARNING-COLOR": "Warning Color",
 			"DISABLE-SYSTEM-SOURCES": "Disable System Sources",
 			"DEPOSIT-PLUGINS": "Plugin",
 			"FILE-TRANSFORMER-PLUGINS": "Plugin",

frontend/src/styles.scss

@@ -36,7 +36,7 @@
     --secondary-text: #000000;
     --inverted-btn-color: #ffffff;
     
-    --warning-color: #f44336;
+    --warning-color: var(--mat-form-field-error-text-color); // #cf1407 for  better contrast
     --gray: #707070; //previously #848484
     --light-gray: #aaaaaa;
     --dark-gray: #212121;