From b4ae1da886847a416dfbd76bf3b209305e7392a2 Mon Sep 17 00:00:00 2001
From: Sofia Papacharalampous <spapacharalampous@cite.gr>
Date: Tue, 9 Jul 2024 12:05:15 +0300
Subject: [PATCH] styling fixes

---
 .../annotation-dialog.component.html                 | 12 +++++++-----
 .../annotation-dialog.component.scss                 |  2 +-
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/frontend/src/app/ui/annotations/annotation-dialog-component/annotation-dialog.component.html b/frontend/src/app/ui/annotations/annotation-dialog-component/annotation-dialog.component.html
index 2e04cab5a..e2bfb9d3b 100644
--- a/frontend/src/app/ui/annotations/annotation-dialog-component/annotation-dialog.component.html
+++ b/frontend/src/app/ui/annotations/annotation-dialog-component/annotation-dialog.component.html
@@ -1,9 +1,9 @@
 <div class="dialog-container">
 	<div class="row mt-2 justify-content-between align-items-center">
 		<div class="col-auto">
-      <h3 class="mt-2 title">{{'ANNOTATION-DIALOG.TITLE' | translate}}</h3>
+      <h3 class="title">{{'ANNOTATION-DIALOG.TITLE' | translate}}</h3>
     </div>
-		<div *ngIf="threads?.size > 0" class="col-auto pl-0">
+		<div *ngIf="threads?.size > 0" class="col-auto mt-1 pl-0">
 			<button class="comments-count" mat-min-fab extended disabled>
 				<span>{{ annotationsCount }}</span>
       </button>
@@ -81,7 +81,7 @@
 															<div class="row mt-2 align-items-center">
 																<span class="col user">{{getParentAnnotation(thread).author.name}}</span>
 																<div class="col-auto annotation-time">{{getParentAnnotation(thread).timeStamp | dateTimeFormatter: "d MMMM, y 'at' h:mm a"}}</div>
-																<div class="col-auto pl-0 dense-10">
+																<div *ngIf="listingStatuses && listingStatuses?.length > 0" class="col-auto pl-0 dense-10">
 																	<button mat-icon-button [matMenuTriggerFor]="annotationStatuses" matTooltip="{{ 'ANNOTATION-DIALOG.ANNOTATION-STATUS.ACTIONS.EDIT' | translate }}">
 																		<mat-icon *ngIf="getSelectedStatusIcon(getParentAnnotation(thread).id); else noStatus">{{getSelectedStatusIcon(getParentAnnotation(thread).id)}}</mat-icon>
 																		<ng-template #noStatus> <mat-icon>edit_note</mat-icon></ng-template>
@@ -89,10 +89,12 @@
 																	<mat-menu class="statuses-menu" #annotationStatuses>
 																		<button *ngFor="let status of listingStatuses" mat-menu-item
 																			class="w-auto"
-																			[matTooltip]="status?.label"
+																			[matTooltip]="status?.label" matTooltipPosition="left"
 																			(click)="setAnnotationStatus(annotationStatusFormGroup?.get('annotationsStatusArray'), getParentAnnotation(thread).id, status?.id); persistAnnotationStatus(annotationStatusFormGroup.get('annotationsStatusArray'), getParentAnnotation(thread).id)"
 																		>
-																			<mat-icon>{{getStatusIcon(status)}}</mat-icon>
+																			<span>
+																				<mat-icon style="margin-left: auto; margin-right: auto;">{{getStatusIcon(status)}}</mat-icon>
+																			</span>
 																		</button>
 																	</mat-menu>
 																</div>
diff --git a/frontend/src/app/ui/annotations/annotation-dialog-component/annotation-dialog.component.scss b/frontend/src/app/ui/annotations/annotation-dialog-component/annotation-dialog.component.scss
index 9ce76f138..c54f717de 100644
--- a/frontend/src/app/ui/annotations/annotation-dialog-component/annotation-dialog.component.scss
+++ b/frontend/src/app/ui/annotations/annotation-dialog-component/annotation-dialog.component.scss
@@ -8,7 +8,7 @@ $mat-card-header-size: 40px !default;
 	padding: 0 1.5rem;
 
 	.title {
-		font-size: 18px; 
+		font-size: 18px;
 		font-weight: 400;
 	}
 }