major styling code refactor, remove frontend_e2e from angular.json

frontend/src/annotation-service/ui/admin/status/editor/status-editor.component.html

@@ -8,16 +8,16 @@
 				</div>
 
 				<div class="col-auto">
-					<button mat-button class="action-btn" (click)="cancel()" type="button">{{'ANNOTATION-SERVICE.STATUS-EDITOR.ACTIONS.CANCEL' | translate}}</button>
+					<button mat-button class="rounded-btn neutral" (click)="cancel()" type="button">{{'ANNOTATION-SERVICE.STATUS-EDITOR.ACTIONS.CANCEL' | translate}}</button>
 				</div>
 				<div class="col-auto " *ngIf="canDelete">
-					<button mat-button (click)="delete()" class="action-btn" type="button">
+					<button mat-button (click)="delete()" class="rounded-btn delete-inverted" type="button">
 						<mat-icon>delete</mat-icon>
 						{{'ANNOTATION-SERVICE.STATUS-EDITOR.ACTIONS.DELETE' | translate}}
 					</button>
 				</div>
 				<div class="col-auto" *ngIf="canSave">
-					<button mat-button class="action-btn" (click)="save(); formSubmit()">
+					<button mat-button class="rounded-btn primary" [disabled]="!formGroup?.touched" (click)="save(); formSubmit()">
 						<mat-icon>save</mat-icon>
 						{{'ANNOTATION-SERVICE.STATUS-EDITOR.ACTIONS.SAVE' | translate}}
 					</button>

frontend/src/annotation-service/ui/admin/status/editor/status-editor.component.scss

@@ -4,22 +4,3 @@
 		margin-top: 30px;
 	}
 }
-
-.action-btn {
-    border-radius: 30px;
-    background-color: var(--secondary-color);
-    border: 1px solid transparent;
-    padding-left: 2em;
-    padding-right: 2em;
-    box-shadow: 0px 3px 6px #1E202029;
-
-    transition-property: background-color, color;
-    transition-duration: 200ms;
-    transition-delay: 50ms;
-    transition-timing-function: ease-in-out;
-    &:disabled{
-        background-color: #CBCBCB;
-        color: #FFF;
-        border: 0px;
-    }
-}

frontend/src/annotation-service/ui/admin/status/listing/filters/status-listing-filters.component.html

@@ -42,12 +42,12 @@
 
 			<div class="row justify-content-end align-items-center mt-4 mb-1 gap-1-rem">
 				<div class="col-auto">
-					<button class="normal-btn-light-sm" (click)="filterMenuTrigger?.closeMenu()">
+					<button mat-button class="rounded-btn primary-inverted" (click)="filterMenuTrigger?.closeMenu()">
 						{{'ANNOTATION-SERVICE.STATUS-LISTING.FILTER.CANCEL' | translate}}
 					</button>
 				</div>
 				<div class="col-auto">
-					<button class="normal-btn-sm" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
+					<button mat-button class="rounded-btn primary" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
 						{{'ANNOTATION-SERVICE.STATUS-LISTING.FILTER.APPLY-FILTERS' | translate}}
 					</button>
 				</div>

frontend/src/annotation-service/ui/admin/status/listing/status-listing.component.html

@@ -7,7 +7,7 @@
 					<app-navigation-breadcrumb />
 				</div>
 				<div class="col-auto">
-					<button mat-raised-button class="create-btn"
+					<button mat-button class="rounded-btn secondary"
 						*ngIf="authService.hasPermission(authService.permissionEnum.EditStatus)"
 						[routerLink]="routerUtils.generateUrl(['/annotation-statuses/new'])">
 						<mat-icon>add</mat-icon>

frontend/src/annotation-service/ui/admin/status/listing/status-listing.component.scss

@@ -21,36 +21,3 @@
     z-index: 5;
   }
 }
-.create-btn {
-    border-radius: 30px;
-    background-color: var(--secondary-color);
-    padding-left: 2em;
-    padding-right: 2em;
-  
-    .button-text{
-      display: inline-block;
-    }
-}
-
-.dlt-btn {
-  color: rgba(0, 0, 0, 0.54);
-}
-
-.status-chip{
-  
-  border-radius: 20px;
-  padding-left: 1em;
-  padding-right: 1em;
-  padding-top: 0.2em;
-  font-size: .8em;
-}
-
-.status-chip-finalized{
-  color: #568b5a;
-  background: #9dd1a1 0% 0% no-repeat padding-box;
-}
-
-.status-chip-draft{
-  color: #00c4ff;
-  background: #d3f5ff 0% 0% no-repeat padding-box;
-}

frontend/src/app/ui/admin/description-status/editor/description-status-editor/description-status-editor.component.html

@@ -6,16 +6,16 @@
 					<app-navigation-breadcrumb />
 				</div>
 				<div class="col-auto">
-					<button mat-button class="rounded-btn cancel-btn" (click)="cancel()" type="button">{{'COMMONS.ACTIONS.CANCEL' | translate}}</button>
+					<button mat-button class="rounded-btn primary-inverted" (click)="cancel()" type="button">{{'COMMONS.ACTIONS.CANCEL' | translate}}</button>
 				</div>
                 <div class="col-auto" *ngIf="canDelete">
-                    <button mat-button class="rounded-btn delete-btn" type="button" (click)="delete()">
+                    <button mat-button class="rounded-btn delete-inverted" type="button" (click)="delete()">
                         <mat-icon>delete</mat-icon>
                         {{'COMMONS.ACTIONS.DELETE' | translate}}
                     </button>
                 </div>
                 <div class="col-auto" *ngIf="canSave">
-                    <button mat-button class="rounded-btn save-btn" (click)="formSubmit()" [disabled]="!formGroup.touched">
+                    <button mat-button class="rounded-btn primary" (click)="formSubmit()" [disabled]="!formGroup.touched">
                         <mat-icon>save</mat-icon>
                         {{'COMMONS.ACTIONS.SAVE' | translate}}
                     </button>

frontend/src/app/ui/admin/description-status/listing/description-status-listing-filters/description-status-listing-filters.component.html

@@ -42,12 +42,12 @@
 
 			<div class="row justify-content-end align-items-center mt-4 mb-1 gap-1-rem">
 				<div class="col-auto">
-					<button class="normal-btn-light-sm" (click)="filterMenuTrigger?.closeMenu()">
+					<button mat-button class="rounded-btn primary-inverted" (click)="filterMenuTrigger?.closeMenu()">
 						{{'PLAN-BLUEPRINT-LISTING.FILTER.CANCEL' | translate}}
 					</button>
 				</div>
 				<div class="col-auto">
-					<button class="normal-btn-sm" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
+					<button mat-button class="rounded-btn primary" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
 						{{'PLAN-BLUEPRINT-LISTING.FILTER.APPLY-FILTERS' | translate}}
 					</button>
 				</div>

frontend/src/app/ui/admin/description-status/listing/description-status-listing/description-status-listing.component.html

@@ -7,7 +7,7 @@
 				</div>
 
 				<div class="col-auto">
-					<button mat-raised-button class="create-btn" *ngIf="authService.hasPermission(authService.permissionEnum.EditDescriptionStatus)" [routerLink]="routerUtils.generateUrl(['/description-statuses/new'])">
+					<button mat-button class="rounded-btn secondary" *ngIf="authService.hasPermission(authService.permissionEnum.EditDescriptionStatus)" [routerLink]="routerUtils.generateUrl(['/description-statuses/new'])">
 						<mat-icon>add</mat-icon>
 						{{'DESCRIPTION-STATUS-LISTING.ACTIONS.CREATE-DESCRIPTION-STATUS' | translate}}
 					</button>

frontend/src/app/ui/admin/description-status/listing/description-status-listing/description-status-listing.component.scss

@@ -1,34 +0,0 @@
-.create-btn {
-	border-radius: 30px;
-	background-color: var(--secondary-color);
-	padding-left: 2em;
-	padding-right: 2em;
-
-	.button-text {
-		display: inline-block;
-	}
-}
-
-.status-chip {
-    width: fit-content;
-	border-radius: 20px;
-	padding-left: 1em;
-	padding-right: 1em;
-	padding-top: 0.2em;
-	font-size: .8em;
-}
-
-.status-chip-finalized {
-	color: #568b5a;
-	background: #9dd1a1 0% 0% no-repeat padding-box;
-}
-
-.status-chip-draft {
-	color: #00c4ff;
-	background: #d3f5ff 0% 0% no-repeat padding-box;
-}
-
-.status-chip-cancelled {
-    color: #cf1407;
-	background: #ffc8c5 0% 0% no-repeat padding-box;
-}

frontend/src/app/ui/admin/description-template/description-template-preview/description-template-preview-dialog.component.html

@@ -11,7 +11,7 @@
 	</div>
 	<div mat-mat-dialog-actions *ngIf="formGroup">
 		<div class="col-auto d-flex pb-4 pt-2">
-			<button mat-raised-button type="button" class="start-btn ml-auto" (click)="select()">{{'TYPES.EXTERNAL-DATASET-TYPE.SELECT' | translate}}</button>
+			<button mat-button type="button" class="rounded-btn primary ml-auto" (click)="select()">{{'TYPES.EXTERNAL-DATASET-TYPE.SELECT' | translate}}</button>
 		</div>
 	</div>
 </div>

frontend/src/app/ui/admin/description-template/description-template-preview/description-template-preview-dialog.component.scss

@@ -32,15 +32,5 @@
 		padding: 0 24px;
 	}
 
-	.start-btn {
-		background: var(--primary-color) 0% 0% no-repeat padding-box;
-		border: 1px solid var(--primary-color);
-		border-radius: 30px;
-		opacity: 1;
-	min-width: 101px;
-		height: 43px;
-		color: #ffffff;
-		font-weight: 500;
-	}
 }
 

frontend/src/app/ui/admin/description-template/editor/description-template-editor.component.html

@@ -107,7 +107,7 @@
 										<td>{{usersMap.get(user?.get('userId')?.value)?.name}}</td>
 										<td>{{enumUtils.toUserDescriptionTemplateRoleString(user?.get('role')?.value)}}</td>
 										<td *ngIf="!viewOnly">
-											<button mat-button class="delete-btn" (click)="verifyAndRemoveUser(i)" [matTooltip]="'DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.DESCRIPTION-TEMPLATE-REMOVE-USER'| translate"><mat-icon>person_remove</mat-icon></button>
+											<button mat-button class="rounded-btn delete-inverted" (click)="verifyAndRemoveUser(i)" [matTooltip]="'DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.DESCRIPTION-TEMPLATE-REMOVE-USER'| translate"><mat-icon>person_remove</mat-icon></button>
 										</td>
 									</tr>
 									<tr *ngIf="formGroup.get('users')?.controls?.length === 0">
@@ -186,7 +186,7 @@
 											</div>
                                             @if(!viewOnly &&!selectedTocEntry?.subEntries?.length){
                                                 <div class="col-12">
-                                                    <button class="create-section-btn" (click)="addNewEntry({parent:selectedTocEntry, childType: tocEntryEnumValues.Section})">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.PAGE-INFO.ACTIONS.CREATE-SECTION' | translate}}</button>
+                                                    <button mat-button class="rounded-btn secondary" (click)="addNewEntry({parent:selectedTocEntry, childType: tocEntryEnumValues.Section})">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.PAGE-INFO.ACTIONS.CREATE-SECTION' | translate}}</button>
                                                 </div>
                                                 <mat-error *ngIf="selectedTocEntry.form.invalid && showErrors">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.FIELD.ERROR-MESSAGES.FIELD-SELECT-AT-LEAST-ONE-REQUIRED' | translate}}</mat-error>
                                             }
@@ -264,13 +264,13 @@
 
 	<ng-container *ngIf="steps && stepper">
 		<div class="floating-btn">
-			<button *ngIf="stepper?.selectedIndex > 0" [@previous_btn] mat-button class="navigate-btn" (click)="stepper?.previous()">
+			<button *ngIf="stepper?.selectedIndex > 0" [@previous_btn] mat-button class="rounded-btn secondary stepper " (click)="stepper?.previous()">
 				<mat-icon class="back-icon pointer">chevron_left</mat-icon>
 				{{'DESCRIPTION-TEMPLATE-EDITOR.ACTIONS.PREVIOUS' | translate}}
 			</button>
-			<button *ngIf="stepper?.selectedIndex < (steps.length-1)" mat-button class="navigate-btn ml-3" [@next_btn] (click)="validateStep(stepper?.selectedIndex); stepper?.next();" [ngClass]="{'navigate-btn-disabled': !isStepCompleted(stepper?.selectedIndex)}">
+			<button *ngIf="stepper?.selectedIndex < (steps.length-1)" mat-button class="rounded-btn secondary  stepper ml-3" [@next_btn] (click)="validateStep(stepper?.selectedIndex); stepper?.next();" [disabled]="!isStepCompleted(stepper?.selectedIndex)">
 				<span>{{'DESCRIPTION-TEMPLATE-EDITOR.ACTIONS.NEXT' | translate}}</span>
-				<mat-icon class="back-icon pointer">chevron_right</mat-icon>
+				<mat-icon class="back-icon pointer" iconPositionEnd>chevron_right</mat-icon>
 			</button>
 		</div>
 	</ng-container>
@@ -280,8 +280,8 @@
 
 <ng-template #actions>
 	<div>
-		<button mat-raised-button class="template_action_btn mr-3" (click)="cancel()">{{'DESCRIPTION-TEMPLATE-EDITOR.ACTIONS.CLOSE' | translate}}</button>
+		<button mat-button class="rounded-btn primary-inverted mr-3" (click)="cancel()">{{'DESCRIPTION-TEMPLATE-EDITOR.ACTIONS.CLOSE' | translate}}</button>
-		<button *ngIf="!viewOnly" mat-raised-button class="template_action_btn save-btn" type="button">
+		<button *ngIf="!viewOnly" mat-button class="rounded-btn secondary save-btn" type="button">
 			<span class="d-flex flex-row row">
 				<span (click)="save(); formSubmit()" class="col">{{'DESCRIPTION-TEMPLATE-EDITOR.ACTIONS.SAVE' | translate}}</span>
 				<mat-divider [vertical]="true"></mat-divider>
@@ -295,7 +295,7 @@
 			<button mat-menu-item (click)="saveWithClose(false)" type="button">{{ 'DESCRIPTION-TEMPLATE-EDITOR.ACTIONS.SAVE-AND-CONTINUE' | translate }}</button>
 		</mat-menu>
 
-		<button *ngIf="!viewOnly && steps?.length-1 === stepper?.selectedIndex" [@finalize_btn] mat-button class="finalize-btn ml-3" [disabled]="!formGroup.valid" [class.invisible]="steps?.length-1 !== stepper?.selectedIndex" (click)="finalize()">
+		<button *ngIf="!viewOnly && steps?.length-1 === stepper?.selectedIndex" [@finalize_btn] mat-button class="rounded-btn primary ml-3" [disabled]="!formGroup.valid" [class.invisible]="steps?.length-1 !== stepper?.selectedIndex" (click)="finalize()">
 			{{'DESCRIPTION-TEMPLATE-EDITOR.ACTIONS.FINALIZE' | translate}}
 		</button>
 	</div>

frontend/src/app/ui/admin/description-template/editor/description-template-editor.component.scss

@@ -72,74 +72,11 @@
 	box-shadow: 1px 1px 6px #00000029;;
 }
 
-.navigate-btn {
-	border-radius: 30px;
-	background-color: var(--secondary-color);
-	border: 1px solid transparent;
-	padding-left: 2em;
-	padding-right: 2em;
-	box-shadow: 0px 3px 6px #1E202029;
-
-	transition-property: background-color, color;
-	transition-duration: 200ms;
-	transition-delay: 50ms;
-	transition-timing-function: ease-in-out;
-}
-.navigate-btn-disabled{
-background-color: #CBCBCB;
-color: #FFF;
-}
-
-.create-section-btn {
-	border-radius: 30px;
-	background-color: var(--secondary-color);
-	border: 1px solid transparent;
-	padding-left: 1em;
-	padding-right: 1em;
-	box-shadow: 0px 3px 6px #1E202029;
-	line-height: 1.7em;
-}
 
 
 $blue-color : var(--primary-color);
 $blue-color-light: #5cf7f2;
 
-.finalize-btn {
-	border-radius: 30px;
-	border: 1px solid var(--primary-color);
-	background: transparent;
-	padding-left: 2em;
-	padding-right: 2em;
-	box-shadow: 0px 3px 6px #1E202029;
-	color: var(--primary-color);
-}
-.template_action_btn{
-	border-radius: 30px;
-	border: 1px solid var(--primary-color);
-	background: transparent;
-	height: 2.5em;
-	min-width: 110px;
-	width: auto;
-	box-shadow: 0px 3px 6px #1E202029;
-	color: var(--primary-color);
-	flex: 0 0 auto;
-	&.save-btn{
-		background-color: var(--secondary-color);
-		border: 1px solid transparent;
-		box-shadow: 0px 3px 6px #1E202029;
-		color: #212121;
-
-		transition-property: background-color, color;
-		transition-duration: 200ms;
-		transition-delay: 50ms;
-		transition-timing-function: ease-in-out;
-	}
-	&:disabled{
-		background-color: #CBCBCB;
-		color: #FFF;
-		border: 0px;
-	}
-}
 
 
 

frontend/src/app/ui/admin/description-template/listing/description-template-listing.component.html

@@ -6,7 +6,7 @@
 					<app-navigation-breadcrumb />
 				</div>
 				<div class="col-auto" *ngIf="canCreateNew()">
-					<button mat-raised-button class="import-btn" (click)="import()">
+					<button mat-button class="rounded-btn import" (click)="import()">
 						<span class="button-text">
 							{{'DESCRIPTION-TEMPLATE-LISTING.IMPORT.UPLOAD-XML' | translate}}
 						</span>
@@ -14,7 +14,7 @@
 				</div>
 
 				<div class="col-auto" *ngIf="canCreateNew()">
-					<button mat-raised-button class="create-btn" *ngIf="authService.hasPermission(authService.permissionEnum.EditDescriptionTemplate)" [routerLink]="[routerUtils.generateUrl('/description-templates/new')]">
+					<button mat-button class="rounded-btn secondary" *ngIf="authService.hasPermission(authService.permissionEnum.EditDescriptionTemplate)" [routerLink]="[routerUtils.generateUrl('/description-templates/new')]">
 						<mat-icon>add</mat-icon>
 						{{'DESCRIPTION-TEMPLATE-LISTING.CREATE-DESCRIPTION-TEMPLATE' | translate}}
 					</button>

frontend/src/app/ui/admin/description-template/listing/description-template-listing.component.scss

@@ -36,42 +36,3 @@
 	background-color: #f6f6f6;
 	align-items: center;
 }
-
-.create-btn {
-	border-radius: 30px;
-	background-color: var(--secondary-color);
-	padding-left: 2em;
-	padding-right: 2em;
-
-	.button-text {
-		display: inline-block;
-	}
-}
-
-.import-btn {
-	background: #ffffff 0% 0% no-repeat padding-box;
-	border-radius: 30px;
-	padding-left: 2em;
-	padding-right: 2em;
-	color: #000;
-	border: 1px solid #000;
-}
-
-.status-chip {
-
-	border-radius: 20px;
-	padding-left: 1em;
-	padding-right: 1em;
-	padding-top: 0.2em;
-	font-size: .8em;
-}
-
-.status-chip-finalized {
-	color: #568b5a;
-	background: #9dd1a1 0% 0% no-repeat padding-box;
-}
-
-.status-chip-draft {
-	color: #00c4ff;
-	background: #d3f5ff 0% 0% no-repeat padding-box;
-}

frontend/src/app/ui/admin/description-template/listing/filters/description-template-listing-filters.component.html

@@ -42,12 +42,12 @@
 
 			<div class="row justify-content-end align-items-center mt-4 mb-1 gap-1-rem">
 				<div class="col-auto">
-					<button class="normal-btn-light-sm" (click)="filterMenuTrigger?.closeMenu()">
+					<button  mat-button class="rounded-btn primary-inverted" (click)="filterMenuTrigger?.closeMenu()">
 						{{'DESCRIPTION-TEMPLATE-LISTING.FILTER.CANCEL' | translate}}
 					</button>
 				</div>
 				<div class="col-auto">
-					<button class="normal-btn-sm" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
+					<button mat-button class="rounded-btn primary" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
 						{{'DESCRIPTION-TEMPLATE-LISTING.FILTER.APPLY-FILTERS' | translate}}
 					</button>
 				</div>

frontend/src/app/ui/admin/description-template/listing/import-description-template/import-description-template.dialog.component.html

@@ -4,7 +4,9 @@
 			<h4>{{ data.message }}</h4>
 		</div>
 		<div class="col-auto ml-auto">
-			<mat-icon class="close-btn" (click)="cancel()">close</mat-icon>
+            <button mat-icon-button tabindex="-1" (click)="cancel()">
+                <mat-icon>close</mat-icon>
+            </button>
 		</div>
 	</div>
 	<mat-dialog-content>
@@ -32,11 +34,11 @@
 				<input matInput placeholder="{{'DESCRIPTION-TEMPLATE-LISTING.IMPORT.UPLOAD-XML-NAME'| translate}}" name="descriptionBlueprintName" [(ngModel)]="data.name">
 			</mat-form-field>
 			<div class="col-auto">
-				<button mat-button type="button" class="cancel-btn" (click)="cancel()">{{ data.cancelButton }}</button>
+				<button mat-button type="button" class="rounded-btn neutral" (click)="cancel()">{{ data.cancelButton }}</button>
 			</div>
 			<div class="col"></div>
 			<div class="col-auto">
-				<button mat-button color="primary" class="next-btn" type="button" (click)="confirm()" [disabled]="!hasBlueprint()">{{ data.confirmButton }}</button>
+				<button mat-button color="primary" class="rounded-btn primary-inverted" type="button" (click)="confirm()" [disabled]="!hasBlueprint()">{{ data.confirmButton }}</button>
 			</div>
 		</div>
 	</mat-dialog-content>

frontend/src/app/ui/admin/description-template/listing/import-description-template/import-description-template.dialog.component.scss

@@ -3,40 +3,6 @@
 }
 
 
-.cancel-btn {
-	background: #ffffff 0% 0% no-repeat padding-box;
-	border: 1px solid #b5b5b5;
-	border-radius: 30px;
-min-width: 101px;
-	height: 43px;
-	color: #212121;
-	font-weight: 500;
-}
-
-.next-btn {
-	background: #ffffff 0% 0% no-repeat padding-box;
-	border: 1px solid var(--primary-color);
-	border-radius: 30px;
-	opacity: 1;
-min-width: 101px;
-	height: 43px;
-	color: var(--primary-color);
-	font-weight: 500;
-}
-
-.next-btn[disabled] {
-	width: 100px;
-	height: 43px;
-	background: #ffffff 0% 0% no-repeat padding-box;
-	border: 1px solid #b5b5b5;
-	border-radius: 30px;
-	opacity: 1;
-}
-
-.next-btn:not([disabled]):hover {
-	background-color: var(--primary-color);
-	color: #ffffff;
-}
 
 //ngx dropzone
 .drop-file {
@@ -96,7 +62,3 @@ min-width: 101px;
 	border: 1px solid var(--primary-color);
 	color: var(--primary-color);
 }
-
-.close-btn:hover{
-    cursor: pointer;
-}

frontend/src/app/ui/admin/description-types/editor/description-template-type-editor.component.html

@@ -8,22 +8,22 @@
 				</div>
 
 				<div class="col-auto">
-					<button mat-button class="action-btn" (click)="cancel()" type="button">{{'DESCRIPTION-TEMPLATE-TYPE-EDITOR.ACTIONS.CANCEL' | translate}}</button>
+					<button mat-button class="rounded-btn neutral" (click)="cancel()" type="button">{{'DESCRIPTION-TEMPLATE-TYPE-EDITOR.ACTIONS.CANCEL' | translate}}</button>
 				</div>
 				<div class="col-auto" *ngIf="canDelete">
-					<button mat-button (click)="delete()" class="action-btn" type="button">
+					<button mat-button (click)="delete()" class="rounded-btn delete-inverted" type="button">
 						<mat-icon>delete</mat-icon>
 						{{'DESCRIPTION-TEMPLATE-TYPE-EDITOR.ACTIONS.DELETE' | translate}}
 					</button>
 				</div>
 				<div class="col-auto" *ngIf="canFinalize">
-					<button mat-button class="action-btn" (click)="save(); finalize()">
+					<button mat-button class="rounded-btn secondary" (click)="save(); finalize()">
 						<mat-icon>save</mat-icon>
 						{{'DESCRIPTION-TEMPLATE-TYPE-EDITOR.ACTIONS.FINALIZE' | translate}}
 					</button>
 				</div>
 				<div class="col-auto" *ngIf="canSave">
-					<button mat-button class="action-btn" (click)="save(); formSubmit()">
+					<button mat-button class="rounded-btn primary" (click)="save(); formSubmit()">
 						<mat-icon>save</mat-icon>
 						{{'DESCRIPTION-TEMPLATE-TYPE-EDITOR.ACTIONS.SAVE' | translate}}
 					</button>

frontend/src/app/ui/admin/description-types/listing/description-template-type-listing.component.html

@@ -6,7 +6,7 @@
 					<app-navigation-breadcrumb />
 				</div>
 				<div class="col-auto">
-					<button mat-raised-button class="create-btn"
+					<button mat-button class="rounded-btn secondary"
 						*ngIf="authService.hasPermission(authService.permissionEnum.EditDescriptionTemplateType)"
 						[routerLink]="routerUtils.generateUrl(['/description-template-type/new'])">
 						<mat-icon>add</mat-icon>

frontend/src/app/ui/admin/description-types/listing/description-template-type-listing.component.scss

@@ -21,20 +21,7 @@
     z-index: 5;
   }
 }
-.create-btn {
-    border-radius: 30px;
-    background-color: var(--secondary-color);
-    padding-left: 2em;
-    padding-right: 2em;
 
-    .button-text{
-      display: inline-block;
-    }
-}
-
-.dlt-btn {
-  color: rgba(0, 0, 0, 0.54);
-}
 
 .status-chip{
   

frontend/src/app/ui/admin/description-types/listing/filters/description-template-type-listing-filters.component.html

@@ -42,12 +42,12 @@
 
 			<div class="row justify-content-end align-items-center mt-4 mb-1 gap-1-rem">
 				<div class="col-auto">
-					<button class="normal-btn-light-sm" (click)="filterMenuTrigger?.closeMenu()">
+					<button mat-button class="rounded-btn primary-inverted" (click)="filterMenuTrigger?.closeMenu()">
 						{{'DESCRIPTION-TEMPLATE-TYPE-LISTING.FILTER.CANCEL' | translate}}
 					</button>
 				</div>
 				<div class="col-auto">
-					<button class="normal-btn-sm" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
+					<button mat-button class="rounded-btn primary" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
 						{{'DESCRIPTION-TEMPLATE-TYPE-LISTING.FILTER.APPLY-FILTERS' | translate}}
 					</button>
 				</div>

frontend/src/app/ui/admin/entity-locks/filters/lock-listing-filters.component.html

@@ -42,12 +42,12 @@
 
 			<div class="row justify-content-between mt-4 mb-1 gap-1-rem">
 				<div class="col-auto">
-					<button class="normal-btn-light-sm" (click)="filterMenuTrigger?.closeMenu()">
+					<button mat-button class="rounded-btn primary-inverted" (click)="filterMenuTrigger?.closeMenu()">
 						{{'LOCK-LISTING.FILTER.CANCEL' | translate}}
 					</button>
 				</div>
 				<div class="col-auto">
-					<button class="normal-btn-sm" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
+					<button mat-button class="rounded-btn primary" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
 						{{'LOCK-LISTING.FILTER.APPLY-FILTERS' | translate}}
 					</button>
 				</div>

frontend/src/app/ui/admin/language/editor/language-editor.component.html

@@ -6,16 +6,16 @@
 					<app-navigation-breadcrumb />
 				</div>
 				<div class="col-auto">
-					<button mat-button class="action-btn" (click)="cancel()" type="button">{{'LANGUAGE-EDITOR.ACTIONS.CANCEL' | translate}}</button>
+					<button mat-button class="rounded-btn neutral" (click)="cancel()" type="button">{{'LANGUAGE-EDITOR.ACTIONS.CANCEL' | translate}}</button>
 				</div>
 				<div class="col-auto" *ngIf="!isNew && this.editorModel.belongsToCurrentTenant != false && canDelete">
-					<button mat-button class="action-btn" type="button" (click)="delete()">
+					<button mat-button class="rounded-btn delete-inverted" type="button" (click)="delete()">
 						<mat-icon>delete</mat-icon>
 						{{'LANGUAGE-EDITOR.ACTIONS.DELETE' | translate}}
 					</button>
 				</div>
 				<div class="col-auto" *ngIf="canSave">
-					<button mat-button class="action-btn" (click)="formSubmit()">
+					<button mat-button class="rounded-btn primary" (click)="formSubmit()">
 						<mat-icon>save</mat-icon>
 						{{'LANGUAGE-EDITOR.ACTIONS.SAVE' | translate}}
 					</button>

frontend/src/app/ui/admin/language/editor/language-editor.component.scss

@@ -18,22 +18,3 @@
 ::ng-deep .mat-checkbox-disabled.mat-checkbox-checked .mat-checkbox-background, .mat-checkbox-disabled.mat-checkbox-indeterminate .mat-checkbox-background {
     background-color: #b0b0b0;
 }
-
-.action-btn {
-	border-radius: 30px;
-	background-color: var(--secondary-color);
-	border: 1px solid transparent;
-	padding-left: 2em;
-	padding-right: 2em;
-	box-shadow: 0px 3px 6px #1E202029;
-
-	transition-property: background-color, color;
-	transition-duration: 200ms;
-	transition-delay: 50ms;
-	transition-timing-function: ease-in-out;
-  &:disabled{
-		background-color: #CBCBCB;
-		color: #FFF;
-		border: 0px;
-	}
-}

frontend/src/app/ui/admin/language/listing/filters/language-listing-filters.component.html

@@ -31,12 +31,12 @@
 
 			<div class="row justify-content-end align-items-center mt-4 mb-1 gap-1-rem">
 				<div class="col-auto">
-					<button class="normal-btn-light-sm" (click)="filterMenuTrigger?.closeMenu()">
+					<button mat-button class="rounded-btn primary-inverted" (click)="filterMenuTrigger?.closeMenu()">
 						{{'LANGUAGE-LISTING.FILTER.CANCEL' | translate}}
 					</button>
 				</div>
 				<div class="col-auto">
-					<button class="normal-btn-sm" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
+					<button cmat-button class="rounded-btn primary" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
 						{{'LANGUAGE-LISTING.FILTER.APPLY-FILTERS' | translate}}
 					</button>
 				</div>

frontend/src/app/ui/admin/language/listing/language-listing.component.html

@@ -6,7 +6,7 @@
 					<app-navigation-breadcrumb />
 				</div>
 				<div class="col-auto">
-					<button mat-raised-button class="create-btn"
+					<button mat-button class="rounded-btn secondary"
 						*ngIf="authService.hasPermission(authService.permissionEnum.EditLanguage)"
 						[routerLink]="routerUtils.generateUrl(['/languages/new'])">
 						<mat-icon>add</mat-icon>

frontend/src/app/ui/admin/language/listing/language-listing.component.scss

@@ -21,19 +21,6 @@
     z-index: 5;
   }
 }
-.create-btn {
-    border-radius: 30px;
-    background-color: var(--secondary-color);
-    padding-left: 2em;
-    padding-right: 2em;  
-    .button-text{
-      display: inline-block;
-    }
-}
-
-.dlt-btn {
-  color: rgba(0, 0, 0, 0.54);
-}
 
 .status-chip{
   

frontend/src/app/ui/admin/plan-blueprint/editor/plan-blueprint-editor.component.html

@@ -6,16 +6,16 @@
 					<app-navigation-breadcrumb />					
 				</div>
 				<div class="col-md-auto mb-md-0 col-12 mb-2" *ngIf="canDelete">
-					<button [disabled]="isLocked" mat-button class="action-btn" type="button" (click)="delete()">
+					<button [disabled]="isLocked" mat-button class="rounded-btn secondary" type="button" (click)="delete()">
 						<mat-icon>delete</mat-icon>
 						{{'PLAN-BLUEPRINT-EDITOR.ACTIONS.DELETE' | translate}}
 					</button>
 				</div>
 				<div class="col-md-auto col-12" *ngIf="canDownloadXML">
-					<button mat-button class="finalize-btn" (click)="downloadXML()" type="button">{{'PLAN-BLUEPRINT-EDITOR.ACTIONS.DOWNLOAD-XML' | translate }}</button>
+					<button mat-button class="rounded-btn secondary" (click)="downloadXML()" type="button">{{'PLAN-BLUEPRINT-EDITOR.ACTIONS.DOWNLOAD-XML' | translate }}</button>
 				</div>
 				<div *ngIf="!hideEditActions && canFinalize" class="col-auto">
-					<button mat-button class="finalize-btn" (click)="finalize()" [disabled]="this.isLocked || !this.isFormValid()" type="button">{{'PLAN-BLUEPRINT-EDITOR.ACTIONS.FINALIZE' | translate }}</button>
+					<button mat-button class="rounded-btn secondary" (click)="finalize()" [disabled]="this.isLocked || !this.isFormValid()" type="button">{{'PLAN-BLUEPRINT-EDITOR.ACTIONS.FINALIZE' | translate }}</button>
 				</div>
 			</div>
 			<form *ngIf="formGroup">
@@ -39,7 +39,7 @@
 								</mat-form-field>
 							</div>
 							<h4 class="col-12">{{'PLAN-BLUEPRINT-EDITOR.FIELDS.SECTIONS' | translate}}
-								<mat-error *ngIf="formGroup.get('definition').get('sections').hasError('planBlueprintSystemFieldRequired')"> {{'PLAN-BLUEPRINT-EDITOR.SYSTEM-FIELDS-REQUIRED' | translate}} </mat-error>
+								<mat-error *ngIf="formGroup?.get('definition')?.touched && formGroup.get('definition').get('sections').hasError('planBlueprintSystemFieldRequired')"> {{'PLAN-BLUEPRINT-EDITOR.SYSTEM-FIELDS-REQUIRED' | translate}} </mat-error>
 							</h4>
 							<div class="col-12" cdkDropList (cdkDropListDropped)="dropSections($event)">
 								<div *ngFor="let section of formGroup.get('definition').get('sections').controls; let sectionIndex=index;" class="row mb-3" cdkDrag [cdkDragDisabled]="formGroup.disabled">
@@ -78,7 +78,7 @@
 														</mat-form-field>
 													</div>
 													<div class="col-auto mb-3" *ngIf="!hideEditActions">
-														<button mat-button class="action-btn" type="button" (click)="addField(sectionIndex)">{{'PLAN-BLUEPRINT-EDITOR.ACTIONS.ADD-FIELD' | translate}}</button>
+														<button mat-button class="rounded-btn secondary" type="button" (click)="addField(sectionIndex)">{{'PLAN-BLUEPRINT-EDITOR.ACTIONS.ADD-FIELD' | translate}}</button>
 													</div>
 												</div>
 												<div class="row">
@@ -230,7 +230,7 @@
 																<mat-error *ngIf="section.get('hasTemplates').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
 															</div>
 															<div class="col-auto" *ngIf="!hideEditActions && section.get('hasTemplates').value">
-																<button mat-button class="action-btn" type="button" (click)="addDescriptionTemplate(sectionIndex)">{{'PLAN-BLUEPRINT-EDITOR.ACTIONS.ADD-DESCRIPTION-TEMPLATE' | translate}}</button>
+																<button mat-button class="rounded-btn secondary" type="button" (click)="addDescriptionTemplate(sectionIndex)">{{'PLAN-BLUEPRINT-EDITOR.ACTIONS.ADD-DESCRIPTION-TEMPLATE' | translate}}</button>
 															</div>
 														</div>
 													</div>
@@ -332,7 +332,7 @@
 							<div class="col-12">
 								<div class="row">
 									<div class="col-auto" *ngIf="!hideEditActions">
-										<button mat-button class="action-btn" type="button" (click)="addSection()">{{'PLAN-BLUEPRINT-EDITOR.ACTIONS.ADD-SECTION' | translate}}</button>
+										<button mat-button class="rounded-btn secondary" type="button" (click)="addSection()">{{'PLAN-BLUEPRINT-EDITOR.ACTIONS.ADD-SECTION' | translate}}</button>
 										<mat-error *ngIf="formGroup.get('definition').get('sections').dirty && formGroup.get('definition').get('sections').hasError('required')">{{'PLAN-BLUEPRINT-EDITOR.SECTIONS-REQUIRED' | translate}}</mat-error>
 										<mat-error *ngIf="formGroup.get('definition').get('sections').hasError('backendError')">{{formGroup.get('definition').get('sections').getError('backendError').message}}</mat-error>
 									</div>
@@ -341,11 +341,11 @@
 						</div>
 						<div class="row mt-4">
 							<div class="col-auto">
-								<button mat-button class="action-btn" (click)="cancel()" type="button">{{'PLAN-BLUEPRINT-EDITOR.ACTIONS.CANCEL' | translate}}</button>
+								<button mat-button class="rounded-btn secondary" (click)="cancel()" type="button">{{'PLAN-BLUEPRINT-EDITOR.ACTIONS.CANCEL' | translate}}</button>
 							</div>
 							<div class="col"></div>
 							<div class="col-auto" *ngIf="!hideEditActions">
-								<button mat-button class="action-btn" [disabled]="isLocked" type="submit" (click)="save(); formSubmit()">
+								<button mat-button class="rounded-btn secondary" [disabled]="isLocked" type="submit" (click)="save(); formSubmit()">
 									{{'PLAN-BLUEPRINT-EDITOR.ACTIONS.SAVE' | translate}}
 								</button>
 							</div>

frontend/src/app/ui/admin/plan-blueprint/editor/plan-blueprint-editor.component.scss

@@ -48,25 +48,6 @@
 	}
 }
 
-.action-btn {
-	border-radius: 30px;
-	background-color: var(--secondary-color);
-	border: 1px solid transparent;
-	padding-left: 2em;
-	padding-right: 2em;
-	box-shadow: 0px 3px 6px #1E202029;
-
-	transition-property: background-color, color;
-	transition-duration: 200ms;
-	transition-delay: 50ms;
-	transition-timing-function: ease-in-out;
-  &:disabled{
-		background-color: #CBCBCB;
-		color: #FFF;
-		border: 0px;
-	}
-}
-
 .dlt-section-btn {
 	margin: 0;
 	position: absolute;

frontend/src/app/ui/admin/plan-blueprint/listing/filters/plan-blueprint-listing-filters.component.html

@@ -41,12 +41,12 @@
 
 			<div class="row justify-content-end align-items-center mt-4 mb-1 gap-1-rem">
 				<div class="col-auto">
-					<button class="normal-btn-light-sm" (click)="filterMenuTrigger?.closeMenu()">
+					<button mat-button class="rounded-btn primary-inverted" (click)="filterMenuTrigger?.closeMenu()">
 						{{'PLAN-BLUEPRINT-LISTING.FILTER.CANCEL' | translate}}
 					</button>
 				</div>
 				<div class="col-auto">
-					<button class="normal-btn-sm" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
+					<button mat-button class="rounded-btn primary" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
 						{{'PLAN-BLUEPRINT-LISTING.FILTER.APPLY-FILTERS' | translate}}
 					</button>
 				</div>

frontend/src/app/ui/admin/plan-blueprint/listing/import-plan-blueprint/import-plan-blueprint.dialog.component.html

@@ -4,7 +4,9 @@
 			<h4>{{ data.message }}</h4>
 		</div>
 		<div class="col-auto ml-auto">
-			<mat-icon class="close-btn" (click)="cancel()">close</mat-icon>
+            <button mat-icon-button tabindex="-1" (click)="cancel()">
+                <mat-icon>close</mat-icon>
+            </button>
 		</div>
 	</div>
 	<mat-dialog-content>
@@ -32,11 +34,11 @@
 				<input matInput placeholder="{{'PLAN-BLUEPRINT-LISTING.IMPORT.UPLOAD-XML-NAME'| translate}}" name="descriptionBlueprintName" [(ngModel)]="data.name">
 			</mat-form-field>
 			<div class="col-auto">
-				<button mat-button type="button" class="cancel-btn" (click)="cancel()">{{ data.cancelButton }}</button>
+				<button mat-button type="button" class="rounded-btn neutral" (click)="cancel()">{{ data.cancelButton }}</button>
 			</div>
 			<div class="col"></div>
 			<div class="col-auto">
-				<button mat-button color="primary" class="next-btn" type="button" (click)="confirm()" [disabled]="!hasBlueprint()">{{ data.confirmButton }}</button>
+				<button mat-button color="primary" class="rounded-btn primary" type="button" (click)="confirm()" [disabled]="!hasBlueprint()">{{ data.confirmButton }}</button>
 			</div>
 		</div>
 	</mat-dialog-content>

frontend/src/app/ui/admin/plan-blueprint/listing/plan-blueprint-listing.component.html

@@ -6,7 +6,7 @@
 					<app-navigation-breadcrumb />
 				</div>
 				<div class="col-auto">
-					<button mat-raised-button class="import-btn" (click)="import()">
+					<button mat-button class="rounded-btn import" (click)="import()">
 						<span class="button-text">
 							{{'PLAN-BLUEPRINT-LISTING.IMPORT.UPLOAD-XML' | translate}}
 						</span>
@@ -14,7 +14,7 @@
 				</div>
 
 				<div class="col-auto">
-					<button mat-raised-button class="create-btn" *ngIf="authService.hasPermission(authService.permissionEnum.EditDescriptionTemplateType)" [routerLink]="routerUtils.generateUrl(['/plan-blueprints/new'])">
+					<button mat-button class="rounded-btn secondary" *ngIf="authService.hasPermission(authService.permissionEnum.EditDescriptionTemplateType)" [routerLink]="routerUtils.generateUrl(['/plan-blueprints/new'])">
 						<mat-icon>add</mat-icon>
 						{{'PLAN-BLUEPRINT-LISTING.CREATE-PLAN-BLUEPRINT' | translate}}
 					</button>

frontend/src/app/ui/admin/plan-blueprint/listing/plan-blueprint-listing.component.scss

@@ -37,26 +37,6 @@
 	align-items: center;
 }
 
-.create-btn {
-	border-radius: 30px;
-	background-color: var(--secondary-color);
-	padding-left: 2em;
-	padding-right: 2em;
-
-	.button-text {
-		display: inline-block;
-	}
-}
-
-.import-btn {
-	background: #ffffff 0% 0% no-repeat padding-box;
-	border-radius: 30px;
-	padding-left: 2em;
-	padding-right: 2em;
-	color: #000;
-	border: 1px solid #000;
-}
-
 .status-chip {
 
 	border-radius: 20px;

frontend/src/app/ui/admin/plan-status/editor/plan-status-editor/plan-status-editor.component.html

@@ -6,16 +6,16 @@
 					<app-navigation-breadcrumb />
 				</div>
 				<div class="col-auto">
-					<button mat-button class="rounded-btn cancel-btn" (click)="cancel()" type="button">{{'PLAN-STATUS-EDITOR.ACTIONS.CANCEL' | translate}}</button>
+					<button mat-button class="rounded-btn primary-inverted" (click)="cancel()" type="button">{{'PLAN-STATUS-EDITOR.ACTIONS.CANCEL' | translate}}</button>
 				</div>
                 <div class="col-auto" *ngIf="canDelete">
-                    <button mat-button class="rounded-btn delete-btn" type="button" (click)="delete()">
+                    <button mat-raised-button class="rounded-btn delete-inverted" type="button" (click)="delete()">
                         <mat-icon>delete</mat-icon>
                         {{'PLAN-STATUS-EDITOR.ACTIONS.DELETE' | translate}}
                     </button>
                 </div>
                 <div class="col-auto" *ngIf="canSave">
-                    <button mat-button class="rounded-btn save-btn" (click)="formSubmit()" [disabled]="!formGroup.touched">
+                    <button mat-button class="rounded-btn primary" (click)="formSubmit()" [disabled]="!formGroup.touched">
                         <mat-icon>save</mat-icon>
                         {{'PLAN-STATUS-EDITOR.ACTIONS.SAVE' | translate}}
                     </button>

frontend/src/app/ui/admin/plan-status/listing/plan-status-listing/plan-status-listing-filters/plan-status-listing-filters.component.html

@@ -41,12 +41,12 @@
 
 			<div class="row justify-content-end align-items-center mt-4 mb-1 gap-1-rem">
 				<div class="col-auto">
-					<button class="normal-btn-light-sm" (click)="filterMenuTrigger?.closeMenu()">
+					<button mat-button class="rounded-btn primary-inverted" (click)="filterMenuTrigger?.closeMenu()">
 						{{'PLAN-BLUEPRINT-LISTING.FILTER.CANCEL' | translate}}
 					</button>
 				</div>
 				<div class="col-auto">
-					<button class="normal-btn-sm" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
+					<button mat-button class="rounded-btn primary" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
 						{{'PLAN-BLUEPRINT-LISTING.FILTER.APPLY-FILTERS' | translate}}
 					</button>
 				</div>

frontend/src/app/ui/admin/plan-status/listing/plan-status-listing/plan-status-listing.component.html

@@ -7,7 +7,7 @@
 				</div>
 
 				<div class="col-auto">
-					<button mat-raised-button class="create-btn" *ngIf="authService.hasPermission(authService.permissionEnum.EditPlanStatus)" [routerLink]="routerUtils.generateUrl(['/plan-statuses/new'])">
+					<button mat-button class="rounded-btn secondary" *ngIf="authService.hasPermission(authService.permissionEnum.EditPlanStatus)" [routerLink]="routerUtils.generateUrl(['/plan-statuses/new'])">
 						<mat-icon>add</mat-icon>
 						{{'PLAN-STATUS-LISTING.ACTIONS.CREATE-PLAN-STATUS' | translate}}
 					</button>

frontend/src/app/ui/admin/plan-status/listing/plan-status-listing/plan-status-listing.component.scss

@@ -1,29 +0,0 @@
-.create-btn {
-	border-radius: 30px;
-	background-color: var(--secondary-color);
-	padding-left: 2em;
-	padding-right: 2em;
-
-	.button-text {
-		display: inline-block;
-	}
-}
-
-.status-chip {
-    width: fit-content;
-	border-radius: 20px;
-	padding-left: 1em;
-	padding-right: 1em;
-	padding-top: 0.2em;
-	font-size: .8em;
-}
-
-.status-chip-finalized {
-	color: #568b5a;
-	background: #9dd1a1 0% 0% no-repeat padding-box;
-}
-
-.status-chip-draft {
-	color: #00c4ff;
-	background: #d3f5ff 0% 0% no-repeat padding-box;
-}

frontend/src/app/ui/admin/prefilling-source/editor/prefilling-source-editor.component.html

@@ -7,16 +7,16 @@
 					<app-navigation-breadcrumb />
 				</div>
 				<div class="col-auto">
-					<button mat-button class="action-btn" (click)="cancel()" type="button">{{'PREFILLING-SOURCE-EDITOR.ACTIONS.CANCEL' | translate}}</button>
+					<button mat-button class="rounded-btn neutral" (click)="cancel()" type="button">{{'PREFILLING-SOURCE-EDITOR.ACTIONS.CANCEL' | translate}}</button>
 				</div>
 				<div class="col-auto" *ngIf="canDelete">
-					<button mat-button class="action-btn" type="button" (click)="delete()">
+					<button mat-button class="rounded-btn delete-inverted" type="button" (click)="delete()">
 						<mat-icon>delete</mat-icon>
 						{{'PREFILLING-SOURCE-EDITOR.ACTIONS.DELETE' | translate}}
 					</button>
 				</div>
 				<div class="col-auto" *ngIf="canSave">
-					<button mat-button class="action-btn" (click)="formSubmit()">
+					<button mat-button class="rounded-btn primary" (click)="formSubmit()">
 						<mat-icon>save</mat-icon>
 						{{'PREFILLING-SOURCE-EDITOR.ACTIONS.SAVE' | translate}}
 					</button>

frontend/src/app/ui/admin/prefilling-source/listing/filters/prefilling-source-listing-filters.component.html

@@ -31,12 +31,12 @@
 
 			<div class="row justify-content-end align-items-center mt-4 mb-1 gap-1-rem">
 				<div class="col-auto">
-					<button class="normal-btn-light-sm" (click)="filterMenuTrigger?.closeMenu()">
+					<button mat-button class="rounded-btn primary-inverted" (click)="filterMenuTrigger?.closeMenu()">
 						{{'PREFILLING-SOURCE-LISTING.FILTER.CANCEL' | translate}}
 					</button>
 				</div>
 				<div class="col-auto">
-					<button class="normal-btn-sm" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
+					<button mat-button class="rounded-btn primary" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
 						{{'PREFILLING-SOURCE-LISTING.FILTER.APPLY-FILTERS' | translate}}
 					</button>
 				</div>

frontend/src/app/ui/admin/prefilling-source/listing/prefilling-source-listing.component.html

@@ -7,7 +7,7 @@
 					<app-navigation-breadcrumb />
 				</div>
 				<div class="col-auto">
-					<button mat-raised-button class="create-btn"
+					<button mat-button class="rounded-btn secondary"
 						*ngIf="authService.hasPermission(authService.permissionEnum.EditPrefillingSource)"
 						[routerLink]="routerUtils.generateUrl(['/prefilling-sources/new'])">
 						<mat-icon>add</mat-icon>

frontend/src/app/ui/admin/prefilling-source/listing/prefilling-source-listing.component.scss

@@ -37,26 +37,6 @@
 	align-items: center;
 }
 
-.create-btn {
-	border-radius: 30px;
-	background-color: var(--secondary-color);
-	padding-left: 2em;
-	padding-right: 2em;
-
-	.button-text {
-		display: inline-block;
-	}
-}
-
-.import-btn {
-	background: #ffffff 0% 0% no-repeat padding-box;
-	border-radius: 30px;
-	padding-left: 2em;
-	padding-right: 2em;
-	color: #000;
-	border: 1px solid #000;
-}
-
 .status-chip {
 
 	border-radius: 20px;

frontend/src/app/ui/admin/reference-type/listing/filters/reference-type-listing-filters.component.html

@@ -31,12 +31,12 @@
 
 			<div class="row justify-content-end align-items-center mt-4 mb-1 gap-1-rem">
 				<div class="col-auto">
-					<button class="normal-btn-light-sm" (click)="filterMenuTrigger?.closeMenu()">
+					<button mat-button class="rounded-btn primary-inverted" (click)="filterMenuTrigger?.closeMenu()">
 						{{'REFERENCE-TYPE-LISTING.FILTER.CANCEL' | translate}}
 					</button>
 				</div>
 				<div class="col-auto">
-					<button class="normal-btn-sm" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
+					<button mat-button class="rounded-btn primary" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
 						{{'REFERENCE-TYPE-LISTING.FILTER.APPLY-FILTERS' | translate}}
 					</button>
 				</div>

frontend/src/app/ui/admin/reference-type/listing/reference-type-listing.component.html

@@ -7,7 +7,7 @@
 					<app-navigation-breadcrumb />
 				</div>
 				<div class="col-auto">
-					<button mat-raised-button class="create-btn"
+					<button mat-button class="rounded-btn secondary"
 						*ngIf="authService.hasPermission(authService.permissionEnum.EditReferenceType)"
 						[routerLink]="routerUtils.generateUrl(['/reference-type/new'])">
 						<mat-icon>add</mat-icon>

frontend/src/app/ui/admin/reference-type/listing/reference-type-listing.component.scss

@@ -21,20 +21,6 @@
     z-index: 5;
   }
 }
-.create-btn {
-    border-radius: 30px;
-    background-color: var(--secondary-color);
-    padding-left: 2em;
-    padding-right: 2em;
-  
-    .button-text{
-      display: inline-block;
-    }
-}
-
-.dlt-btn {
-  color: rgba(0, 0, 0, 0.54);
-}
 
 .status-chip{
   

frontend/src/app/ui/admin/reference/listing/filters/reference-listing-filters.component.html

@@ -53,12 +53,12 @@
 
 			<div class="row justify-content-end align-items-center mt-4 mb-1 gap-1-rem">
 				<div class="col-auto">
-					<button class="normal-btn-light-sm" (click)="filterMenuTrigger?.closeMenu()">
+					<button mat-button class="rounded-btn primary-inverted" (click)="filterMenuTrigger?.closeMenu()">
 						{{'REFERENCE-LISTING.FILTER.CANCEL' | translate}}
 					</button>
 				</div>
 				<div class="col-auto">
-					<button class="normal-btn-sm" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
+					<button mat-button class="rounded-btn primary" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
 						{{'REFERENCE-LISTING.FILTER.APPLY-FILTERS' | translate}}
 					</button>
 				</div>

frontend/src/app/ui/admin/reference/listing/reference-listing.component.html

@@ -7,7 +7,7 @@
 				<app-navigation-breadcrumb />
 			</div>
 			<div class="col-auto">
-				<button mat-raised-button class="create-btn"
+				<button mat-button class="rounded-btn secondary"
 					*ngIf="authService.hasPermission(authService.permissionEnum.EditReference)"
 					[routerLink]="routerUtils.generateUrl(['/references/new/'])">
 					<mat-icon>add</mat-icon>

frontend/src/app/ui/admin/reference/listing/reference-listing.component.scss

@@ -24,20 +24,7 @@
     z-index: 5;
   }
 }
-.create-btn {
-    border-radius: 30px;
-    background-color: var(--secondary-color);
-    padding-left: 2em;
-    padding-right: 2em;
 
-    .button-text{
-      display: inline-block;
-    }
-}
-
-.dlt-btn {
-  color: rgba(0, 0, 0, 0.54);
-}
 
 .status-chip{
   

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

@@ -60,11 +60,11 @@
 		</div>
 		<div class="col-12">
 			<div class="row actions-row">
-				<div class="ml-auto col-auto" *ngIf="editorModel.id"><button class="normal-btn-sm" (click)="delete()">
+				<div class="ml-auto col-auto" *ngIf="editorModel.id"><button mat-button class="rounded-btn primary-inverted" (click)="delete()">
 						{{'TENANT-CONFIGURATION-EDITOR.ACTIONS.RESET-TO-DEFAULT' | translate}}
 					</button>
 				</div>
-				<div class="ml-auto col-auto"><button class="normal-btn-sm" (click)="formSubmit()">
+				<div class="ml-auto col-auto"><button mat-button class="rounded-btn primary" (click)="formSubmit()">
 						{{'TENANT-CONFIGURATION-EDITOR.ACTIONS.SAVE' | translate}}
 					</button>
 				</div>

frontend/src/app/ui/admin/tenant-configuration/editor/default-user-locale/default-user-locale-editor.component.html

@@ -36,11 +36,11 @@
 		</div>
 		<div class="col-12">
 			<div class="row actions-row">
-				<div class="ml-auto col-auto" *ngIf="editorModel.id"><button class="normal-btn-sm" (click)="delete()">
+				<div class="ml-auto col-auto" *ngIf="editorModel.id"><button mat-button class="rounded-btn primary-inverted" (click)="delete()">
 						{{'TENANT-CONFIGURATION-EDITOR.ACTIONS.RESET-TO-DEFAULT' | translate}}
 					</button>
 				</div>
-				<div class="ml-auto col-auto"><button class="normal-btn-sm" (click)="formSubmit()">
+				<div class="ml-auto col-auto"><button mat-button class="rounded-btn primary" (click)="formSubmit()">
 						{{'TENANT-CONFIGURATION-EDITOR.ACTIONS.SAVE' | translate}}
 					</button>
 				</div>

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

@@ -94,11 +94,11 @@
 		</div>
 		<div class="col-12">
 			<div class="row actions-row">
-				<div class="ml-auto col-auto" *ngIf="editorModel.id"><button class="normal-btn-sm" (click)="delete()">
+				<div class="ml-auto col-auto" *ngIf="editorModel.id"><button mat-button class="rounded-btn primary-inverted" (click)="delete()">
 						{{'TENANT-CONFIGURATION-EDITOR.ACTIONS.RESET-TO-DEFAULT' | translate}}
 					</button>
 				</div>
-				<div class="ml-auto col-auto"><button class="normal-btn-sm" (click)="formSubmit()">
+				<div class="ml-auto col-auto"><button mat-button class="rounded-btn primary" (click)="formSubmit()">
 						{{'TENANT-CONFIGURATION-EDITOR.ACTIONS.SAVE' | translate}}
 					</button>
 				</div>

frontend/src/app/ui/admin/tenant-configuration/editor/description-workflow/description-workflow-editor/description-workflow-editor.component.html

@@ -67,14 +67,14 @@
 				<div class="col"></div>
                 @if(canDelete){
                     <div class="col-auto">
-                        <button class="normal-btn-sm" (click)="delete()">
+                        <button mat-button class="rounded-btn primary-inverted" (click)="delete()">
 						{{'TENANT-CONFIGURATION-EDITOR.ACTIONS.RESET-TO-DEFAULT' | translate}}
 					    </button>
 				    </div>
                 }
                 @if(canSave){
                     <div class="col-auto">
-                        <button class="normal-btn-sm" (click)="formSubmit()">
+                        <button mat-button class="rounded-btn primary" (click)="formSubmit()">
 						{{'TENANT-CONFIGURATION-EDITOR.ACTIONS.SAVE' | translate}}
 					    </button>
 				    </div>

frontend/src/app/ui/admin/tenant-configuration/editor/file-transformer/file-transformer-editor.component.html

@@ -78,11 +78,11 @@
 		<div class="col-12">
 			<div class="row actions-row">
 				<div class="col"></div>
-				<div class="col-auto" *ngIf="editorModel.id"><button class="normal-btn-sm" (click)="delete()">
+				<div class="col-auto" *ngIf="editorModel.id"><button mat-button class="rounded-btn primary-inverted" (click)="delete()">
 						{{'TENANT-CONFIGURATION-EDITOR.ACTIONS.RESET-TO-DEFAULT' | translate}}
 					</button>
 				</div>
-				<div class="col-auto"><button class="normal-btn-sm" (click)="formSubmit()">
+				<div class="col-auto"><button mat-button class="rounded-btn primary" (click)="formSubmit()">
 						{{'TENANT-CONFIGURATION-EDITOR.ACTIONS.SAVE' | translate}}
 					</button>
 				</div>

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

@@ -21,11 +21,11 @@
 		<div class="col-12">
 			<div class="row actions-row">
 				<div class="col"></div>
-				<div class="col-auto" *ngIf="editorModel.id"><button class="normal-btn-sm" (click)="delete()">
+				<div class="col-auto" *ngIf="editorModel.id"><button mat-button class="rounded-btn primary-inverted" (click)="delete()">
 						{{'TENANT-CONFIGURATION-EDITOR.ACTIONS.RESET-TO-DEFAULT' | translate}}
 					</button>
 				</div>
-				<div class="col-auto"><button class="normal-btn-sm" (click)="formSubmit()">
+				<div class="col-auto"><button mat-button class="rounded-btn primary" (click)="formSubmit()">
 						{{'TENANT-CONFIGURATION-EDITOR.ACTIONS.SAVE' | translate}}
 					</button>
 				</div>

frontend/src/app/ui/admin/tenant-configuration/editor/plan-workflow/plan-workflow-editor/plan-workflow-editor.component.html

@@ -67,14 +67,14 @@
 				<div class="col"></div>
                 @if(canDelete){
                     <div class="col-auto">
-                        <button class="normal-btn-sm" (click)="delete()">
+                        <button mat-button class="rounded-btn primary-inverted" (click)="delete()">
 						{{'TENANT-CONFIGURATION-EDITOR.ACTIONS.RESET-TO-DEFAULT' | translate}}
 					    </button>
 				    </div>
                 }
                 @if(canSave){
                     <div class="col-auto">
-                        <button class="normal-btn-sm" (click)="formSubmit()">
+                        <button mat-button class="rounded-btn primary" (click)="formSubmit()">
 						{{'TENANT-CONFIGURATION-EDITOR.ACTIONS.SAVE' | translate}}
 					    </button>
 				    </div>

frontend/src/app/ui/admin/tenant/listing/filters/tenant-listing-filters.component.html

@@ -31,12 +31,12 @@
 
 			<div class="row justify-content-end align-items-center mt-4 mb-1 gap-1-rem">
 				<div class="col-auto">
-					<button class="normal-btn-light-sm" (click)="filterMenuTrigger?.closeMenu()">
+					<button mat-button class="rounded-btn primary-inverted" (click)="filterMenuTrigger?.closeMenu()">
 						{{'TENANT-LISTING.FILTER.CANCEL' | translate}}
 					</button>
 				</div>
 				<div class="col-auto">
-					<button class="normal-btn-sm" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
+					<button mat-button class="rounded-btn primary" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
 						{{'TENANT-LISTING.FILTER.APPLY-FILTERS' | translate}}
 					</button>
 				</div>

frontend/src/app/ui/admin/tenant/listing/tenant-listing.component.html

@@ -8,7 +8,7 @@
 
 				</div>
 				<div class="col-auto">
-					<button mat-raised-button class="create-btn"
+					<button mat-button class="rounded-btn secondary"
 						*ngIf="authService.hasPermission(authService.permissionEnum.EditTenant)"
 						[routerLink]="routerUtils.generateUrl(['/tenants/new'])">
 						<mat-icon>add</mat-icon>

frontend/src/app/ui/admin/tenant/listing/tenant-listing.component.scss

@@ -24,20 +24,7 @@
     z-index: 5;
   }
 }
-.create-btn {
-    border-radius: 30px;
-    background-color: var(--secondary-color);
-    padding-left: 2em;
-    padding-right: 2em;
 
-    .button-text{
-      display: inline-block;
-    }
-}
-
-.dlt-btn {
-  color: rgba(0, 0, 0, 0.54);
-}
 
 .status-chip{
   

frontend/src/app/ui/admin/usage-limit/listing/filters/usage-limit-listing-filters.component.html

@@ -42,12 +42,12 @@
 
 			<div class="row justify-content-end align-items-center mt-4 mb-1 gap-1-rem">
 				<div class="col-auto">
-					<button class="normal-btn-light-sm" (click)="filterMenuTrigger?.closeMenu()">
+					<button mat-button class="rounded-btn primary-inverted" (click)="filterMenuTrigger?.closeMenu()">
 						{{'USAGE-LIMIT-LISTING.FILTER.CANCEL' | translate}}
 					</button>
 				</div>
 				<div class="col-auto">
-					<button class="normal-btn-sm" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
+					<button mat-button class="rounded-btn primary" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
 						{{'USAGE-LIMIT-LISTING.FILTER.APPLY-FILTERS' | translate}}
 					</button>
 				</div>

frontend/src/app/ui/admin/usage-limit/listing/usage-limit-listing.component.html

@@ -8,7 +8,7 @@
 
 				</div>
 				<div class="col-auto">
-					<button mat-raised-button class="create-btn"
+					<button mat-button class="rounded-btn secondary"
 						*ngIf="authService.hasPermission(authService.permissionEnum.EditUsageLimit)"
 						[routerLink]="routerUtils.generateUrl(['/usage-limits/new'])">
 						<mat-icon>add</mat-icon>

frontend/src/app/ui/admin/usage-limit/listing/usage-limit-listing.component.scss

@@ -21,20 +21,6 @@
     z-index: 5;
   }
 }
-.create-btn {
-    border-radius: 30px;
-    background-color: var(--secondary-color);
-    padding-left: 2em;
-    padding-right: 2em;
-  
-    .button-text{
-      display: inline-block;
-    }
-}
-
-.dlt-btn {
-  color: rgba(0, 0, 0, 0.54);
-}
 
 .status-chip{
   

frontend/src/app/ui/admin/user/listing/filters/user-listing-filters.component.html

@@ -47,12 +47,12 @@
 
 			<div class="row justify-content-end align-items-center mt-4 mb-1 gap-1-rem">
 				<div class="col-auto">
-					<button class="normal-btn-light-sm" (click)="filterMenuTrigger?.closeMenu()">
+					<button mat-button class="rounded-btn primary" (click)="filterMenuTrigger?.closeMenu()">
 						{{'USER-LISTING.FILTER.CANCEL' | translate}}
 					</button>
 				</div>
 				<div class="col-auto">
-					<button class="normal-btn-sm" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
+					<button mat-button class="rounded-btn primary-inverted" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
 						{{'USER-LISTING.FILTER.APPLY-FILTERS' | translate}}
 					</button>
 				</div>

frontend/src/app/ui/admin/user/listing/user-listing.component.html

@@ -7,12 +7,12 @@
 
 				</div>
 				<div class="col-auto">
-					<button mat-raised-button class="create-btn" (click)="invite()" *ngIf="hasTenantAdminMode">
+					<button mat-button class="rounded-btn primary" (click)="invite()" *ngIf="hasTenantAdminMode">
 						{{'USER-LISTING.ACTIONS.INVITE' | translate}}
 					</button>
 				</div>
 				<div class="col-auto">
-					<button mat-raised-button class="create-btn" (click)="export()" *ngIf="authService.hasPermission(authService.permissionEnum.ExportUsers)">
+					<button mat-button class="rounded-btn secondary" (click)="export()" *ngIf="authService.hasPermission(authService.permissionEnum.ExportUsers)">
 						<mat-icon>download</mat-icon>
 						{{'USER-LISTING.ACTIONS.EXPORT' | translate}}
 					</button>

frontend/src/app/ui/admin/user/listing/user-listing.component.scss

@@ -21,20 +21,6 @@
     z-index: 5;
   }
 }
-.create-btn {
-    border-radius: 30px;
-    background-color: var(--secondary-color);
-    padding-left: 2em;
-    padding-right: 2em;
-  
-    .button-text{
-      display: inline-block;
-    }
-}
-
-.dlt-btn {
-  color: rgba(0, 0, 0, 0.54);
-}
 
 .status-chip{
   

frontend/src/app/ui/annotations/annotation-dialog-component/annotation-dialog.component.html

@@ -13,8 +13,8 @@
 				<mat-icon>link</mat-icon>
 			</button>
 		</div>
-		<div class="col-auto pl-0 dense-4" (click)="close()">	
+		<div class="col-auto pl-0 dense-4" >	
-			<button mat-icon-button>
+			<button mat-icon-button (click)="close()">
 				<mat-icon>close</mat-icon>
             </button>
 		</div>
@@ -41,10 +41,10 @@
 						</mat-button-toggle-group>
 					</div>
 					<div class="col-auto ml-auto pr-1">
-						<button type="button" class="normal-btn-sm mt-2" (click)="createThread()">{{ 'ANNOTATION-DIALOG.THREADS.SEND' | translate }} <i class="fa fa-paper-plane ml-2"></i></button>
+						<button type="button" mat-button class="rounded-btn primary mt-2" (click)="createThread()">{{ 'ANNOTATION-DIALOG.THREADS.SEND' | translate }} <i class="fa fa-paper-plane ml-2"></i></button>
 					</div>
 					<div class="col-auto pl-1">
-						<button type="button" class="normal-btn-light-sm mt-2" (click)="close()">{{ 'ANNOTATION-DIALOG.THREADS.CANCEL' | translate }}</button>
+						<button type="button" mat-button class="rounded-btn primary-inverted mt-2" (click)="close()">{{ 'ANNOTATION-DIALOG.THREADS.CANCEL' | translate }}</button>
 					</div>
 				</div>	
 			</form>

frontend/src/app/ui/annotations/annotation-dialog-component/annotation-dialog.component.scss

@@ -17,18 +17,6 @@ $mat-card-header-size: 40px !default;
 	width: 8.44rem;
 }
 
-.close-icon {
-	cursor: pointer;
-	padding: .4rem;
-	width: auto !important;
-	height: auto !important;
-}
-
-.close-icon:hover {
-	background-color: #ECECED !important;
-	border-radius: 50%;
-}
-
 .reply-btn {
 	color: rgba(0, 0, 0, 0.6);
 }

frontend/src/app/ui/auth/login/merge-email-confirmation/merge-email-confirmation.component.html

@@ -14,7 +14,7 @@
         </div>
         <div class="row justify-content-center">
           <div class="col-auto mt-4">
-            <button type="button" class="normal-btn" (click)="onConfirm()">{{ 'MERGE-ACCOUNT.ACTIONS.CONFIRM' | translate }}</button>
+            <button type="button" mat-button class="rounded-btn primary" (click)="onConfirm()">{{ 'MERGE-ACCOUNT.ACTIONS.CONFIRM' | translate }}</button>
           </div>
         </div>
       </div>

frontend/src/app/ui/auth/login/unlink-email-confirmation/unlink-email-confirmation.component.html

@@ -15,7 +15,7 @@
         </div>
         <div class="row justify-content-center">
           <div class="col-auto mt-4">
-            <button type="button" class="normal-btn" (click)="onConfirm()">{{ 'UNLINK-ACCOUNT.ACTIONS.CONFIRM' | translate }}</button>
+            <button type="button" mat-button class="rounded-btn primary" (click)="onConfirm()">{{ 'UNLINK-ACCOUNT.ACTIONS.CONFIRM' | translate }}</button>
           </div>
         </div>
       </div>

frontend/src/app/ui/contact/contact-dialog/contact-dialog.component.html

@@ -3,8 +3,10 @@
 		<div mat-dialog-title class="col-auto">
 			{{'CONTACT.SUPPORT.SUBTITLE' | translate}}
 		</div>
-		<div class="col-auto ml-auto close-btn" (click)="close()">
+		<div class="col-auto ml-auto">
+            <button mat-icon-button (click)="close()" tabindex="-1">
                 <mat-icon>close</mat-icon>
+            </button>
 		</div>
 	</div>
 	<div mat-dialog-content class="row">

frontend/src/app/ui/contact/contact-dialog/contact-dialog.component.scss

@@ -8,7 +8,3 @@
 .full-width {
   width: 100%;
 }
-
-.close-btn {
-  cursor: pointer;
-}

frontend/src/app/ui/dashboard/dashboard.component.html

@@ -41,12 +41,12 @@
 								<div class="row d-flex align-items-center">
 									<div *ngIf="!this.hasPlans()" class="col-auto p-0 add-description-btn d-flex">
 										<div class="pr-2">
-											<button type="button" class="align-self-center normal-btn" (click)="openNewPlanDialog()">{{'DASHBOARD.START-YOUR-FIRST-PLAN' | translate}}</button>
+											<button type="button" mat-button class="align-self-center rounded-btn primary" (click)="openNewPlanDialog()">{{'DASHBOARD.START-YOUR-FIRST-PLAN' | translate}}</button>
 										</div>
 									</div>
 									<div *ngIf="this.hasPlans()" class="col-auto p-0 new-description-tour add-description-btn col-auto d-flex">
 										<div class="pr-2">
-											<button mat-raised-button type="button" class="align-self-center yellow-btn" (click)="addNewDescription()">{{'DASHBOARD.ACTIONS.ADD-DESCRIPTION' | translate}}</button>
+											<button mat-button type="button" class="align-self-center rounded-btn secondary" (click)="addNewDescription()">{{'DASHBOARD.ACTIONS.ADD-DESCRIPTION' | translate}}</button>
 										</div>
 									</div>
 									<span class="col-auto ml-auto">
@@ -57,13 +57,13 @@
 						</div>
 						<div *ngIf="this.hasPlans()" class="col">
 							<div class="latest-activity-title">{{'DASHBOARD.LATEST-ACTIVITY' | translate}}</div>
-							<mat-tab-group color="#00000" mat-stretch-tabs="false" mat-align-tabs="start" class="my-mat-tab remove-border-bottom" [selectedIndex]="indexFromCurrentType" (selectedTabChange)="currentType = $event.tab.ariaLabel">
+							<mat-tab-group dynamicHeight color="#00000" mat-stretch-tabs="false" mat-align-tabs="start" class="my-mat-tab remove-border-bottom" [selectedIndex]="indexFromCurrentType" (selectedTabChange)="currentType = $event.tab.ariaLabel">
 								<mat-tab aria-label="recent" label="{{'DASHBOARD.ALL' | translate}}">
 									<app-recent-edited-activity [isActive]="currentType == 'recent'" [includePlans]="true" [includeDescriptions]="true"></app-recent-edited-activity>
 								</mat-tab>
 								<mat-tab aria-label="drafts" label="{{'DASHBOARD.DRAFTS' | translate}}">
 									<app-recent-edited-activity [isActive]="currentType == 'drafts'" [includePlans]="true" [includeDescriptions]="true" [onlyDrafts]="true" type="drafts" [selectedType]="currentType"></app-recent-edited-activity>
-								</mat-tab>>
+								</mat-tab>
 								<mat-tab aria-label="plans" label="{{'DASHBOARD.PLANS' | translate}}">
 									<app-recent-edited-activity [isActive]="currentType == 'plans'" [includePlans]="true" type="plans" [selectedType]="currentType"></app-recent-edited-activity>
 								</mat-tab>

frontend/src/app/ui/dashboard/dashboard.component.scss

@@ -253,21 +253,6 @@ input[type="text"] {
 	color: var(--primary-color) !important;
 }
 
-.btn-load-more {
-	border: 2px solid #212121;
-	border-radius: 30px;
-	opacity: 1;
-	min-width: 132px;
-	width: auto;
-	height: 40px;
-	margin-top: 4.125rem;
-}
-
-.btn-load-more:hover {
-	background-color: black;
-	color: white;
-}
-
 .draft {
 	color: #f16868;
 }

frontend/src/app/ui/dashboard/recent-edited-activity/recent-edited-activity.component.html

@@ -33,18 +33,18 @@
 				<app-plan-listing-item-component *ngIf="item.plan" [showDivider]="i != (listingItems.length - 1)" [plan]="item.plan" [isPublic]="false"></app-plan-listing-item-component>
 				<app-description-listing-item-component *ngIf="item?.description" [showDivider]="i != (listingItems.length - 1)" [description]="item?.description" [isPublic]="false"  ></app-description-listing-item-component>
 			</div>
-			<div class="text-muted d-flex justify-content-center mt-5" *ngIf="listingItems && listingItems.length > 0 && this.lookup.page.offset >= currentPage*pageSize">
+			<div class="text-muted d-flex justify-content-center mt-5" *ngIf="!loading && listingItems && listingItems.length > 0 && this.lookup.page.offset >= currentPage*pageSize">
 				{{'GENERAL.ACTIONS.NO-MORE-AVAILABLE' | translate}}
 			</div>
 
 			<div class="row justify-content-center mt-5" *ngIf="listingItems?.length == 0 && onlyDescriptions && hasPlans">
 				<div class="col-auto p-0 add-description">
-						<button mat-raised-button type="button" class="yellow-btn" (click)="addDescription()">{{'DASHBOARD.ACTIONS.ADD-DESCRIPTION' | translate}}</button>
+						<button mat-button type="button" class="rounded-btn secondary" (click)="addDescription()">{{'DASHBOARD.ACTIONS.ADD-DESCRIPTION' | translate}}</button>
 				</div>
 			</div>
 
 			<div *ngIf="listingItems && listingItems.length > 0 && this.lookup.page.offset < currentPage*pageSize" class="d-flex justify-content-center">
-				<button type="button" class="btn-load-more" (click)="loadMore()">{{'GENERAL.ACTIONS.LOAD-MORE' | translate}}</button>
+				<button type="button" mat-button class="rounded-btn btn-load-more" (click)="loadMore()">{{'GENERAL.ACTIONS.LOAD-MORE' | translate}}</button>
 			</div>
 		</div>
 	</div>

frontend/src/app/ui/dashboard/recent-edited-activity/recent-edited-activity.component.scss

@@ -80,11 +80,9 @@ input[type="text"] {
 
 .btn-load-more {
 	border: 2px solid #212121;
-	border-radius: 30px;
 	opacity: 1;
 	min-width: 132px;
     width: auto;
-	height: 40px;
 	margin-top: 4.125rem;
 }
 
@@ -134,23 +132,3 @@ input[type="text"] {
 	opacity: 0.6;
   }
 
-
-.add-description {
-	margin-top: 2.5rem;
-	margin-bottom: 1.5rem;
-}
-
-.yellow-btn {
-	min-width: 162px;
-	height: 40px;
-	cursor: pointer;
-	background: var(--secondary-color) 0% 0% no-repeat padding-box;
-	border-radius: 30px;
-	opacity: 1;
-	border: none;
-	color: #000000;
-	opacity: 1;
-	line-height: 1;
-	font-size: 0.87rem;
-	padding: 0.62rem 1.87rem;
-}

frontend/src/app/ui/dashboard/recent-edited-activity/recent-edited-activity.component.ts

@@ -37,6 +37,8 @@ export class RecentEditedActivityComponent extends BaseComponent implements OnIn
 	
 	lookup: RecentActivityItemLookup = new RecentActivityItemLookup();
 
+    loading = false;
+
 	currentPage: number = 0;
 	pageSize: number = 5;
 	listingItems: RecentActivityItem[]= [];
@@ -198,10 +200,12 @@ export class RecentEditedActivityComponent extends BaseComponent implements OnIn
 			return;
 		}
 
+        this.loading = true;
 		this.dashboardService
 		.getMyRecentActivityItems(this.lookup)
 		.pipe(takeUntil(this._destroyed))
-		.subscribe(response => {
+		.subscribe({
+            next: (response) => {
                 if (response == null) return;
 
                 if (this.lookup.page.offset == 0) this.listingItems = [];
@@ -225,8 +229,11 @@ export class RecentEditedActivityComponent extends BaseComponent implements OnIn
     
                 if (this.lookup.page.offset != 0 && response.length > 0 && this.listingItems.length >= this.currentPage*this.pageSize) this._setPage(this.currentPage+1);
                 else this._resetPagination();
+
+                this.loading = false;
             },
-		error => this.httpErrorHandlingService.handleBackedRequestError(error));
+            error: (error) => {this.loading = false; this.httpErrorHandlingService.handleBackedRequestError(error)}
+        });
 	}
 	
 	private _resetPagination(): void {

frontend/src/app/ui/description/editor/description-editor.component.html

@@ -30,7 +30,7 @@
 								<div class="row h-100">
 
 									<div class="col-auto d-flex align-items-center">
-										<button *ngIf="formGroup.get('id').value" [disabled]="isDirty()" [matTooltipDisabled]="!isDirty()" mat-raised-button class="description-export-btn" type="button" [matMenuTriggerFor]="exportMenu" (click)="$event.stopPropagation();" [matTooltip]="'DESCRIPTION-EDITOR.ACTIONS.EXPORT.CAN-NOT-EXPORT' | translate">
+										<button *ngIf="formGroup.get('id').value" [disabled]="isDirty()" [matTooltipDisabled]="!isDirty()" mat-button class="rounded-btn neutral" type="button" [matMenuTriggerFor]="exportMenu" (click)="$event.stopPropagation();" [matTooltip]="'DESCRIPTION-EDITOR.ACTIONS.EXPORT.CAN-NOT-EXPORT' | translate">
 											{{ 'DESCRIPTION-EDITOR.ACTIONS.EXPORT.EXPORT' | translate }}
 											<mat-icon [disabled]="isDirty()" style="width: 14px;">expand_more</mat-icon>
 										</button>
@@ -46,12 +46,12 @@
 									<mat-divider *ngIf="formGroup.get('id').value && canEdit && (!viewOnly || (!isLocked && canEdit && !viewOnly) || isLocked || (hasReversableStatus() && !isLocked))" [vertical]="true" class="ml-2 mr-2"></mat-divider>
 
 									<div *ngIf="!isPristine() && !viewOnly" class="col-auto d-flex align-items-center pr-0">
-										<button [disabled]="saving" type="button" mat-raised-button class="description-discard-btn" (click)="discardChanges()">
+										<button [disabled]="saving" type="button" mat-button class="rounded-btn description-discard-btn" (click)="discardChanges()">
 											{{'DESCRIPTION-EDITOR.ACTIONS.DISCARD.DISCARD' | translate}}
 										</button>
 									</div>
 									<div class="col-auto d-flex align-items-center">
-										<button [disabled]="saving" *ngIf="canEdit && !isLocked && !viewOnly && hasReversableStatus() == false" mat-raised-button class="description-save-btn mr-2" type="button">
+										<button [disabled]="saving" *ngIf="canEdit && !isLocked && !viewOnly && hasReversableStatus() == false" mat-button class="rounded-btn neutral mr-2" type="button">
 											<span class="d-flex flex-row row">
 												<span (click)="!saving?formSubmit():null" class="col">{{ 'DESCRIPTION-EDITOR.ACTIONS.SAVE' | translate }}</span>
 												<mat-divider [vertical]="true"></mat-divider>
@@ -67,9 +67,9 @@
 											<button [disabled]="saving" mat-menu-item (click)="saveAndClose()" type="button">{{ 'DESCRIPTION-EDITOR.ACTIONS.SAVE-AND-CLOSE' | translate }}</button>
 											<button [disabled]="saving" mat-menu-item (click)="saveAndContinue()" type="button">{{ 'DESCRIPTION-EDITOR.ACTIONS.SAVE-AND-CONTINUE' | translate }}</button>
 										</mat-menu>
-										<button [disabled]="saving" *ngIf="canEdit && !isLocked && !viewOnly && hasReversableStatus() == false && canEdit" mat-raised-button class="description-save-btn mr-2" type="button" (click)="finalize()">{{ 'DESCRIPTION-EDITOR.ACTIONS.FINALIZE' | translate }}</button>
+										<button [disabled]="saving" *ngIf="canEdit && !isLocked && !viewOnly && hasReversableStatus() == false && canEdit" mat-button class="rounded-btn neutral mr-2" type="button" (click)="finalize()">{{ 'DESCRIPTION-EDITOR.ACTIONS.FINALIZE' | translate }}</button>
-										<button [disabled]="saving" *ngIf="isLocked" mat-raised-button disabled class="description-save-btn cursor-default" type="button">{{ 'PLAN-OVERVIEW.LOCKED' | translate}}</button>
+										<button [disabled]="saving" *ngIf="isLocked" mat-button disabled class="rounded-btn neutral cursor-default" type="button">{{ 'PLAN-OVERVIEW.LOCKED' | translate}}</button>
-										<button [disabled]="saving" *ngIf="hasReversableStatus() && !isLocked && canEdit" mat-raised-button class="description-save-btn mr-2" (click)="reverse()" type="button">{{ 'DESCRIPTION-EDITOR.ACTIONS.REVERSE' | translate }}</button>
+										<button [disabled]="saving" *ngIf="hasReversableStatus() && !isLocked && canEdit" mat-button class="rounded-btn neutral mr-2" (click)="reverse()" type="button">{{ 'DESCRIPTION-EDITOR.ACTIONS.REVERSE' | translate }}</button>
 									</div>
 								</div>
 							</div>
@@ -131,29 +131,26 @@
 							<div class="col-12">
 								<div class="row mt-3 stepper-actions justify-content-center">
 									<div class="col-auto mb-1">
-										<div mat-raised-button type="button" class="previous stepper-btn mr-2" [ngClass]="{'previous-disabled': reachedBase}" (click)="previousStep()">
+										<button mat-button type="button" class="rounded-btn neutral stepper mr-2" [ngClass]="{'previous-disabled': reachedBase}" (click)="previousStep()">
 											<span class="material-icons">chevron_left</span>
 											<div>{{'DESCRIPTION-EDITOR.TOC.PREVIOUS' | translate}}</div>
-										</div>
-									</div>
-
-									<div *ngIf="!reachedLast && formGroup.get('descriptionTemplateId').value" class="col-auto mb-1">
-										<div mat-raised-button type="button" class="stepper-btn description-next ml-auto" (click)="nextStep()">
-											<div>{{'DESCRIPTION-EDITOR.TOC.NEXT' | translate}}</div>
-											<span class="material-icons">chevron_right</span>
-										</div>
-									</div>
-									<div *ngIf="!formGroup.get('descriptionTemplateId').value" class="col-auto mb-1">
-										<div mat-raised-button type="button" class="stepper-btn description-next next-disabled ml-auto">
-											<div>{{'DESCRIPTION-EDITOR.TOC.NEXT' | translate}}</div>
-											<span class="material-icons">chevron_right</span>
-										</div>
-									</div>
-									<div *ngIf="reachedLast && !isLocked && formGroup.get('descriptionTemplateId').value && !viewOnly" class="col-auto mb-1">
-										<button [disabled]="saving" (click)="saveAndClose()" mat-raised-button type="button" class="col-auto stepper-btn add-description-btn ml-auto">
-											{{ 'DESCRIPTION-EDITOR.ACTIONS.SAVE-AND-CLOSE' | translate }}
 										</button>
 									</div>
+                                    <div class="col-auto mb-1">
+                                        @if(reachedLast){
+                                            @if(!isLocked && formGroup.get('descriptionTemplateId').value && !viewOnly) {
+                                                <button mat-button [disabled]="saving" (click)="saveAndClose()" mat-button type="button" class="rounded-btn secondary ml-auto">
+                                                    {{ 'DESCRIPTION-EDITOR.ACTIONS.SAVE-AND-CLOSE' | translate }}
+                                                </button>
+                                            }
+                                        }@else{
+                                            <button mat-button type="button" class="rounded-btn secondary stepper ml-auto" (click)="nextStep()" [disabled]="!formGroup.get('descriptionTemplateId').value">
+                                                <div>{{'DESCRIPTION-EDITOR.TOC.NEXT' | translate}}</div>
+                                                <span class="material-icons" iconPositionEnd>chevron_right</span>
+                                            </button>
+                                        }
+                                    </div>
+
 								</div>
 								<div class="row mb-4 mt-4" *ngIf="formGroup && !viewOnly">
 									<div class="col-12">

frontend/src/app/ui/description/editor/description-editor.component.scss

@@ -58,7 +58,7 @@
     text-transform: uppercase;
   }
 
-  .export-btn {
+  .stepper-btn {
     padding-right: 6px;
   }
 
@@ -141,57 +141,16 @@
     white-space: nowrap;
   }
 
-  .discard-btn {
-    background: transparent;
-    border: 1px solid #ffffff;
-    color: white;
-    border-radius: 30px;
-    opacity: 1;
-    width: 110px;
-    height: 40px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-
-  .save-btn {
-    background: #ffffff 0% 0% no-repeat padding-box;
-    border-radius: 30px;
-    opacity: 1;
-    width: auto;
-    min-width: 110px;
-    height: 40px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    font-weight: 700;
-    color: var(--primary-color);
-  }
 
   .description-discard-btn {
     border: 1px solid #212121;
-    border-radius: 30px;
-    opacity: 1;
     background-color: transparent;
     font-weight: 700;
-    width: 110px;
-    height: 40px;
     display: flex;
     justify-content: center;
     align-items: center;
   }
 
-  .description-save-btn, .description-export-btn {
-    background: #ffffff 0% 0% no-repeat padding-box;
-    border-radius: 30px;
-    opacity: 1;
-    width: auto;
-    min-width: 110px;
-    height: 40px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
 
   .description-to-plan {
     display: flex;
@@ -361,17 +320,6 @@
 	margin-bottom: 0.5rem;
   }
 
-  .stepper-btn {
-	border-radius: 30px;
-	opacity: 1;
-	width: 154px;
-	height: 40px;
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	font-size: 14px;
-  }
-
   .previous {
 	color: #212121;
 	background: #f5f5f5 0% 0% no-repeat padding-box;
@@ -381,15 +329,6 @@
 	cursor: pointer;
   }
 
-  .add-description-btn {
-	background: var(--secondary-color) 0% 0% no-repeat padding-box;
-	box-shadow: 0px 3px 6px #1e202029;
-	font-weight: 500;
-	word-wrap: break-word;
-	white-space: normal;
-	line-height: normal;
-  }
-
   .next {
 	background: var(--primary-color) 0% 0% no-repeat padding-box;
 	color: white;

frontend/src/app/ui/description/editor/description-form/components/form-field-set/dialog-editor/form-fieldset-editor-dialog.component.html

@@ -3,8 +3,10 @@
 		<div class="col-auto">
 			<h5 class="field-set-title">{{numberingText}} {{fieldSet.title}}</h5>
 		</div>
-		<div class="col-auto ml-auto close-btn" (click)="close()">
+		<div class="col-auto ml-auto">
+            <button mat-icon-button tabindex="-1" (click)="close()">
                 <mat-icon>close</mat-icon>
+            </button>
 		</div>
 	</div>
 </div>
@@ -27,6 +29,6 @@
 </div>
 
 <div mat-dialog-actions class="row">
-	<div class="ml-auto col-auto"><button class="normal-btn-light-sm" (click)="cancel()">{{'DESCRIPTION-EDITOR.ACTIONS.CANCEL' | translate}}</button></div>
+	<div class="ml-auto col-auto"><button mat-button class="rounded-btn primary-inverted" (click)="cancel()">{{'DESCRIPTION-EDITOR.ACTIONS.CANCEL' | translate}}</button></div>
-	<div class="col-auto"><button class="normal-btn-sm" [disabled]="!propertiesFormGroup.get('fields').valid" (click)="save()">{{'DESCRIPTION-EDITOR.ACTIONS.SAVE' | translate}}</button></div>
+	<div class="col-auto"><button mat-button class="rounded-btn primary" [disabled]="!propertiesFormGroup.get('fields').valid" (click)="save()">{{'DESCRIPTION-EDITOR.ACTIONS.SAVE' | translate}}</button></div>
 </div>

frontend/src/app/ui/description/editor/new-description/new-description.component.html

@@ -1,7 +1,11 @@
 <div class="template-container">
 	<div mat-dialog-title class="row d-flex p-0 m-0 header">
 		<span class="col template-title align-self-center">{{'NEW-DESCRIPTION-DIALOG.TITLE' | translate}}</span>
-		<span class="col-auto d-flex ml-auto align-self-center" (click)="closeDialog()"><mat-icon class="close-icon">close</mat-icon></span>
+		<span class="col-auto d-flex ml-auto align-self-center">
+            <button mat-icon-button  (click)="closeDialog()" tabindex="-1">
+                <mat-icon>close</mat-icon>
+            </button>
+        </span>
 	</div>
 	<div *ngIf="progressIndication" class="progress-bar">
 		<mat-progress-bar color="primary" mode="indeterminate"></mat-progress-bar>
@@ -34,9 +38,9 @@
 			</div>
 
 			<div class="row d-flex align-items-center justify-content-center" [class.pb-4]="prefillSelected">
-				<button mat-raised-button type="button" class="empty-btn" (click)="manuallySelected()">{{'NEW-DESCRIPTION-DIALOG.ACTIONS.MANUALLY' | translate}}</button>
+				<button mat-button type="button" class="rounded-btn neutral" (click)="manuallySelected()">{{'NEW-DESCRIPTION-DIALOG.ACTIONS.MANUALLY' | translate}}</button>
 				<div class="ml-2 mr-2">{{'NEW-DESCRIPTION-DIALOG.OR' | translate}}</div>
-				<button mat-raised-button type="button" class="prefill-btn" (click)="prefillSelected = true">{{'NEW-DESCRIPTION-DIALOG.ACTIONS.PREFILL' | translate}}</button>
+				<button mat-button type="button" class="rounded-btn secondary" (click)="prefillSelected = true">{{'NEW-DESCRIPTION-DIALOG.ACTIONS.PREFILL' | translate}}</button>
 			</div>
 			<div *ngIf="prefillSelected" class="row">
 				<div class="col-12 pl-0 pr-0 pb-2 d-flex flex-row">
@@ -62,13 +66,13 @@
 	<!-- <div *ngIf="prefillSelected || !prefillingSourcesEnabled"> -->
 	<div *ngIf="!prefillingSourcesEnabled else goToNextWithPrefillingSources">
 		<div class="col-auto d-flex pb-4 pt-2">
-			<button mat-raised-button type="button" class="prefill-btn ml-auto" [disabled]="prefillForm.get('descriptionTemplateId').invalid" (click)="manuallySelected()">{{'NEW-DESCRIPTION-DIALOG.ACTIONS.NEXT' | translate}}</button>
+			<button mat-button type="button" class="rounded-btn secondary ml-auto" [disabled]="prefillForm.get('descriptionTemplateId').invalid" (click)="manuallySelected()">{{'NEW-DESCRIPTION-DIALOG.ACTIONS.NEXT' | translate}}</button>
 		</div>
 	</div>
 	<ng-template #goToNextWithPrefillingSources>
 		<div *ngIf="prefillSelected">
 			<div class="col-auto d-flex pb-4 pt-2">
-				<button mat-raised-button type="button" class="prefill-btn ml-auto" [disabled]="prefillForm.invalid" (click)="next()">{{'NEW-DESCRIPTION-DIALOG.ACTIONS.NEXT' | translate}}</button>
+				<button mat-button type="button" class="rounded-btn secondary ml-auto" [disabled]="prefillForm.invalid" (click)="next()">{{'NEW-DESCRIPTION-DIALOG.ACTIONS.NEXT' | translate}}</button>
 			</div>
 		</div>
 	</ng-template>

frontend/src/app/ui/description/editor/new-description/new-description.component.scss

@@ -16,42 +16,10 @@
 		text-overflow: ellipsis;
 	}
 
-	.close-icon {
-		cursor: pointer;
-		margin-right: 20px;
-	}
-
-	.close-icon:hover {
-		background-color: #fefefe6e !important;
-		border-radius: 50%;
-	}
-
 	.definition-content {
 		display: block;
 		margin: 0;
 		padding: 25px;
 	}
-
-	.empty-btn, .prefill-btn {
-		background: var(--secondary-color) 0 0 no-repeat padding-box;
-		border: 1px solid var(--secondary-color);
-		border-radius: 30px;
-		opacity: 1;
-	min-width: 101px;
-		height: 43px;
-		color: #212121;
-		font-weight: 500;
-	}
-
-	.prefill-btn:disabled {
-		background: #a1a1a1 0 0 no-repeat padding-box;
-		border: 1px solid #a1a1a1;
-		opacity: 0.5;
-	}
-
-	.empty-btn {
-		background: #ffffff 0 0 no-repeat padding-box;
-		border: 1px solid #a1a1a1;
-	}
 }
 

frontend/src/app/ui/description/listing/description-listing.component.html

@@ -6,7 +6,7 @@
 					<p>{{'DESCRIPTION-LISTING.TEXT-INFO' | translate}} <u class="pointer" [routerLink]="routerUtils.generateUrl(['/explore-descriptions'])">{{'DESCRIPTION-LISTING.LINK-PUBLIC-DESCRIPTIONS' | translate}}</u> {{'DESCRIPTION-LISTING.TEXT-INFO-REST' | translate}}</p>
 					<p class="mt-4 pt-2">{{'DESCRIPTION-LISTING.TEXT-INFO-PAR' | translate}}
 					<div class="d-flex">
-						<button mat-raised-button class="add-description align-self-center yellow-btn" (click)="addNewDescription()">
+						<button mat-button class="rounded-btn secondary align-self-center" (click)="addNewDescription()">
 							{{'DESCRIPTION-LISTING.ACTIONS.ADD-DESCRIPTION' | translate}}
 						</button>
 						<img class="col-auto ml-auto laptop-img" src="../../../assets/images/dashboard-popup.png">
@@ -18,7 +18,7 @@
 			</div>
 			<div *ngIf="(isLoading || hasListingItems || hasFilters) && !isPublic" class="ml-auto">
 				<div class="col-auto">
-					<button mat-raised-button class="add-description align-self-center yellow-btn" (click)="addNewDescription()">
+					<button mat-button class="rounded-btn secondary align-self-center" (click)="addNewDescription()">
 						{{'DESCRIPTION-LISTING.ACTIONS.ADD-DESCRIPTION' | translate}}
 					</button>
 				</div>
@@ -82,7 +82,7 @@
 							></app-description-listing-item-component>
 						</div>
 						<div *ngIf="hasListingItems && this.lookup?.page?.offset < this.totalCount - 1 && this.pageSize < this.totalCount - 1" class="d-flex justify-content-center">
-							<button type="button" class="btn-load-more" (click)="loadMore()">{{'DESCRIPTION-LISTING.ACTIONS.LOAD-MORE' | translate}}</button>
+							<button mat-button type="button" class="rounded-btn btn-load-more" (click)="loadMore()">{{'DESCRIPTION-LISTING.ACTIONS.LOAD-MORE' | translate}}</button>
 						</div>
 					</div>
 					<div *ngIf="!hasListingItems && hasFilters" class="col-md-12 d-flex justify-content-center pt-4 mt-4 mb-4 pb-4">

frontend/src/app/ui/description/listing/description-listing.component.scss

@@ -72,39 +72,6 @@
 	padding: 0.4rem;
 }
 
-.normal-btn {
-  min-width: 162px;
-  max-width: 256px;
-  height: 40px;
-  cursor: pointer;
-  background: var(--primary-color) 0% 0% no-repeat padding-box;
-  box-shadow: 0px 3px 6px #1e202029;
-  border-radius: 30px;
-  border: none;
-  color: #ffffff;
-  opacity: 1;
-  line-height: 1;
-  font-size: 0.87rem;
-  padding: 0.62rem 1.87rem;
-  margin-left: 40px;
-}
-
-.yellow-btn {
-  min-width: 162px;
-  max-width: 256px;
-  height: 40px;
-  cursor: pointer;
-  background: var(--secondary-color) 0% 0% no-repeat padding-box;
-  border-radius: 30px;
-  opacity: 1;
-  border: none;
-  color: #000000;
-  opacity: 1;
-  line-height: 1;
-  font-size: 0.87rem;
-  padding: 0.62rem 1.87rem;
-  font-weight: 700;
-}
 
 .info-text {
   text-align: left;
@@ -134,6 +101,19 @@
   height: 45px;
 }
 
+.btn-load-more {
+	border: 2px solid #212121;
+	opacity: 1;
+	min-width: 132px;
+    width: auto;
+	margin-top: 4.125rem;
+}
+
+.btn-load-more:hover {
+	background-color: black;
+	color: white;
+}
+
 .center-content {
   font-size: 0.875rem;
   font-weight: 600;

frontend/src/app/ui/description/listing/filtering/description-filter.component.html

@@ -127,11 +127,11 @@
 			<!-- End of Reference Types -->
 
 			<div class="col-10 d-flex justify-content-between mb-4">
-				<button mat-button class="normal-btn-sm rounded-btn secondary" (click)="resetFilters()" style="font-size: 0.87rem;">
+				<button mat-button class="rounded-btn primary-inverted" (click)="resetFilters()" style="font-size: 0.87rem;">
 					{{'DESCRIPTION-LISTING.FILTERS.RESET-FILTERS' | translate}} 
 				</button>
 
-				<button class="normal-btn-sm" (click)="controlModified()">
+				<button mat-button class="rounded-btn primary" (click)="controlModified()">
 					{{'DESCRIPTION-LISTING.FILTERS.APPLY-FILTERS' | translate}}
 				</button>
 			</div>

frontend/src/app/ui/description/start-new-description-dialog/start-new-description-dialog.component.html

@@ -25,8 +25,7 @@
 				<button mat-button type="button" class="cancel-btn" (click)="cancel()">{{ 'START-NEW-DESCRIPTION-DIALOG.ACTIONS.CANCEL' | translate }}</button>
 			</div>
 			<div class="col-auto p-0">
-				<button mat-button *ngIf="formGroup.valid" type="button" class="next-btn" (click)="next()">{{ 'START-NEW-DESCRIPTION-DIALOG.ACTIONS.NEXT' | translate }}</button>
+				<button mat-button [disabled]="!formGroup.valid" type="button" class="rounded-btn primary-inverted next-btn" (click)="next()">{{ 'START-NEW-DESCRIPTION-DIALOG.ACTIONS.NEXT' | translate }}</button>
-				<button mat-button *ngIf="!formGroup.valid" type="button" class="disabled-btn">{{ 'START-NEW-DESCRIPTION-DIALOG.ACTIONS.NEXT' | translate }}</button>
 			</div>
 		</div>
 	</div>

frontend/src/app/ui/description/start-new-description-dialog/start-new-description-dialog.component.scss

@@ -60,31 +60,20 @@ min-width: 101px;
 	font-weight: 500;
 }
 
-.next-btn {
-	background: #ffffff 0% 0% no-repeat padding-box;
-	border: 1px solid var(--primary-color);
-	border-radius: 30px;
-	opacity: 1;
-	min-width: 101px;
-	height: 43px;
-	color: var(--primary-color);
-	font-weight: 500;
-}
-
 .next-btn:hover {
 	background-color: var(--primary-color);
 	color: white;
 }
 
-.disabled-btn {
+// .disabled-btn {
-	border: 1px solid #b5b5b5;
+// 	border: 1px solid #b5b5b5;
-	border-radius: 30px;
+// 	border-radius: 30px;
-	opacity: 1;
+// 	opacity: 1;
-min-width: 101px;
+//     min-width: 101px;
-	height: 43px;
+// 	height: 43px;
-	color: #b5b5b5;
+// 	color: #b5b5b5;
-	font-weight: 500;
+// 	font-weight: 500;
-}
+// }
 
 .actions {
 	display: flex;

frontend/src/app/ui/glossary/dialog/glossary-dialog.component.html

@@ -3,8 +3,10 @@
 		<div mat-dialog-title class="col-auto">
 			{{'GLOSSARY.TITLE' | translate}}
 		</div>
-		<div class="col-auto ml-auto close-btn" (click)="close()">
+		<div class="col-auto ml-auto">
+            <button mat-icon-button tabindex="-1" (click)="close()">
                 <mat-icon>close</mat-icon>
+            </button>
 		</div>
 	</div>
 	<div mat-dialog-content class="row">

frontend/src/app/ui/glossary/dialog/glossary-dialog.component.scss

@@ -7,11 +7,6 @@
 .full-width {
   width: 100%;
 }
-
-.close-btn {
-  cursor: pointer;
-}
-
 .glossary {
   margin-bottom: 1.125rem;
 }

frontend/src/app/ui/language/dialog/language-dialog.component.html

@@ -3,8 +3,10 @@
 		<div mat-dialog-title class="col-auto">
 			{{'LANGUAGE.TITLE' | translate}}
 		</div>
-		<div class="col-auto ml-auto close-btn" (click)="close()">
+		<div class="col-auto ml-auto">
+            <button mat-icon-button tabindex="-1" (click)="close()">
                 <mat-icon>close</mat-icon>
+            </button>
 		</div>
 	</div>
 	<div mat-dialog-content class="row">

frontend/src/app/ui/navbar/navbar.component.html

@@ -18,13 +18,13 @@
 			<div class="collapse navbar-collapse justify-content-end" id="navigation">
 
 				<div class="new-plan-dialog col-md-auto ml-auto">
-					<button type="button" class="normal-btn" (click)="openNewPlanDialog()">{{ 'NAV-BAR.START-NEW-PLAN' | translate }}</button>
+					<button type="button" mat-button class="rounded-btn primary" (click)="openNewPlanDialog()">{{ 'NAV-BAR.START-NEW-PLAN' | translate }}</button>
 				</div>
 				<div class="col-md-auto pl-0" *ngIf="!(isAuthenticated() && onInvalidUrl())">
 					<a class="ml-4 mr-4 faq-title" (click)="openFaqDialog()"><b>{{ 'FAQ.TITLE' | translate }}</b></a>
-					<button mat-button [matMenuTriggerFor]="languageMenu" class="p-0 lang">
+					<button mat-button [matMenuTriggerFor]="languageMenu" class="lang">
-						<mat-icon class="mr-2">language</mat-icon><span class="text-uppercase">{{selectedLanguage}}</span>
+						<mat-icon>language</mat-icon><span class="text-uppercase">{{selectedLanguage}}</span>
-						<mat-icon>arrow_drop_down</mat-icon>
+						<mat-icon iconPositionEnd>arrow_drop_down</mat-icon>
 					</button>
 					<mat-menu #languageMenu="matMenu" class="nav-mat-menu">
 						<app-language (languageChange)="getLanguage($event)" class="d-lg-block d-none"></app-language>
@@ -94,10 +94,10 @@
 							</ng-container>
 						</li>
 						<li class="d-flex justify-content-center">
-							<button type="button" class="normal-btn" (click)="openNewPlanDialog()">{{ 'NAV-BAR.START-NEW-PLAN' | translate }}</button>
+							<button type="button" mat-button class="rounded-btn primary" (click)="openNewPlanDialog()">{{ 'NAV-BAR.START-NEW-PLAN' | translate }}</button>
 						</li>
 						<li *ngIf="isAuthenticated()" class="d-flex justify-content-center">
-							<button type="button" class="default-btn" (click)="logout()">{{ 'USER-DIALOG.LOG-OUT' | translate }}</button>
+							<button type="button" mat-button class="rounded-btn neutral" (click)="logout()">{{ 'USER-DIALOG.LOG-OUT' | translate }}</button>
 						</li>
 					</ul>
 				</div>

frontend/src/app/ui/plan/listing/filtering/plan-filter.component.html

@@ -104,21 +104,13 @@
 			<!-- End of Reference Types -->
 			
 			<div class="col-10 d-flex justify-content-between mb-4">
-                <button mat-button class="normal-btn-sm rounded-btn secondary" (click)="resetFilters()" style="font-size: 0.87rem;">
+                <button  mat-button class="rounded-btn primary-inverted" (click)="resetFilters()" style="font-size: 0.87rem;">
 					{{'PLAN-LISTING.FILTERS.RESET-FILTERS' | translate}} 
 				</button>
-				<button class="normal-btn-sm" (click)="controlModified()">
+				<button  mat-button class="rounded-btn primary" (click)="controlModified()">
 					{{'PLAN-LISTING.FILTERS.APPLY-FILTERS' | translate}}
 				</button>
 			</div>
-<!-- 
-            <div class="d-flex mb-4">
-				<button class="normal-btn-sm" (click)="controlModified()">
-					{{'PLAN-LISTING.FILTERS.APPLY-FILTERS' | translate}}
-				</button>
-			</div> -->
-
-
 		</div>
 	</div>
 </div>

frontend/src/app/ui/plan/listing/plan-listing.component.html

@@ -67,7 +67,7 @@
                                 ></app-plan-listing-item-component>
                         </div>
                         <div *ngIf="hasListingItems && this.lookup?.page?.offset < this.totalCount - 1 && this.pageSize < this.totalCount - 1" class="d-flex justify-content-center">
-                            <button type="button" class="btn-load-more" (click)="loadMore()">{{'GENERAL.ACTIONS.LOAD-MORE' | translate}}</button>
+                            <button type="button" mat-button class="rounded-btn btn-load-more" (click)="loadMore()">{{'GENERAL.ACTIONS.LOAD-MORE' | translate}}</button>
                         </div>
                     </div>
                     <div *ngIf="!hasListingItems && !hasFilters" class="col-md-12 d-flex justify-content-center pt-4 mt-4 mb-4 pb-4">

frontend/src/app/ui/plan/listing/plan-listing.component.scss

@@ -134,38 +134,17 @@
 	padding: 0.4rem;
 }
 
-.normal-btn {
+.btn-load-more {
-  min-width: 162px;
+	border: 2px solid #212121;
-  max-width: 256px;
-  height: 40px;
-  cursor: pointer;
-  background: var(--primary-color) 0% 0% no-repeat padding-box;
-  box-shadow: 0px 3px 6px #1e202029;
-  border-radius: 30px;
-  border: none;
-  color: #ffffff;
 	opacity: 1;
-  line-height: 1;
+	min-width: 132px;
-  font-size: 0.87rem;
+    width: auto;
-  padding: 0.62rem 1.87rem;
+	margin-top: 4.125rem;
-  margin-left: 40px;
 }
 
-.yellow-btn {
+.btn-load-more:hover {
-  min-width: 162px;
+	background-color: black;
-  max-width: 256px;
+	color: white;
-  height: 40px;
-  cursor: pointer;
-  background: var(--secondary-color) 0% 0% no-repeat padding-box;
-  border-radius: 30px;
-  opacity: 1;
-  border: none;
-  color: #000000;
-  opacity: 1;
-  line-height: 1;
-  font-size: 0.87rem;
-  padding: 0.62rem 1.87rem;
-  margin-left: 40px;
 }
 
 .info-text {

frontend/src/app/ui/plan/new/start-new-plan-dialogue/start-new-plan-dialog.component.html

@@ -17,7 +17,7 @@
 			<div class="d-flex justify-content-between align-items-center">
 				<div class="import-file col-auto p-0">
 					<div class="pr-2">
-						<button type="button" class="normal-btn upload-btn d-flex flex-row align-items-center" (click)="uploadFile($event)">
+						<button mat-button type="button" class="rounded-btn upload-btn d-flex flex-row align-items-center" (click)="uploadFile($event)">
 							<mat-icon class="pr-2">file_upload</mat-icon>
 							{{ 'START-NEW-PLAN-DIALOG.IMPORT-FROM-FILE' | translate }}
 						</button>
@@ -28,7 +28,7 @@
 				</div>
 				<div class="START-NEW-PLAN col-auto p-0">
 					<div class="pr-2">
-						<button type="button" class="normal-btn font-weight-bold d-flex flex-row align-items-center" (click)="startWizard()">
+						<button  mat-button class="rounded-btn primary font-weight-bold d-flex flex-row align-items-center" (click)="startWizard()">
 							<mat-icon>chevron_right</mat-icon>
 							{{ 'START-NEW-PLAN-DIALOG.START-NEW-PLAN' | translate }}
 						</button>

frontend/src/app/ui/plan/new/start-new-plan-dialogue/start-new-plan-dialog.component.scss

@@ -58,7 +58,6 @@
 	background-color: white;
 	color: #212121;
 	font-weight: bold;
-	box-shadow: 0px 3px 6px #1e202029;
 	border: 2px solid #212121;
 }
 

frontend/src/app/ui/plan/new/upload-dialogue/plan-upload-dialog.component.html

@@ -3,8 +3,10 @@
 		<div class="confirmation-message align-self-center">
 			<h4>{{'PLAN-UPLOAD.TITLE' | translate}}</h4>
 		</div>
-		<div class="close-btn justify-content-end" (click)="close()">
+		<div class="close-btn justify-content-end">
+            <button mat-icon-button tabindex="-1" (click)="close()">
                 <mat-icon>close</mat-icon>
+            </button>
 		</div>
 	</div>
 </div>

frontend/src/app/ui/plan/plan-editor-blueprint/plan-editor.component.html

@@ -12,7 +12,7 @@
 							<div *ngIf="step > 0" class="ml-auto d-flex flex-row">
 
 								<div *ngIf="formGroup.get('id').value" class="col-auto d-flex align-items-center">
-									<button [disabled]="isDirty()" [matTooltipDisabled]="!isDirty()" mat-raised-button class="plan-export-btn" type="button" [matMenuTriggerFor]="exportMenu" (click)="$event.stopPropagation();" [matTooltip]="'PLAN-EDITOR.ACTIONS.EXPORT.CAN-NOT-EXPORT' | translate">
+									<button [disabled]="isDirty()" [matTooltipDisabled]="!isDirty()" mat-button class="rounded-btn primary-inverted" type="button" [matMenuTriggerFor]="exportMenu" (click)="$event.stopPropagation();" [matTooltip]="'PLAN-EDITOR.ACTIONS.EXPORT.CAN-NOT-EXPORT' | translate">
 										{{ 'PLAN-EDITOR.ACTIONS.EXPORT.EXPORT' | translate }}
 										<mat-icon [disabled]="isDirty()" style="width: 14px;">expand_more</mat-icon>
 									</button>
@@ -26,16 +26,16 @@
 								<mat-divider *ngIf="formGroup.get('id').value && canEdit && ((!isLockedByUser && canEdit) || isLockedByUser || (hasReversableStatus() && !isLockedByUser))" [vertical]="true" class="ml-2 mr-2"></mat-divider>
 
 								<div *ngIf="isDirty()" class="col-auto d-flex align-items-center">
-									<button [disabled]="saving" type="button" mat-raised-button class="discard-btn mr-3" (click)="discardChanges()">
+									<button [disabled]="saving" type="button" mat-button class="rounded-btn discard-btn mr-3" (click)="discardChanges()">
 										{{'PLAN-EDITOR.ACTIONS.DISCARD.DISCARD' | translate}}
 									</button>
 								</div>
 
 								<div class="col-auto d-flex align-items-center">
-									<button [disabled]="saving" *ngIf="isNew" mat-raised-button type="button" (click)="formSubmit()" class="save-btn">
+									<button [disabled]="saving" *ngIf="isNew" mat-button type="button" (click)="formSubmit()" class="rounded-btn primary-inverted">
 										{{'PLAN-EDITOR.ACTIONS.SAVE' | translate}}
 									</button>
-									<button [disabled]="saving" *ngIf="!isNew && formGroup.enabled && !lockStatus && canSave" mat-raised-button class="save-btn mr-2" type="button">
+									<button [disabled]="saving" *ngIf="!isNew && formGroup.enabled && !lockStatus && canSave" mat-raised-button class="rounded-btn primary-inverted mr-2" type="button">
 										<span class="d-flex flex-row row">
 											<span (click)="!saving?formSubmit():null" class="col">{{ 'PLAN-EDITOR.ACTIONS.SAVE' | translate }}</span>
 											<mat-divider [vertical]="true"></mat-divider>
@@ -53,11 +53,11 @@
 									</mat-menu>
 								</div>
 								<div class="col-auto d-flex align-items-center" *ngIf="canFinalize && this.hasNotDoi() && formGroup.enabled" [matTooltipDisabled]="canFinalize && formGroup.pristine" matTooltip="{{'PLAN-EDITOR.ACTIONS.FINALIZE.CAN-NOT-FINALIZE' | translate}}">
-									<button [disabled]="!formGroup.pristine" mat-raised-button class="save-btn mr-2" type="button" (click)="finalize()">{{ 'PLAN-EDITOR.ACTIONS.FINALIZE.FINALIZE' | translate }}</button>
+									<button [disabled]="!formGroup.pristine" mat-button class="rounded-btn primary-inverted mr-2" type="button" (click)="finalize()">{{ 'PLAN-EDITOR.ACTIONS.FINALIZE.FINALIZE' | translate }}</button>
 								</div>
 								<div *ngIf="formGroup.pristine" class="col-auto d-flex align-items-center">
-									<button [disabled]="saving" *ngIf="isLocked" mat-raised-button class="save-btn mr-2" type="button">{{ 'PLAN-EDITOR.ACTIONS.LOCKED' | translate}}</button>
+									<button [disabled]="saving" *ngIf="isLocked" mat-button class="rounded-btn primary-inverted mr-2" type="button">{{ 'PLAN-EDITOR.ACTIONS.LOCKED' | translate}}</button>
-									<button [disabled]="saving" *ngIf="canReverseFinalize && this.hasNotDoi() && formGroup.enabled" mat-raised-button class="save-btn mr-2" type="button" (click)="reverseFinalization()">{{ 'PLAN-EDITOR.ACTIONS.REVERSE' | translate }}</button>
+									<button [disabled]="saving" *ngIf="canReverseFinalize && this.hasNotDoi() && formGroup.enabled" mat-button class="rounded-btn primary-inverted mr-2" type="button" (click)="reverseFinalization()">{{ 'PLAN-EDITOR.ACTIONS.REVERSE' | translate }}</button>
 								</div>
 							</div>
 						</div>
@@ -105,7 +105,9 @@
 						</div>
 						<div class="row">
 							<div class="col-5">
-								<button mat-button class="action-btn" [disabled]="!(formGroup.get('blueprint').value && formGroup.get('label').value)" (click)="selectBlueprint()">{{'PLAN-EDITOR.STEPPER.NEXT' | translate}}</button>
+								<button mat-button class="rounded-btn secondary" [disabled]="!(formGroup.get('blueprint').value && formGroup.get('label').value)" (click)="selectBlueprint()">
+                                    {{'PLAN-EDITOR.STEPPER.NEXT' | translate}}
+                                </button>
 							</div>
 							<div class="col-7" *ngIf="formGroup.get('blueprint').value == null || (formGroup.get('blueprint').value && formGroup.get('blueprint').value.id !== defaultBlueprintId)">
 								<div class="row">
@@ -113,7 +115,7 @@
 										<p>{{'PLAN-EDITOR.ACTIONS.OR-CONTINUE-WITH' | translate}}</p>
 									</div>
 									<div class="col-6">
-										<button mat-button class="action-btn" style="float: right;" (click)="selectDefaultBlueprint()">{{'PLAN-EDITOR.ACTIONS.DEFAULT-BLUEPRINT' | translate}}</button>
+										<button mat-button class="rounded-btn secondary" style="float: right;" (click)="selectDefaultBlueprint()">{{'PLAN-EDITOR.ACTIONS.DEFAULT-BLUEPRINT' | translate}}</button>
 									</div>
 								</div>
 							</div>
@@ -170,16 +172,16 @@
 							<div class="col-12">
 								<div class="row justify-content-center" *ngIf="this.step !== 0">
 									<div class="col-auto mb-1">
-										<div mat-raised-button type="button" class="previous stepper-btn mr-2" [ngClass]="{'previous-disabled': this.step === 1}" (click)="previousStep()">
+										<button mat-button type="button" class="rounded-btn neutral stepper mr-2" [ngClass]="{'previous-disabled': this.step === 1}" (click)="previousStep()">
 											<span class="material-icons">chevron_left</span>
 											<div>{{'PLAN-EDITOR.ACTIONS.PREVIOUS-STEP' | translate}}</div>
-										</div>
+                                        </button>
 									</div>
 									<div *ngIf="this.step < this.maxSteps" class="col-auto mb-1">
-										<div mat-raised-button type="button" class="stepper-btn" [ngClass]="{ 'next-disabled': this.step === this.maxSteps, 'next': this.step < selectedBlueprint?.definition?.sections?.length, 'description-next': this.step >= selectedBlueprint?.definition?.sections?.length }" (click)="nextStep()">
+										<button mat-button type="button" class="rounded-btn primary stepper" [ngClass]="{ 'next-disabled': this.step === this.maxSteps, 'next': this.step < selectedBlueprint?.definition?.sections?.length, 'description-next': this.step >= selectedBlueprint?.definition?.sections?.length }" (click)="nextStep()">
 											<div>{{'PLAN-EDITOR.ACTIONS.NEXT-STEP' | translate}}</div>
-											<span class="material-icons">chevron_right</span>
+											<span class="material-icons" iconPositionEnd>chevron_right</span>
-										</div>
+                                        </button>
 									</div>
 								</div>
 								<div class="row" *ngIf="this.step !== 0 && formGroup && !viewOnly && canEdit">

frontend/src/app/ui/plan/plan-editor-blueprint/plan-editor.component.scss

@@ -254,24 +254,6 @@ mat-icon.size-16 {
     height: calc(100vh - 250px);
 }
 
-.action-btn {
-    border-radius: 30px;
-    background-color: var(--secondary-color);
-    border: 1px solid transparent;
-    padding-left: 2em;
-    padding-right: 2em;
-    box-shadow: 0px 3px 6px #1E202029;
-
-    transition-property: background-color, color;
-    transition-duration: 200ms;
-    transition-delay: 50ms;
-    transition-timing-function: ease-in-out;
-    &:disabled{
-        background-color: #CBCBCB;
-        color: #FFF;
-        border: 0px;
-    }
-}
 
 .blueprint-section {
     text-align: left;
@@ -291,10 +273,7 @@ mat-icon.size-16 {
     background: transparent;
     border: 1px solid #ffffff;
     color: white;
-    border-radius: 30px;
-    opacity: 1;
     width: 110px;
-    height: 40px;
     display: flex;
     justify-content: center;
     align-items: center;

frontend/src/app/ui/plan/plan-finalize-dialog/plan-finalize-dialog.component.html

@@ -1,12 +1,14 @@
 <div class="finalize-dialog-wrapper">
 	<div class="row d-flex flex-row">
 		<div mat-dialog-title class="col-auto">{{ 'PLAN-FINALISE-DIALOG.TITLE' | translate }}</div>
-		<div class="col-auto close-btn ml-auto" (click)="close()">
+		<div class="col-auto ml-auto">
+            <button mat-icon-button tabindex="-1" (click)="close()">
                 <mat-icon>close</mat-icon>
+            </button>
 		</div>
 	</div>
 	<div mat-dialog-content class="pt-2 pb-2">
-		<div class="container">
+		<div class="d-flex flex-column">
 			<mat-accordion [multi]="true">
 				<mat-expansion-panel>
 					<mat-expansion-panel-header>
@@ -56,18 +58,16 @@
 					</div>
 				</mat-selection-list>
 			</div>
-			<ng-container *ngIf="isPlanValid == false">
+			@if(isPlanValid == false){
-				<mat-error>
+				<mat-error class="pt-3 pb-1">
 					{{ 'PLAN-FINALISE-DIALOG.VALIDATION.INVALID-PLAN' | translate }}
 				</mat-error>
-				<ng-container *ngFor="let error of planErrors">
+				 @for(error of planErrors; track error){
-					<div>
+                    <mat-error  class="d-flex gap-half-rem mt-1 mb-1">
-						<mat-error>
+                        <i class="fa fa-circle mt-auto mb-auto" style="font-size:0.5rem"></i> {{error | titlecase}}
-							<i class="fa fa-circle" style="font-size:16px"></i> {{error}}
                     </mat-error>
-					</div>
+                }
-				</ng-container>
+            }
-			</ng-container>
 			<mat-error *ngIf="getFinalizedDescriptions().length === 0 && descriptionsToBeFinalized.length === 0 && isPlanValid">
 				{{'PLAN-FINALISE-DIALOG.VALIDATION.AT-LEAST-ONE-DESCRPIPTION-FINALISED' | translate}}
 			</mat-error>
@@ -87,10 +87,10 @@
 
 	<div mat-dialog-actions class="d-flex justify-content-end mb-1">
 		<div class="col-auto">
-			<button mat-raised-button cdkFocusInitial (click)="close()" class="cancel-btn">{{ 'PLAN-FINALISE-DIALOG.ACTIONS.CANCEL' | translate }}</button>
+			<button mat-button cdkFocusInitial (click)="close()" class="rounded-btn neutral">{{ 'PLAN-FINALISE-DIALOG.ACTIONS.CANCEL' | translate }}</button>
 		</div>
 		<div class="col-auto">
-			<button mat-raised-button [disabled]="!isPlanValid || getFinalizedDescriptions().length === 0 && descriptionsToBeFinalized.length === 0" class="submit-btn" (click)="onSubmit()">{{ 'PLAN-FINALISE-DIALOG.ACTIONS.SUBMIT' | translate }}</button>
+			<button mat-button [disabled]="!isPlanValid || getFinalizedDescriptions().length === 0 && descriptionsToBeFinalized.length === 0" class="rounded-btn primary" (click)="onSubmit()">{{ 'PLAN-FINALISE-DIALOG.ACTIONS.SUBMIT' | translate }}</button>
 		</div>
 	</div>
 </div>

frontend/src/app/ui/reference/reference-field/editor/reference-dialog-editor.component.html

@@ -64,7 +64,7 @@
 		</ng-container>
 	</mat-dialog-content>
 	<mat-dialog-actions>
-		<div class="ml-auto col-auto"><button class="normal-btn-light-sm" mat-dialog-close>Cancel</button></div>
+		<div class="ml-auto col-auto"><button mat-button class="rounded-btn primary-inverted" mat-dialog-close>{{'COMMONS.ACTIONS.CANCEL' | translate}}</button></div>
-		<div class="col-auto"><button [disabled]="!isFormValid()" (click)="send()" class="normal-btn-sm">Save</button></div>
+		<div class="col-auto"><button [disabled]="!isFormValid()" (click)="send()" mat-button class="rounded-btn primary">{{'COMMONS.ACTIONS.SAVE' | translate}}</button></div>
 	</mat-dialog-actions>
 </form>

frontend/src/app/ui/sidebar/sidebar.component.ts

@@ -114,10 +114,8 @@ export class SidebarComponent implements OnInit {
 			routes: [],
 		}
 		if (this.authentication.hasPermission(AppPermission.ViewPlanBlueprintPage)) this.adminItems.routes.push({ path: '/plan-blueprints', title: 'SIDE-BAR.PLAN-BLUEPRINTS', icon: 'library_books', routeType: RouteType.System });
-		if (this.authentication.hasPermission(AppPermission.ViewPlanStatusPage)) this.adminItems.routes.push({ path: '/plan-statuses', title: 'SIDE-BAR.PLAN-STATUSES', icon: 'library_books', routeType: RouteType.System });
 		if (this.authentication.hasPermission(AppPermission.ViewDescriptionTemplatePage)) this.adminItems.routes.push({ path: '/description-templates', title: 'SIDE-BAR.DESCRIPTION-TEMPLATES', icon: 'description', routeType: RouteType.System });
 		if (this.authentication.hasPermission(AppPermission.ViewDescriptionTemplateTypePage)) this.adminItems.routes.push({ path: '/description-template-type', title: 'SIDE-BAR.DESCRIPTION-TEMPLATE-TYPES', icon: 'stack', routeType: RouteType.System });
-		if (this.authentication.hasPermission(AppPermission.ViewDescriptionStatusPage)) this.adminItems.routes.push({ path: '/description-statuses', title: 'SIDE-BAR.DESCRIPTION-STATUSES', icon: 'description', routeType: RouteType.System });
 		if (this.authentication.hasPermission(AppPermission.ViewEntityLockPage)) this.adminItems.routes.push({ path: '/entity-locks', title: 'SIDE-BAR.ENTITY-LOCKS', icon: 'lock_person', routeType: RouteType.System });
 		if (this.authentication.hasPermission(AppPermission.ViewReferencePage)) this.adminItems.routes.push({ path: '/references', title: 'SIDE-BAR.REFERENCES', icon: 'dataset_linked', routeType: RouteType.System });
 		if (this.authentication.hasPermission(AppPermission.ViewReferenceTypePage)) this.adminItems.routes.push({ path: '/reference-type', title: 'SIDE-BAR.REFERENCE-TYPES', icon: 'add_link', routeType: RouteType.System });
@@ -133,6 +131,8 @@ export class SidebarComponent implements OnInit {
 		if (this.authentication.hasPermission(AppPermission.ViewNotificationPage)) this.adminItems.routes.push({ path: '/notifications', title: 'SIDE-BAR.NOTIFICATIONS', icon: 'notifications', routeType: RouteType.System });
 		if (this.authentication.hasPermission(AppPermission.ViewStatusPage)) this.adminItems.routes.push({ path: '/annotation-statuses', title: 'SIDE-BAR.ANNOTATION-STATUSES', icon: 'notifications', routeType: RouteType.System });
 		if (this.authentication.hasPermission(AppPermission.ViewMaintenancePage)) this.adminItems.routes.push({ path: '/maintenance-tasks', title: 'SIDE-BAR.MAINTENANCE', icon: 'build', routeType: RouteType.System });
+        if (this.authentication.hasPermission(AppPermission.ViewPlanStatusPage)) this.adminItems.routes.push({ path: '/plan-statuses', title: 'SIDE-BAR.PLAN-STATUSES', icon: 'library_books', routeType: RouteType.System });
+		if (this.authentication.hasPermission(AppPermission.ViewDescriptionStatusPage)) this.adminItems.routes.push({ path: '/description-statuses', title: 'SIDE-BAR.DESCRIPTION-STATUSES', icon: 'description', routeType: RouteType.System });
 		this.groupMenuItems.push(this.adminItems);
 
 		let infoItems: RouteInfo[] = this.configurationService?.sidebar?.infoItems.map(infoItem => {