From d1d5ad458c6058f09c6a7de9933f25b9484bdd43 Mon Sep 17 00:00:00 2001
From: mchouliara <mchouliara@cite.gr>
Date: Fri, 20 Sep 2024 15:55:07 +0300
Subject: [PATCH] add required text next to asterisks

---
 .../description-status-editor.component.html  |  5 ++--
 ...ion-template-editor-section.component.html |  4 +++-
 ...description-template-editor.component.html | 24 ++++++++++++++-----
 .../plan-status-editor.component.html         |  8 +++++--
 ...description-workflow-editor.component.html |  8 +++++--
 .../plan-workflow-editor.component.html       | 12 +++++++---
 .../editor/tenant-editor.component.html       |  4 +++-
 ...cription-base-fields-editor.component.html |  8 +++++--
 .../plan-clone-dialog.component.html          |  4 +++-
 .../plan-new-version-dialog.component.html    |  8 +++++--
 .../plan-editor.component.html                | 16 +++++++++----
 .../user-profile/user-profile.component.html  | 20 ++++++++++------
 frontend/src/styles.scss                      |  3 +++
 13 files changed, 90 insertions(+), 34 deletions(-)

diff --git a/frontend/src/app/ui/admin/description-status/editor/description-status-editor/description-status-editor.component.html b/frontend/src/app/ui/admin/description-status/editor/description-status-editor/description-status-editor.component.html
index c7a43d239..669928f4d 100644
--- a/frontend/src/app/ui/admin/description-status/editor/description-status-editor/description-status-editor.component.html
+++ b/frontend/src/app/ui/admin/description-status/editor/description-status-editor/description-status-editor.component.html
@@ -73,7 +73,8 @@
                                     <mat-card-content>
                                             <div class="col-12">
                                                 <mat-form-field class="w-100">
-                                                    <mat-label>{{'DESCRIPTION-STATUS-EDITOR.FIELDS.ROLES' | translate}}*</mat-label>
+                                                    <mat-label>{{'DESCRIPTION-STATUS-EDITOR.FIELDS.ROLES' | translate}}&nbsp;*
+                                                        <small class="required-text">{{'GENERAL.VALIDATION.REQUIRED' | translate }}</small></mat-label>
                                                     <mat-select [formControl]="editAuthenticationForm.controls.roles" [multiple]="true">
                                                         <mat-option *ngFor="let userRole of userRolesEnum" [value]="userRole">{{enumUtils.toAppRoleString(userRole)}}</mat-option>
                                                     </mat-select>
@@ -83,7 +84,7 @@
                                             </div>
                                             <div class="col-12">
                                                 <mat-form-field class="w-100">
-                                                    <mat-label>{{'DESCRIPTION-STATUS-EDITOR.FIELDS.PLAN-ROLES' | translate}}*</mat-label>
+                                                    <mat-label>{{'DESCRIPTION-STATUS-EDITOR.FIELDS.PLAN-ROLES' | translate}}&nbsp;*<small>{{'GENERAL.VALIDATION.REQUIRED' | translate }}</small></mat-label>
                                                     <mat-select [formControl]="editAuthenticationForm.controls.planRoles" [multiple]="true">
                                                         <mat-option *ngFor="let planRole of planRolesEnum" [value]="planRole">{{enumUtils.toPlanUserRoleString(planRole)}}</mat-option>
                                                     </mat-select>
diff --git a/frontend/src/app/ui/admin/description-template/editor/components/section/description-template-editor-section.component.html b/frontend/src/app/ui/admin/description-template/editor/components/section/description-template-editor-section.component.html
index 5ed520cb2..cc537ce77 100644
--- a/frontend/src/app/ui/admin/description-template/editor/components/section/description-template-editor-section.component.html
+++ b/frontend/src/app/ui/admin/description-template/editor/components/section/description-template-editor-section.component.html
@@ -1,6 +1,8 @@
 <div [formGroup]="form" class="row description-template-editor">
 	
-	<div class="heading col-12">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.SECTION-INFO.SECTION-NAME' | translate}} *</div>
+	<div class="heading col-12">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.SECTION-INFO.SECTION-NAME' | translate}} 
+        &nbsp;*<small class="required-text">{{'GENERAL.VALIDATION.REQUIRED' | translate }}</small>
+    </div>
 	<div class="hint col-12">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.SECTION-INFO.SECTION-NAME-HINT' | translate}}</div>
 	<mat-form-field class="col-12">
 		<input matInput type="text" [placeholder]="('DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.UNTITLED' | translate)+ ' '+ ('DESCRIPTION-TEMPLATE-EDITOR.STEPS.SECTION-INFO.SECTION' | translate)"formControlName="title">
diff --git a/frontend/src/app/ui/admin/description-template/editor/description-template-editor.component.html b/frontend/src/app/ui/admin/description-template/editor/description-template-editor.component.html
index 0871f4514..b414c20a5 100644
--- a/frontend/src/app/ui/admin/description-template/editor/description-template-editor.component.html
+++ b/frontend/src/app/ui/admin/description-template/editor/description-template-editor.component.html
@@ -36,7 +36,9 @@
 			<div class="col-9">
 				<div class="col">
 					<div class="col-12">
-						<div class="heading">1.1 {{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.DESCRIPTION-TEMPLATE-NAME'| translate}} *</div>
+						<div class="heading">1.1 {{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.DESCRIPTION-TEMPLATE-NAME'| translate}} 
+                            &nbsp;*<small class="required-text" class="required-text">{{'GENERAL.VALIDATION.REQUIRED' | translate }}</small>
+                        </div>
 						<div class="hint">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.DESCRIPTION-TEMPLATE-NAME-HINT'| translate}}</div>
 						<mat-form-field class="full-width basic-info-input">
 							<input matInput [formControl]="formGroup.get('label')" placeholder="{{'DESCRIPTION-TEMPLATE-EDITOR.FIELDS.TITLE' | translate}}">
@@ -45,7 +47,9 @@
 						</mat-form-field>
 					</div>
 					<div class="col-12">
-						<div class="heading">1.2 {{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.DESCRIPTION-TEMPLATE-CODE'| translate}} *</div>
+						<div class="heading">1.2 {{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.DESCRIPTION-TEMPLATE-CODE'| translate}}
+                            &nbsp;*<small class="required-text">{{'GENERAL.VALIDATION.REQUIRED' | translate }}</small>
+                        </div>
 						<div class="hint">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.DESCRIPTION-TEMPLATE-CODE-HINT'| translate}}</div>
 						<mat-form-field class="full-width basic-info-input">
 							<input matInput [formControl]="formGroup.get('code')" placeholder="{{'DESCRIPTION-TEMPLATE-EDITOR.FIELDS.CODE' | translate}}">
@@ -54,7 +58,9 @@
 						</mat-form-field>
 					</div>
 					<div class="col-12">
-						<div class="heading">1.3 {{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.DESCRIPTION-TEMPLATE-DESCRIPTION'| translate}} *</div>
+						<div class="heading">1.3 {{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.DESCRIPTION-TEMPLATE-DESCRIPTION'| translate}}
+                            &nbsp;*<small class="required-text">{{'GENERAL.VALIDATION.REQUIRED' | translate }}</small>
+                        </div>
 						<div class="hint">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.DESCRIPTION-TEMPLATE-DESCRIPTION-HINT'| translate}}</div>
 						<div class="full-width basic-info-input">
 							<rich-text-editor-component [form]="formGroup.get('description')" [placeholder]="'DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.DESCRIPTION-TEMPLATE-DESCRIPTION-PLACEHOLDER'" [wrapperClasses]="(formGroup.get('description').touched && formGroup.get('description').hasError('required')) ? 'required' : ''" [editable]="formGroup.controls['description'].status !== 'DISABLED'">
@@ -67,7 +73,9 @@
 					</div>
 
 					<div class="col-12">
-						<div class="heading">1.4 {{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.DESCRIPTION-TEMPLATE-TYPE'| translate}} *</div>
+						<div class="heading">1.4 {{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.DESCRIPTION-TEMPLATE-TYPE'| translate}} 
+                            &nbsp;*<small class="required-text">{{'GENERAL.VALIDATION.REQUIRED' | translate }}</small>
+                        </div>
 						<div class="hint">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.DESCRIPTION-TEMPLATE-TYPE-HINT'| translate}}</div>
 						<mat-form-field class="full-width basic-info-input">
 							<mat-label>{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.DESCRIPTION-TEMPLATE-SELECT-TYPE' | translate}}</mat-label>
@@ -78,7 +86,9 @@
 						</mat-form-field>
 					</div>
 					<div class="col-12">
-						<div class="heading">1.5 {{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.DESCRIPTION-TEMPLATE-LANGUAGE'| translate}} *</div>
+						<div class="heading">1.5 {{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.DESCRIPTION-TEMPLATE-LANGUAGE'| translate}} 
+                            &nbsp;*<small class="required-text">{{'GENERAL.VALIDATION.REQUIRED' | translate }}</small>
+                        </div>
 						<div class="hint">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.DESCRIPTION-TEMPLATE-LANGUAGE-HINT'| translate}}</div>
 						<mat-form-field class="full-width basic-info-input">
 							<mat-select [formControl]="formGroup.get('language')" placeholder="{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.DESCRIPTION-TEMPLATE-SELECT-LANGUAGE'| translate}}">
@@ -172,7 +182,9 @@
 									<formGroup [formGroup]="selectedTocEntry.form">
 										<div class="row">
 											<div class="col-12">
-												<div class="heading">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.PAGE-INFO.PAGE-NAME' | translate}} *</div>
+												<div class="heading">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.PAGE-INFO.PAGE-NAME' | translate}} 
+                                                    &nbsp;*<small class="required-text">{{'GENERAL.VALIDATION.REQUIRED' | translate }}</small>
+                                                </div>
 											</div>
 											<div class="col-12">
 												<div class="hint">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.PAGE-INFO.PAGE-NAME-HINT' | translate}}</div>
diff --git a/frontend/src/app/ui/admin/plan-status/editor/plan-status-editor/plan-status-editor.component.html b/frontend/src/app/ui/admin/plan-status/editor/plan-status-editor/plan-status-editor.component.html
index d24c9095c..ec2556240 100644
--- a/frontend/src/app/ui/admin/plan-status/editor/plan-status-editor/plan-status-editor.component.html
+++ b/frontend/src/app/ui/admin/plan-status/editor/plan-status-editor/plan-status-editor.component.html
@@ -73,7 +73,9 @@
                                         <mat-card-content>
                                             <div class="col-12">
                                                 <mat-form-field class="w-100">
-                                                    <mat-label>{{'PLAN-STATUS-EDITOR.FIELDS.ROLES' | translate}}*</mat-label>
+                                                    <mat-label>{{'PLAN-STATUS-EDITOR.FIELDS.ROLES' | translate}}
+                                                        &nbsp;*<small class="required-text">{{'GENERAL.VALIDATION.REQUIRED' | translate }}</small>
+                                                    </mat-label>
                                                     <mat-select [formControl]="editAuthenticationForm.controls.roles" [multiple]="true">
                                                         <mat-option *ngFor="let userRole of userRolesEnum" [value]="userRole">{{enumUtils.toAppRoleString(userRole)}}</mat-option>
                                                     </mat-select>
@@ -83,7 +85,9 @@
                                             </div>
                                             <div class="col-12">
                                                 <mat-form-field class="w-100">
-                                                    <mat-label>{{'PLAN-STATUS-EDITOR.FIELDS.PLAN-ROLES' | translate}}*</mat-label>
+                                                    <mat-label>{{'PLAN-STATUS-EDITOR.FIELDS.PLAN-ROLES' | translate}}
+                                                        &nbsp;*<small class="required-text">{{'GENERAL.VALIDATION.REQUIRED' | translate }}</small>
+                                                    </mat-label>
                                                     <mat-select [formControl]="editAuthenticationForm.controls.planRoles" [multiple]="true">
                                                         <mat-option *ngFor="let planRole of planRolesEnum" [value]="planRole">{{enumUtils.toPlanUserRoleString(planRole)}}</mat-option>
                                                     </mat-select>
diff --git a/frontend/src/app/ui/admin/tenant-configuration/editor/description-workflow/description-workflow-editor/description-workflow-editor.component.html b/frontend/src/app/ui/admin/tenant-configuration/editor/description-workflow/description-workflow-editor/description-workflow-editor.component.html
index 342e767a3..f1190dcfd 100644
--- a/frontend/src/app/ui/admin/tenant-configuration/editor/description-workflow/description-workflow-editor/description-workflow-editor.component.html
+++ b/frontend/src/app/ui/admin/tenant-configuration/editor/description-workflow/description-workflow-editor/description-workflow-editor.component.html
@@ -2,7 +2,9 @@
 	<div class="row">
 		<div class="col-12">
             <mat-form-field class="w-100">
-                <mat-label>{{'WORKFLOW-EDITOR.FIELDS.STARTING-STATUS' | translate}}*</mat-label>
+                <mat-label>{{'WORKFLOW-EDITOR.FIELDS.STARTING-STATUS' | translate}}
+                    &nbsp;*<small class="required-text">{{'GENERAL.VALIDATION.REQUIRED' | translate }}</small>
+                </mat-label>
                 <app-single-auto-complete 
                     [required]="true" 
                     [formControl]="definitionForm?.controls?.startingStatusId" 
@@ -35,7 +37,9 @@
                 </div>
                 <div class="col-12 col-lg-6">
                     <mat-form-field class="w-100">
-                        <mat-label>{{'WORKFLOW-EDITOR.FIELDS.FROM-STATUS' | translate}}*</mat-label>
+                        <mat-label>{{'WORKFLOW-EDITOR.FIELDS.FROM-STATUS' | translate}}
+                            &nbsp;*<small class="required-text">{{'GENERAL.VALIDATION.REQUIRED' | translate }}</small>
+                        </mat-label>
                         <app-single-auto-complete 
                             [required]="true" 
                             [formControl]="transitionForm?.controls?.fromStatusId" 
diff --git a/frontend/src/app/ui/admin/tenant-configuration/editor/plan-workflow/plan-workflow-editor/plan-workflow-editor.component.html b/frontend/src/app/ui/admin/tenant-configuration/editor/plan-workflow/plan-workflow-editor/plan-workflow-editor.component.html
index 458fd70d2..3c06ffd79 100644
--- a/frontend/src/app/ui/admin/tenant-configuration/editor/plan-workflow/plan-workflow-editor/plan-workflow-editor.component.html
+++ b/frontend/src/app/ui/admin/tenant-configuration/editor/plan-workflow/plan-workflow-editor/plan-workflow-editor.component.html
@@ -2,7 +2,9 @@
 	<div class="row">
 		<div class="col-12">
             <mat-form-field class="w-100">
-                <mat-label>{{'WORKFLOW-EDITOR.FIELDS.STARTING-STATUS' | translate}}*</mat-label>
+                <mat-label>{{'WORKFLOW-EDITOR.FIELDS.STARTING-STATUS' | translate}}
+                    &nbsp;*<small class="required-text">{{'GENERAL.VALIDATION.REQUIRED' | translate }}</small>
+                </mat-label>
                 <app-single-auto-complete 
                     [required]="true" 
                     [formControl]="definitionForm?.controls?.startingStatusId" 
@@ -35,7 +37,9 @@
                 </div>
                 <div class="col-12 col-lg-6">
                     <mat-form-field class="w-100">
-                        <mat-label>{{'WORKFLOW-EDITOR.FIELDS.FROM-STATUS' | translate}}*</mat-label>
+                        <mat-label>{{'WORKFLOW-EDITOR.FIELDS.FROM-STATUS' | translate}}
+                            &nbsp;*<small class="required-text">{{'GENERAL.VALIDATION.REQUIRED' | translate }}</small>
+                        </mat-label>
                         <app-single-auto-complete 
                             [required]="true" 
                             [formControl]="transitionForm?.controls?.fromStatusId" 
@@ -48,7 +52,9 @@
                 </div>
                 <div class="col-12 col-lg-6">
                     <mat-form-field class="w-100">
-                        <mat-label>{{'WORKFLOW-EDITOR.FIELDS.TO-STATUS' | translate}}*</mat-label>
+                        <mat-label>{{'WORKFLOW-EDITOR.FIELDS.TO-STATUS' | translate}}
+                            &nbsp;*<small class="required-text">{{'GENERAL.VALIDATION.REQUIRED' | translate }}</small>
+                        </mat-label>
                         <app-single-auto-complete 
                             [required]="true" 
                             [formControl]="transitionForm?.controls?.toStatusId" 
diff --git a/frontend/src/app/ui/admin/tenant/editor/tenant-editor.component.html b/frontend/src/app/ui/admin/tenant/editor/tenant-editor.component.html
index 0578ceb22..6bbd3e802 100644
--- a/frontend/src/app/ui/admin/tenant/editor/tenant-editor.component.html
+++ b/frontend/src/app/ui/admin/tenant/editor/tenant-editor.component.html
@@ -44,7 +44,9 @@
 								</mat-form-field>
 							</div>
 							<div class="col-12">
-								<h3>{{'TENANT-EDITOR.FIELDS.DESCRIPTION' | translate}} *</h3>
+								<h3>{{'TENANT-EDITOR.FIELDS.DESCRIPTION' | translate}} 
+                                    &nbsp;*<small class="required-text">{{'GENERAL.VALIDATION.REQUIRED' | translate }}</small>
+                                </h3>
 								<div class="col-12">
 									<rich-text-editor-component [form]="formGroup.get('description')" [placeholder]="'TENANT-EDITOR.FIELDS.DESCRIPTION-PLACEHOLDER'" [wrapperClasses]="(formGroup.get('description').touched && formGroup.get('description').hasError('required')) ? 'required' : ''" [editable]="formGroup.controls['description'].status !== 'DISABLED'">
 									</rich-text-editor-component>
diff --git a/frontend/src/app/ui/description/editor/description-base-fields-editor/description-base-fields-editor.component.html b/frontend/src/app/ui/description/editor/description-base-fields-editor/description-base-fields-editor.component.html
index 9cc7995f8..d0dca1d19 100644
--- a/frontend/src/app/ui/description/editor/description-base-fields-editor/description-base-fields-editor.component.html
+++ b/frontend/src/app/ui/description/editor/description-base-fields-editor/description-base-fields-editor.component.html
@@ -7,7 +7,9 @@
 		<!-- Title Field -->
 		<div class="row">
 			<div class="col-12">
-				<div class="heading">{{'DESCRIPTION-EDITOR.BASE-INFO.FIELDS.TITLE' | translate}}*</div>
+				<div class="heading">{{'DESCRIPTION-EDITOR.BASE-INFO.FIELDS.TITLE' | translate}}
+                    &nbsp;*<small class="required-text">{{'GENERAL.VALIDATION.REQUIRED' | translate }}</small>
+                </div>
 				<div class="title-form">
 					<mat-form-field class="w-100">
 						<input matInput placeholder="{{'DESCRIPTION-EDITOR.BASE-INFO.FIELDS.TITLE' | translate}}" type="text" name="label" formControlName="label" required>
@@ -45,7 +47,9 @@
 		<!-- Template Field -->
 		<div class="row">
 			<div class="col-12">
-				<div class="heading">{{'DESCRIPTION-EDITOR.BASE-INFO.FIELDS.DESCRIPTION-TEMPLATE' | translate}}*</div>
+				<div class="heading">{{'DESCRIPTION-EDITOR.BASE-INFO.FIELDS.DESCRIPTION-TEMPLATE' | translate}}&nbsp;*
+                    <small class="required-text">{{'GENERAL.VALIDATION.REQUIRED' | translate }}</small>
+                </div>
 				<div class="profile-form">
 					<mat-form-field class="w-100">
 						<mat-select placeholder="{{'DESCRIPTION-EDITOR.BASE-INFO.FIELDS.DESCRIPTION-TEMPLATE-PLACEHOLDER'| translate}}" [required]="true" [compareWith]="compareWith" [formControl]="formGroup.get('descriptionTemplateId')">
diff --git a/frontend/src/app/ui/plan/clone-dialog/plan-clone-dialog.component.html b/frontend/src/app/ui/plan/clone-dialog/plan-clone-dialog.component.html
index a256db761..c124dc4cc 100644
--- a/frontend/src/app/ui/plan/clone-dialog/plan-clone-dialog.component.html
+++ b/frontend/src/app/ui/plan/clone-dialog/plan-clone-dialog.component.html
@@ -8,7 +8,9 @@
 	<!-- Title Field -->
 	<div class="row">
 		<div class="col-12">
-			<div class="heading">{{'PLAN-CLONE-DIALOG.FIELDS.LABEL' | translate}}*</div>
+			<div class="heading">{{'PLAN-CLONE-DIALOG.FIELDS.LABEL' | translate}}
+                &nbsp;*<small class="required-text">{{'GENERAL.VALIDATION.REQUIRED' | translate }}</small>
+            </div>
 		</div>
 		<div class="col-12 title-form">
 			<mat-form-field class="w-100">
diff --git a/frontend/src/app/ui/plan/new-version-dialog/plan-new-version-dialog.component.html b/frontend/src/app/ui/plan/new-version-dialog/plan-new-version-dialog.component.html
index d189968ce..18ea5f0b3 100644
--- a/frontend/src/app/ui/plan/new-version-dialog/plan-new-version-dialog.component.html
+++ b/frontend/src/app/ui/plan/new-version-dialog/plan-new-version-dialog.component.html
@@ -8,7 +8,9 @@
 	<!-- Title Field -->
 	<div class="row">
 		<div class="col-12">
-			<div class="heading">{{'PLAN-NEW-VERSION-DIALOG.FIELDS.LABEL' | translate}}*</div>
+			<div class="heading">{{'PLAN-NEW-VERSION-DIALOG.FIELDS.LABEL' | translate}}
+                &nbsp;*<small class="required-text">{{'GENERAL.VALIDATION.REQUIRED' | translate }}</small>
+            </div>
 		</div>
 		<div class="col-12 title-form">
 			<mat-form-field class="w-100">
@@ -32,7 +34,9 @@
 	<!-- Blueprint field -->
 	<div class="row">
 		<div class="col-12">
-			<div class="heading">{{'PLAN-NEW-VERSION-DIALOG.FIELDS.BLUEPRINT' | translate}}*</div>
+			<div class="heading">{{'PLAN-NEW-VERSION-DIALOG.FIELDS.BLUEPRINT' | translate}}
+                &nbsp;*<small class="required-text">{{'GENERAL.VALIDATION.REQUIRED' | translate }}</small>
+            </div>
 		</div>
 		<div class="col-12 title-form">
 			<mat-form-field class="w-100">
diff --git a/frontend/src/app/ui/plan/plan-editor-blueprint/plan-editor.component.html b/frontend/src/app/ui/plan/plan-editor-blueprint/plan-editor.component.html
index 1cf2b38b0..0904f11c3 100644
--- a/frontend/src/app/ui/plan/plan-editor-blueprint/plan-editor.component.html
+++ b/frontend/src/app/ui/plan/plan-editor-blueprint/plan-editor.component.html
@@ -78,7 +78,7 @@
 				<div class="row" id="editor-form" *ngIf="this.step === 0 && this.isNew">
 					<div class="col-12 blueprint-section">
 						<div class="row">
-							<div class="heading2 col-12">{{'PLAN-EDITOR.FIELDS.TITLE' | translate}} *</div>
+							<div class="heading2 col-12">{{'PLAN-EDITOR.FIELDS.TITLE' | translate}}&nbsp;*<small class="required-text">{{'GENERAL.VALIDATION.REQUIRED' | translate }}</small></div>
 							<div class="col-12">
 								<mat-form-field class="w-100">
 									<mat-label>{{'PLAN-EDITOR.FIELDS.TITLE' | translate}}</mat-label>
@@ -96,7 +96,7 @@
 							</div>
 						</div>
 						<div class="plan-blueprint-form" style="margin-top: 3%;">
-							<div class="heading2">{{'PLAN-EDITOR.FIELDS.BLUEPRINT' | translate}} *</div>
+							<div class="heading2">{{'PLAN-EDITOR.FIELDS.BLUEPRINT' | translate}}&nbsp;*<small class="required-text">{{'GENERAL.VALIDATION.REQUIRED' | translate }}</small></div>
 							<mat-form-field class="w-100">
 								<mat-label>{{'PLAN-EDITOR.FIELDS.BLUEPRINT' | translate}}</mat-label>
 								<app-single-auto-complete [required]="false" [formControl]="formGroup.get('blueprint')" placeholder="{{'PLAN-EDITOR.PLACEHOLDER.BLUEPRINT' | translate}}" [configuration]="singleAutocompleteBlueprintConfiguration">
@@ -203,9 +203,15 @@
 												<div *ngFor="let field of section.fields; let j=index">
 													<div class="heading-wrapper row align-items-start" [id]="field.id">
 														<div class="col-auto">
-															<div class="heading" *ngIf="!field.label && field.category === planBlueprintSectionFieldCategoryEnum.System">{{i + 1}}.{{j + 1}} {{enumUtils.toPlanBlueprintSystemFieldTypeString(field.systemFieldType)}}<span *ngIf="field.required">*</span></div>
-															<div class="heading" *ngIf="!field.label && field.category === planBlueprintSectionFieldCategoryEnum.ReferenceType">{{i + 1}}.{{j + 1}} {{field.referenceType.name}}<span *ngIf="field.required">*</span></div>
-															<div class="heading" *ngIf="field.label">{{i + 1}}.{{j + 1}} {{field.label}}<span *ngIf="field.required">*</span></div>
+															<div class="heading" *ngIf="!field.label && field.category === planBlueprintSectionFieldCategoryEnum.System">{{i + 1}}.{{j + 1}} {{enumUtils.toPlanBlueprintSystemFieldTypeString(field.systemFieldType)}}
+                                                                <span *ngIf="field.required">&nbsp;*<small class="required-text">{{'GENERAL.VALIDATION.REQUIRED' | translate }}</small></span>
+                                                            </div>
+															<div class="heading" *ngIf="!field.label && field.category === planBlueprintSectionFieldCategoryEnum.ReferenceType">{{i + 1}}.{{j + 1}} {{field.referenceType.name}}
+                                                                <span *ngIf="field.required">&nbsp;*<small class="required-text">{{'GENERAL.VALIDATION.REQUIRED' | translate }}</small></span>
+                                                            </div>
+															<div class="heading" *ngIf="field.label">{{i + 1}}.{{j + 1}} {{field.label}}
+                                                                <span *ngIf="field.required">&nbsp;*<small class="required-text">{{'GENERAL.VALIDATION.REQUIRED' | translate }}</small></span>
+                                                            </div>
 														</div>
 														<div class="col-auto link-icon" style="margin-top: 1rem;">
 															<button *ngIf="!hildeLink" mat-icon-button type="button" matTooltip="{{ 'PLAN-EDITOR.ACTIONS.COPY-LINK' | translate }}" (click)="copyLink(field?.id)">
diff --git a/frontend/src/app/ui/user-profile/user-profile.component.html b/frontend/src/app/ui/user-profile/user-profile.component.html
index f33ce7d00..7154434ca 100644
--- a/frontend/src/app/ui/user-profile/user-profile.component.html
+++ b/frontend/src/app/ui/user-profile/user-profile.component.html
@@ -1,6 +1,6 @@
 <div class="profile">
 	<div class="container-fluid">
-		<div *ngIf="user | async  as userProfile; else loading" class="user-profile">
+		<div *ngIf="user | async  as userProfile" class="user-profile">
 			<div class="row user-profile-title">
 				<div class="col mb-2">
 					{{'USER-DIALOG.USER-PROFILE' | translate}}
@@ -40,7 +40,9 @@
 					<div class="row mb-5">
 						<div class="col">
 							<div class="row">
-								<div class="col-auto mb-1 field-title">{{'USER-PROFILE.SETTINGS.NAME' | translate}} *</div>
+								<div class="col-auto mb-1 field-title">{{'USER-PROFILE.SETTINGS.NAME' | translate}} 
+                                    &nbsp;*<small class="required-text">{{'GENERAL.VALIDATION.REQUIRED' | translate }}</small>
+                                </div>
 							</div>
 							<div class="row">
 								<div class="col name-form">
@@ -134,7 +136,9 @@
 					<div class="row mb-5">
 						<div class="col-12 col-lg-4">
 							<div class="row">
-								<div class="col-auto mb-1 field-title">{{'USER-PROFILE.SETTINGS.TIMEZONE' | translate}} *</div>
+								<div class="col-auto mb-1 field-title">{{'USER-PROFILE.SETTINGS.TIMEZONE' | translate}} 
+                                    &nbsp;*<small class="required-text">{{'GENERAL.VALIDATION.REQUIRED' | translate }}</small>
+                                </div>
 							</div>
 							<div class="row">
 								<div class="col timezone-form">
@@ -152,7 +156,9 @@
 						<!-- Culture -->
 						<div class="col-12 col-lg-4">
 							<div class="row">
-								<div class="col-auto mb-1 field-title">{{'USER-PROFILE.SETTINGS.CULTURE' | translate}} *</div>
+								<div class="col-auto mb-1 field-title">{{'USER-PROFILE.SETTINGS.CULTURE' | translate}} 
+                                    &nbsp;*<small class="required-text">{{'GENERAL.VALIDATION.REQUIRED' | translate }}</small>
+                                </div>
 							</div>
 							<div class="row">
 								<div class="col culture-form">
@@ -170,7 +176,9 @@
 						<!-- Language -->
 						<div class="col-12 col-lg-4">
 							<div class="row">
-								<div class="col-auto mb-1 field-title">{{'USER-PROFILE.SETTINGS.LANGUAGE' | translate}} *</div>
+								<div class="col-auto mb-1 field-title">{{'USER-PROFILE.SETTINGS.LANGUAGE' | translate}} 
+                                    &nbsp;*<small class="required-text">{{'GENERAL.VALIDATION.REQUIRED' | translate }}</small>
+                                </div>
 							</div>
 							<div class="row">
 								<div class="col language-form">
@@ -213,7 +221,5 @@
 				</div>
 			</div>
 		</div>
-		<ng-template #loading>
-		</ng-template>
 	</div>
 </div>
\ No newline at end of file
diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss
index 296583753..ce335e201 100644
--- a/frontend/src/styles.scss
+++ b/frontend/src/styles.scss
@@ -112,6 +112,9 @@ $mat-dark-theme: mat.m2-define-dark-theme((color: (primary: $mat-dark-theme-prim
 // Guided Tour style
 @import '../node_modules/ngx-guided-tour/scss/guided-tour-base-theme.scss';
 
+.required-text {
+    font-size: 13px;
+}
 //TODO: angular update @import '../node_modules/dragula/dist/dragula.css';
 /* in-flight clone */
 .gu-mirror {