From 9cde2c0c43513522198825b8b899daddfd92fc0d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adina=20=C8=9Aeudan?= <adina@devplant.ro>
Date: Tue, 13 Apr 2021 23:32:52 +0300
Subject: [PATCH] Removed tooltip beak

---
 .../downloads-list-screen.component.html      | 11 +--
 .../users-stats/users-stats.component.html    |  2 +-
 .../screens/audit/audit-screen.component.html |  2 +-
 .../default-colors-screen.component.html      |  2 +-
 .../dictionary-listing-screen.component.html  |  2 +-
 .../dictionary-overview-screen.component.html |  2 +-
 .../digital-signature-screen.component.html   |  2 +-
 ...e-attributes-listing-screen.component.html |  4 +-
 .../license-information-screen.component.html |  2 +-
 .../rule-sets-listing-screen.component.html   |  2 +-
 .../screens/rules/rules-screen.component.html |  2 +-
 .../smtp-config-screen.component.html         |  2 +-
 .../user-listing-screen.component.html        |  2 +-
 .../watermark/watermark-screen.component.html |  2 +-
 .../file-actions/file-actions.component.html  |  6 +-
 .../file-actions/file-actions.component.ts    |  8 ---
 .../file-preview-screen.component.html        | 11 +--
 .../project-overview-screen.component.html    |  9 +--
 .../initials-avatar.component.html            |  2 +-
 .../initials-avatar.component.ts              |  1 +
 .../upload-status-overlay.component.html      | 37 +++++-----
 .../upload-status-overlay.component.scss      |  6 +-
 apps/red-ui/src/assets/pdftron/stylesheet.css |  4 ++
 .../src/assets/styles/red-tooltips.scss       | 67 +++++++++----------
 24 files changed, 86 insertions(+), 104 deletions(-)

diff --git a/apps/red-ui/src/app/components/downloads-list-screen/downloads-list-screen.component.html b/apps/red-ui/src/app/components/downloads-list-screen/downloads-list-screen.component.html
index 10defa401..050fab273 100644
--- a/apps/red-ui/src/app/components/downloads-list-screen/downloads-list-screen.component.html
+++ b/apps/red-ui/src/app/components/downloads-list-screen/downloads-list-screen.component.html
@@ -1,7 +1,7 @@
 <section>
     <div class="page-header">
         <div class="actions flex-1">
-            <redaction-circle-button [routerLink]="['../..']" tooltip="common.close" tooltipPosition="before" icon="red:close"></redaction-circle-button>
+            <redaction-circle-button [routerLink]="['../..']" tooltip="common.close" tooltipPosition="below" icon="red:close"></redaction-circle-button>
         </div>
     </div>
 
@@ -51,19 +51,12 @@
                                 *ngIf="download.status === 'READY' && !download.inProgress"
                                 (action)="downloadItem(download)"
                                 tooltip="downloads-list.actions.download"
-                                tooltipPosition="before"
                                 type="dark-bg"
                                 icon="red:download"
                             >
                             </redaction-circle-button>
 
-                            <redaction-circle-button
-                                (action)="deleteItem(download)"
-                                tooltip="downloads-list.actions.delete"
-                                tooltipPosition="before"
-                                type="dark-bg"
-                                icon="red:trash"
-                            >
+                            <redaction-circle-button (action)="deleteItem(download)" tooltip="downloads-list.actions.delete" type="dark-bg" icon="red:trash">
                             </redaction-circle-button>
 
                             <mat-spinner *ngIf="download.inProgress" diameter="15"></mat-spinner>
diff --git a/apps/red-ui/src/app/modules/admin/components/users-stats/users-stats.component.html b/apps/red-ui/src/app/modules/admin/components/users-stats/users-stats.component.html
index 36a3114e6..37ec82dbb 100644
--- a/apps/red-ui/src/app/modules/admin/components/users-stats/users-stats.component.html
+++ b/apps/red-ui/src/app/modules/admin/components/users-stats/users-stats.component.html
@@ -1,5 +1,5 @@
 <div class="collapsed-wrapper">
-    <redaction-circle-button (action)="toggleCollapse.emit()" icon="red:expand" tooltip="user-stats.expand" tooltipPosition="before"></redaction-circle-button>
+    <redaction-circle-button (action)="toggleCollapse.emit()" icon="red:expand" tooltipPosition="before" tooltip="user-stats.expand"></redaction-circle-button>
     <div class="all-caps-label" translate="user-stats.title"></div>
 </div>
 
diff --git a/apps/red-ui/src/app/modules/admin/screens/audit/audit-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/audit/audit-screen.component.html
index 29c67c267..fd339218f 100644
--- a/apps/red-ui/src/app/modules/admin/screens/audit/audit-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/audit/audit-screen.component.html
@@ -8,7 +8,7 @@
                 *ngIf="permissionsService.isUser()"
                 [routerLink]="['/ui/projects/']"
                 tooltip="common.close"
-                tooltipPosition="before"
+                tooltipPosition="below"
                 icon="red:close"
             ></redaction-circle-button>
         </div>
diff --git a/apps/red-ui/src/app/modules/admin/screens/default-colors/default-colors-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/default-colors/default-colors-screen.component.html
index dfcbf457f..95b6c0fa5 100644
--- a/apps/red-ui/src/app/modules/admin/screens/default-colors/default-colors-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/default-colors/default-colors-screen.component.html
@@ -7,7 +7,7 @@
         <div class="flex-1 actions">
             <redaction-rule-set-actions></redaction-rule-set-actions>
 
-            <redaction-circle-button [routerLink]="['../..']" tooltip="common.close" tooltipPosition="before" icon="red:close"></redaction-circle-button>
+            <redaction-circle-button [routerLink]="['../..']" tooltip="common.close" tooltipPosition="below" icon="red:close"></redaction-circle-button>
         </div>
     </div>
 
diff --git a/apps/red-ui/src/app/modules/admin/screens/dictionary-listing/dictionary-listing-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/dictionary-listing/dictionary-listing-screen.component.html
index 901c81dc0..f99b01c39 100644
--- a/apps/red-ui/src/app/modules/admin/screens/dictionary-listing/dictionary-listing-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/dictionary-listing/dictionary-listing-screen.component.html
@@ -7,7 +7,7 @@
         <div class="flex-1 actions">
             <redaction-rule-set-actions> </redaction-rule-set-actions>
 
-            <redaction-circle-button [routerLink]="['../..']" tooltip="common.close" tooltipPosition="before" icon="red:close"></redaction-circle-button>
+            <redaction-circle-button [routerLink]="['../..']" tooltip="common.close" tooltipPosition="below" icon="red:close"></redaction-circle-button>
         </div>
     </div>
 
diff --git a/apps/red-ui/src/app/modules/admin/screens/dictionary-overview/dictionary-overview-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/dictionary-overview/dictionary-overview-screen.component.html
index f1eda64f4..2264a8179 100644
--- a/apps/red-ui/src/app/modules/admin/screens/dictionary-overview/dictionary-overview-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/dictionary-overview/dictionary-overview-screen.component.html
@@ -44,7 +44,7 @@
                 class="ml-6"
                 [routerLink]="['..']"
                 tooltip="common.close"
-                tooltipPosition="before"
+                tooltipPosition="below"
                 icon="red:close"
             ></redaction-circle-button>
         </div>
diff --git a/apps/red-ui/src/app/modules/admin/screens/digital-signature/digital-signature-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/digital-signature/digital-signature-screen.component.html
index 2b1157479..f1d85e718 100644
--- a/apps/red-ui/src/app/modules/admin/screens/digital-signature/digital-signature-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/digital-signature/digital-signature-screen.component.html
@@ -9,7 +9,7 @@
                 class="ml-6"
                 icon="red:close"
                 tooltip="common.close"
-                tooltipPosition="before"
+                tooltipPosition="below"
             ></redaction-circle-button>
         </div>
     </div>
diff --git a/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.html
index 80090a43a..1b9582206 100644
--- a/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.html
@@ -5,7 +5,7 @@
         <redaction-tabs [screen]="'file-attributes'"></redaction-tabs>
 
         <div class="actions flex-1">
-            <redaction-circle-button [routerLink]="['../..']" tooltip="common.close" tooltipPosition="before" icon="red:close"></redaction-circle-button>
+            <redaction-circle-button [routerLink]="['../..']" tooltip="common.close" tooltipPosition="below" icon="red:close"></redaction-circle-button>
         </div>
     </div>
 
@@ -124,7 +124,6 @@
                             <redaction-circle-button
                                 (action)="openAddEditAttributeDialog($event, attribute)"
                                 tooltip="file-attributes-listing.action.edit"
-                                tooltipPosition="before"
                                 type="dark-bg"
                                 icon="red:edit"
                             >
@@ -132,7 +131,6 @@
                             <redaction-circle-button
                                 (action)="openConfirmDeleteAttributeDialog($event, attribute)"
                                 tooltip="file-attributes-listing.action.delete"
-                                tooltipPosition="before"
                                 type="dark-bg"
                                 icon="red:trash"
                             >
diff --git a/apps/red-ui/src/app/modules/admin/screens/license-information/license-information-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/license-information/license-information-screen.component.html
index 306030a1f..c5aac03c2 100644
--- a/apps/red-ui/src/app/modules/admin/screens/license-information/license-information-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/license-information/license-information-screen.component.html
@@ -10,7 +10,7 @@
                 class="ml-6"
                 icon="red:close"
                 tooltip="common.close"
-                tooltipPosition="before"
+                tooltipPosition="below"
             ></redaction-circle-button>
         </div>
     </div>
diff --git a/apps/red-ui/src/app/modules/admin/screens/rule-sets-listing/rule-sets-listing-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/rule-sets-listing/rule-sets-listing-screen.component.html
index 05c8f550c..137f9212b 100644
--- a/apps/red-ui/src/app/modules/admin/screens/rule-sets-listing/rule-sets-listing-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/rule-sets-listing/rule-sets-listing-screen.component.html
@@ -18,7 +18,7 @@
                 *ngIf="permissionsService.isUser()"
                 [routerLink]="['/ui/projects/']"
                 tooltip="common.close"
-                tooltipPosition="before"
+                tooltipPosition="below"
                 icon="red:close"
             ></redaction-circle-button>
         </div>
diff --git a/apps/red-ui/src/app/modules/admin/screens/rules/rules-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/rules/rules-screen.component.html
index 6966e1e74..b9c94af66 100644
--- a/apps/red-ui/src/app/modules/admin/screens/rules/rules-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/rules/rules-screen.component.html
@@ -7,7 +7,7 @@
         <div class="flex-1 actions">
             <redaction-rule-set-actions></redaction-rule-set-actions>
 
-            <redaction-circle-button [routerLink]="['../..']" tooltip="common.close" tooltipPosition="before" icon="red:close"></redaction-circle-button>
+            <redaction-circle-button [routerLink]="['../..']" tooltip="common.close" tooltipPosition="below" icon="red:close"></redaction-circle-button>
         </div>
     </div>
 
diff --git a/apps/red-ui/src/app/modules/admin/screens/smtp-config/smtp-config-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/smtp-config/smtp-config-screen.component.html
index 710f9a660..b3effe5e7 100644
--- a/apps/red-ui/src/app/modules/admin/screens/smtp-config/smtp-config-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/smtp-config/smtp-config-screen.component.html
@@ -9,7 +9,7 @@
                 class="ml-6"
                 icon="red:close"
                 tooltip="common.close"
-                tooltipPosition="before"
+                tooltipPosition="below"
             ></redaction-circle-button>
         </div>
     </div>
diff --git a/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.html
index 912f3f12c..9c7313bee 100644
--- a/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.html
@@ -16,7 +16,7 @@
                 *ngIf="permissionsService.isUser()"
                 [routerLink]="['/ui/projects/']"
                 tooltip="common.close"
-                tooltipPosition="before"
+                tooltipPosition="below"
                 icon="red:close"
             ></redaction-circle-button>
         </div>
diff --git a/apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen.component.html
index cde10d956..454f9df46 100644
--- a/apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen.component.html
@@ -5,7 +5,7 @@
         <redaction-tabs [screen]="'watermark'"></redaction-tabs>
 
         <div class="actions flex-1">
-            <redaction-circle-button [routerLink]="['../..']" tooltip="common.close" tooltipPosition="before" icon="red:close"></redaction-circle-button>
+            <redaction-circle-button [routerLink]="['../..']" tooltip="common.close" tooltipPosition="below" icon="red:close"></redaction-circle-button>
         </div>
     </div>
 
diff --git a/apps/red-ui/src/app/modules/projects/components/file-actions/file-actions.component.html b/apps/red-ui/src/app/modules/projects/components/file-actions/file-actions.component.html
index a27c3d766..2baac9004 100644
--- a/apps/red-ui/src/app/modules/projects/components/file-actions/file-actions.component.html
+++ b/apps/red-ui/src/app/modules/projects/components/file-actions/file-actions.component.html
@@ -53,7 +53,7 @@
             *ngIf="screen === 'file-preview'"
             (action)="toggleViewDocumentInfo()"
             tooltip="file-preview.document-info"
-            tooltipPosition="before"
+            tooltipPosition="below"
             icon="red:status-info"
             [attr.aria-expanded]="activeDocumentInfo"
         ></redaction-circle-button>
@@ -117,7 +117,7 @@
         <redaction-circle-button
             (action)="reanalyseFile($event, fileStatus, 100)"
             *ngIf="permissionsService.canReanalyseFile(fileStatus) && screen === 'file-preview'"
-            [tooltipPosition]="'before'"
+            tooltipPosition="below"
             icon="red:refresh"
             tooltip="file-preview.reanalyse-notification"
             tooltipClass="warn small"
@@ -143,7 +143,7 @@
                 [disabled]="!permissionsService.isManager()"
                 [checked]="!fileStatus.isExcluded"
                 [matTooltip]="toggleTooltip | translate"
-                [matTooltipPosition]="toggleTooltipPosition"
+                [matTooltipPosition]="tooltipPosition"
                 [class.mr-24]="screen === 'project-overview'"
                 color="primary"
             >
diff --git a/apps/red-ui/src/app/modules/projects/components/file-actions/file-actions.component.ts b/apps/red-ui/src/app/modules/projects/components/file-actions/file-actions.component.ts
index 299939f46..4ad205099 100644
--- a/apps/red-ui/src/app/modules/projects/components/file-actions/file-actions.component.ts
+++ b/apps/red-ui/src/app/modules/projects/components/file-actions/file-actions.component.ts
@@ -119,12 +119,4 @@ export class FileActionsComponent implements OnInit {
 
         return this.fileStatus.isExcluded ? 'file-preview.toggle-analysis.enable' : 'file-preview.toggle-analysis.disable';
     }
-
-    get toggleTooltipPosition(): TooltipPosition {
-        if (!this.permissionsService.isManager() && this.screen === 'file-preview') {
-            return 'left';
-        }
-
-        return 'above';
-    }
 }
diff --git a/apps/red-ui/src/app/modules/projects/screens/file-preview-screen/file-preview-screen.component.html b/apps/red-ui/src/app/modules/projects/screens/file-preview-screen/file-preview-screen.component.html
index d1391ea97..48d5737a4 100644
--- a/apps/red-ui/src/app/modules/projects/screens/file-preview-screen/file-preview-screen.component.html
+++ b/apps/red-ui/src/app/modules/projects/screens/file-preview-screen/file-preview-screen.component.html
@@ -57,6 +57,7 @@
                         *ngIf="!editingReviewer"
                         [userId]="appStateService.activeFile.currentReviewer"
                         [withName]="!!appStateService.activeFile.currentReviewer"
+                        tooltipPosition="below"
                     ></redaction-initials-avatar>
                     <div
                         (click)="editingReviewer = true"
@@ -143,7 +144,7 @@
                 (action)="toggleFullScreen()"
                 [icon]="fullScreen ? 'red:exit-fullscreen' : 'red:fullscreen'"
                 tooltip="file-preview.fullscreen"
-                tooltipPosition="before"
+                tooltipPosition="below"
                 class="ml-2"
             ></redaction-circle-button>
 
@@ -155,7 +156,7 @@
                 type="primary"
                 class="ml-8"
                 tooltip="file-preview.download-original-file"
-                tooltipPosition="before"
+                tooltipPosition="below"
             ></redaction-circle-button>
             <redaction-circle-button
                 *ngIf="userPreferenceService.areDevFeaturesEnabled"
@@ -164,7 +165,7 @@
                 type="primary"
                 class="ml-8"
                 tooltip="file-preview.new-tab-ssr"
-                tooltipPosition="before"
+                tooltipPosition="below"
             ></redaction-circle-button>
             <redaction-circle-button
                 *ngIf="userPreferenceService.areDevFeaturesEnabled"
@@ -173,7 +174,7 @@
                 type="primary"
                 class="ml-8"
                 tooltip="file-preview.html-debug"
-                tooltipPosition="before"
+                tooltipPosition="below"
             ></redaction-circle-button>
             <!-- End Dev Mode Features-->
 
@@ -184,7 +185,7 @@
                 class="ml-8"
                 icon="red:close"
                 tooltip="common.close"
-                tooltipPosition="before"
+                tooltipPosition="below"
             ></redaction-circle-button>
         </div>
     </div>
diff --git a/apps/red-ui/src/app/modules/projects/screens/project-overview-screen/project-overview-screen.component.html b/apps/red-ui/src/app/modules/projects/screens/project-overview-screen/project-overview-screen.component.html
index 8a5c1ccff..0d9f31cad 100644
--- a/apps/red-ui/src/app/modules/projects/screens/project-overview-screen/project-overview-screen.component.html
+++ b/apps/red-ui/src/app/modules/projects/screens/project-overview-screen/project-overview-screen.component.html
@@ -1,5 +1,5 @@
-<section>
-    <div *ngIf="appStateService.activeProject" class="page-header">
+<section *ngIf="!!appStateService.activeProject">
+    <div class="page-header">
         <div class="filters">
             <div translate="filters.filter-by"></div>
             <redaction-filter
@@ -53,7 +53,8 @@
                 icon="red:assign"
             ></redaction-circle-button>
 
-            <redaction-file-download-btn [project]="appStateService.activeProject" [file]="appStateService.activeProject.files"> </redaction-file-download-btn>
+            <redaction-file-download-btn [project]="appStateService.activeProject" tooltipPosition="below" [file]="appStateService.activeProject.files">
+            </redaction-file-download-btn>
 
             <redaction-circle-button
                 *ngIf="permissionsService.displayReanalyseBtn()"
@@ -76,7 +77,7 @@
                 class="ml-6"
                 [routerLink]="['/ui/projects/']"
                 tooltip="common.close"
-                tooltipPosition="before"
+                tooltipPosition="below"
                 icon="red:close"
             ></redaction-circle-button>
         </div>
diff --git a/apps/red-ui/src/app/modules/shared/components/initials-avatar/initials-avatar.component.html b/apps/red-ui/src/app/modules/shared/components/initials-avatar/initials-avatar.component.html
index aa30c85eb..317f19a47 100644
--- a/apps/red-ui/src/app/modules/shared/components/initials-avatar/initials-avatar.component.html
+++ b/apps/red-ui/src/app/modules/shared/components/initials-avatar/initials-avatar.component.html
@@ -1,7 +1,7 @@
 <div class="wrapper">
     <div
         [className]="colorClass + ' oval ' + size + (hasBorder ? ' border' : '')"
-        [matTooltipPosition]="'above'"
+        [matTooltipPosition]="tooltipPosition"
         [matTooltip]="displayName || ('initials-avatar.unassigned' | translate)"
     >
         {{ initials }}
diff --git a/apps/red-ui/src/app/modules/shared/components/initials-avatar/initials-avatar.component.ts b/apps/red-ui/src/app/modules/shared/components/initials-avatar/initials-avatar.component.ts
index 0611f623b..79ee82fc0 100644
--- a/apps/red-ui/src/app/modules/shared/components/initials-avatar/initials-avatar.component.ts
+++ b/apps/red-ui/src/app/modules/shared/components/initials-avatar/initials-avatar.component.ts
@@ -16,6 +16,7 @@ export class InitialsAvatarComponent implements OnInit, OnChanges {
     @Input() public withName = false;
     @Input() public showYou = false;
     @Input() public alwaysShowName = false;
+    @Input() public tooltipPosition: 'below' | 'above' = 'above';
 
     public displayName: string;
 
diff --git a/apps/red-ui/src/app/modules/upload-download/upload-status-overlay/upload-status-overlay.component.html b/apps/red-ui/src/app/modules/upload-download/upload-status-overlay/upload-status-overlay.component.html
index 6ae8060f4..1189af41f 100644
--- a/apps/red-ui/src/app/modules/upload-download/upload-status-overlay/upload-status-overlay.component.html
+++ b/apps/red-ui/src/app/modules/upload-download/upload-status-overlay/upload-status-overlay.component.html
@@ -3,9 +3,8 @@
         <div class="title flex-1">
             {{ 'upload-status.dialog.title' | translate: { len: uploadService.files.length } }}
         </div>
-        <mat-icon *ngIf="!collapsed" class="collapse-icon" svgIcon="red:status-collapse"></mat-icon>
-        <mat-icon *ngIf="collapsed" class="collapse-icon" svgIcon="red:status-expand"></mat-icon>
-        <mat-icon (click)="closeDialog()" svgIcon="red:close"></mat-icon>
+        <redaction-circle-button [icon]="'red:status-' + (collapsed ? 'expand' : 'collapse')"></redaction-circle-button>
+        <redaction-circle-button icon="red:close" (action)="closeDialog()"></redaction-circle-button>
     </div>
     <div [hidden]="collapsed" class="upload-download-list">
         <div *ngFor="let projectId of uploadService.activeProjectKeys">
@@ -30,28 +29,26 @@
                     </div>
                 </div>
 
-                <div class="upload-download-progress" *ngIf="!model.error" mat-line>
+                <div class="upload-download-progress" *ngIf="!model.error">
                     <mat-progress-bar [value]="model.progress" color="primary" mode="determinate" [class.green]="model.completed"></mat-progress-bar>
                 </div>
 
                 <div class="actions" [class.error]="model.error" *ngIf="model.error || !model.completed">
-                    <div
-                        (click)="uploadItem(model)"
+                    <redaction-circle-button
                         *ngIf="model.error && !model.sizeError"
-                        [matTooltip]="'upload-status.dialog.actions.re-upload' | translate"
-                        class="pointer"
-                        matTooltipPosition="before"
-                    >
-                        <mat-icon svgIcon="red:refresh"></mat-icon>
-                    </div>
-                    <div
-                        (click)="cancelItem(model)"
-                        [matTooltip]="'upload-status.dialog.actions.cancel' | translate"
-                        class="pointer"
-                        matTooltipPosition="before"
-                    >
-                        <mat-icon svgIcon="red:close"></mat-icon>
-                    </div>
+                        icon="red:refresh"
+                        tooltip="upload-status.dialog.actions.re-upload"
+                        (action)="uploadItem(model)"
+                        type="dark-bg"
+                        tooltipPosition="before"
+                    ></redaction-circle-button>
+                    <redaction-circle-button
+                        icon="red:close"
+                        tooltip="upload-status.dialog.actions.cancel"
+                        (action)="cancelItem(model)"
+                        type="dark-bg"
+                        tooltipPosition="before"
+                    ></redaction-circle-button>
                 </div>
             </div>
         </div>
diff --git a/apps/red-ui/src/app/modules/upload-download/upload-status-overlay/upload-status-overlay.component.scss b/apps/red-ui/src/app/modules/upload-download/upload-status-overlay/upload-status-overlay.component.scss
index 0e76d6a28..e9f452aa3 100644
--- a/apps/red-ui/src/app/modules/upload-download/upload-status-overlay/upload-status-overlay.component.scss
+++ b/apps/red-ui/src/app/modules/upload-download/upload-status-overlay/upload-status-overlay.component.scss
@@ -106,6 +106,7 @@
                 top: 0;
                 right: 0;
                 height: 100%;
+                padding-right: 10px;
 
                 &.error {
                     display: flex;
@@ -115,11 +116,6 @@
                     background: linear-gradient(to right, rgba(244, 245, 247, 0) 0%, $grey-2 35%);
                     padding-left: 60px;
                 }
-
-                mat-icon {
-                    height: 13px;
-                    margin-right: 20px;
-                }
             }
 
             &:not(.error):hover {
diff --git a/apps/red-ui/src/assets/pdftron/stylesheet.css b/apps/red-ui/src/assets/pdftron/stylesheet.css
index 1e9218d4e..eb90df61e 100644
--- a/apps/red-ui/src/assets/pdftron/stylesheet.css
+++ b/apps/red-ui/src/assets/pdftron/stylesheet.css
@@ -29,3 +29,7 @@
 .TextPopup button[data-element='copyTextButton'] > div {
     color: #283241;
 }
+
+.Popup .Button img {
+    width: 18px;
+}
diff --git a/apps/red-ui/src/assets/styles/red-tooltips.scss b/apps/red-ui/src/assets/styles/red-tooltips.scss
index 55e95caad..e4a693a96 100644
--- a/apps/red-ui/src/assets/styles/red-tooltips.scss
+++ b/apps/red-ui/src/assets/styles/red-tooltips.scss
@@ -12,18 +12,18 @@
     overflow: visible !important;
     text-align: center;
 
-    &:after {
-        content: '';
-        position: absolute;
-        left: 50%;
-        margin-left: -5px;
-        width: 0;
-        height: 0;
-        z-index: 3000;
-        border-left: solid 5px transparent;
-        border-right: solid 5px transparent;
-        border-top: solid 6px $accent;
-    }
+    //&:after {
+    //    content: '';
+    //    position: absolute;
+    //    left: 50%;
+    //    margin-left: -5px;
+    //    width: 0;
+    //    height: 0;
+    //    z-index: 3000;
+    //    border-left: solid 5px transparent;
+    //    border-right: solid 5px transparent;
+    //    border-top: solid 6px $accent;
+    //}
 
     &.small {
         max-width: 160px;
@@ -31,7 +31,6 @@
 
     &.warn {
         background-color: $yellow-2;
-        text-align: initial;
         color: $accent;
 
         &:after {
@@ -39,24 +38,24 @@
         }
     }
 }
-
-.mat-tooltip[style*='transform-origin: center top']:after {
-    top: -6px;
-    transform: rotate(180deg);
-}
-
-.mat-tooltip[style*='transform-origin: center bottom']:after {
-    top: 100%;
-}
-
-.mat-tooltip[style*='transform-origin: right center']:after {
-    top: 50%;
-    left: 100%;
-    transform: rotate(-90deg) translateY(3px) translateX(3px);
-}
-
-.mat-tooltip[style*='transform-origin: left center']:after {
-    top: 50%;
-    left: 0;
-    transform: rotate(90deg) translateY(3px) translateX(-3px);
-}
+//
+//.mat-tooltip[style*='transform-origin: center top']:after {
+//    top: -6px;
+//    transform: rotate(180deg);
+//}
+//
+//.mat-tooltip[style*='transform-origin: center bottom']:after {
+//    top: 100%;
+//}
+//
+//.mat-tooltip[style*='transform-origin: right center']:after {
+//    top: 50%;
+//    left: 100%;
+//    transform: rotate(-90deg) translateY(3px) translateX(3px);
+//}
+//
+//.mat-tooltip[style*='transform-origin: left center']:after {
+//    top: 50%;
+//    left: 0;
+//    transform: rotate(90deg) translateY(3px) translateX(-3px);
+//}