From f35ac3d95f3c775faea6327d0edac3880112024c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adina=20=C8=9Aeudan?= <adina@devplant.ro>
Date: Tue, 24 Nov 2020 23:18:39 +0200
Subject: [PATCH] UI updates

---
 .../file-actions/file-actions.component.html  |  2 +-
 .../initials-avatar.component.ts              |  3 +++
 .../annotation-icon.component.scss            |  1 +
 .../chevron-button.component.scss             |  3 +--
 .../circle-button.component.html              |  1 +
 .../circle-button.component.scss              |  6 +++++
 .../circle-button/circle-button.component.ts  |  1 +
 .../user-button/user-button.component.html    |  2 +-
 .../user-button/user-button.component.scss    |  3 +--
 .../table-col-name.component.scss             |  2 +-
 .../type-filter/type-filter.component.scss    |  2 +-
 .../file-preview-screen.component.html        |  5 +++-
 .../file-preview-screen.component.scss        |  6 ++---
 .../project-listing-details.component.html    |  4 ++-
 .../project-listing-details.component.scss    | 10 +++++--
 .../project-listing-screen.component.html     |  2 +-
 .../project-listing-screen.component.scss     |  6 +++--
 .../project-details.component.html            | 27 ++++++++++++++-----
 .../project-details.component.scss            |  1 -
 .../project-overview-screen.component.html    |  3 +--
 .../project-overview-screen.component.scss    | 21 +++++++++++++++
 .../project-overview-screen.component.ts      |  2 +-
 apps/red-ui/src/assets/i18n/en.json           | 10 ++++---
 .../src/assets/icons/general/download.svg     | 23 +++-------------
 .../src/assets/icons/general/refresh.svg      | 27 ++++++-------------
 .../src/assets/styles/red-components.scss     |  9 +++++++
 apps/red-ui/src/assets/styles/red-grid.scss   |  6 +++--
 apps/red-ui/src/assets/styles/red-menu.scss   |  2 ++
 .../src/assets/styles/red-page-layout.scss    |  4 ---
 apps/red-ui/src/assets/styles/red-tables.scss |  4 +--
 30 files changed, 119 insertions(+), 79 deletions(-)
 mode change 100755 => 100644 apps/red-ui/src/assets/icons/general/download.svg

diff --git a/apps/red-ui/src/app/common/file-actions/file-actions.component.html b/apps/red-ui/src/app/common/file-actions/file-actions.component.html
index e0a6fc4dc..0df3d294f 100644
--- a/apps/red-ui/src/app/common/file-actions/file-actions.component.html
+++ b/apps/red-ui/src/app/common/file-actions/file-actions.component.html
@@ -44,7 +44,7 @@
         (action)="assignReviewer($event, fileStatus)"
         *ngIf="permissionsService.canAssignReviewer(fileStatus)"
         [tooltipPosition]="tooltipPosition"
-        tooltip="project-overview.assign.action"
+        [tooltip]="permissionsService.isManagerAndOwner() ? 'project-overview.assign' : 'project-overview.assign-me'"
         [icon]="permissionsService.isManagerAndOwner() ? 'red:assign' : 'red-assign-me'"
         [type]="buttonType"
     >
diff --git a/apps/red-ui/src/app/common/initials-avatar/initials-avatar.component.ts b/apps/red-ui/src/app/common/initials-avatar/initials-avatar.component.ts
index f35d6db32..927d596de 100644
--- a/apps/red-ui/src/app/common/initials-avatar/initials-avatar.component.ts
+++ b/apps/red-ui/src/app/common/initials-avatar/initials-avatar.component.ts
@@ -49,6 +49,9 @@ export class InitialsAvatarComponent implements OnInit, OnChanges {
     }
 
     public get colorClass() {
+        if (this._userService.userId === this.userId) {
+            return 'red-white';
+        }
         if (this.color.includes('-')) {
             return this.color;
         }
diff --git a/apps/red-ui/src/app/components/annotation-icon/annotation-icon.component.scss b/apps/red-ui/src/app/components/annotation-icon/annotation-icon.component.scss
index a04e54e21..754a6ca5d 100644
--- a/apps/red-ui/src/app/components/annotation-icon/annotation-icon.component.scss
+++ b/apps/red-ui/src/app/components/annotation-icon/annotation-icon.component.scss
@@ -19,6 +19,7 @@
     transform: scale(0.8) rotate(45deg);
 
     span {
+        font-size: 9px;
         transform: scale(1.6) rotate(-45deg);
     }
 }
diff --git a/apps/red-ui/src/app/components/buttons/chevron-button/chevron-button.component.scss b/apps/red-ui/src/app/components/buttons/chevron-button/chevron-button.component.scss
index efc59ac7f..d92b062a9 100644
--- a/apps/red-ui/src/app/components/buttons/chevron-button/chevron-button.component.scss
+++ b/apps/red-ui/src/app/components/buttons/chevron-button/chevron-button.component.scss
@@ -2,7 +2,6 @@ button {
     padding: 0 10px 0 14px;
 
     mat-icon {
-        width: 7px;
-        margin: 0 3.5px;
+        width: 14px;
     }
 }
diff --git a/apps/red-ui/src/app/components/buttons/circle-button/circle-button.component.html b/apps/red-ui/src/app/components/buttons/circle-button/circle-button.component.html
index 5ec714b6f..4743f6ed0 100644
--- a/apps/red-ui/src/app/components/buttons/circle-button/circle-button.component.html
+++ b/apps/red-ui/src/app/components/buttons/circle-button/circle-button.component.html
@@ -5,6 +5,7 @@
         [class.primary]="type === 'primary'"
         [class.warn]="type === 'warn'"
         [disabled]="disabled"
+        [class.small]="small"
         mat-icon-button
     >
         <mat-icon [svgIcon]="icon"></mat-icon>
diff --git a/apps/red-ui/src/app/components/buttons/circle-button/circle-button.component.scss b/apps/red-ui/src/app/components/buttons/circle-button/circle-button.component.scss
index 9f927a1ae..d63b4b056 100644
--- a/apps/red-ui/src/app/components/buttons/circle-button/circle-button.component.scss
+++ b/apps/red-ui/src/app/components/buttons/circle-button/circle-button.component.scss
@@ -5,6 +5,12 @@ button {
     width: 34px;
     line-height: 34px;
 
+    &.small {
+        height: 32px;
+        width: 32px;
+        line-height: 32px;
+    }
+
     mat-icon {
         width: 14px;
     }
diff --git a/apps/red-ui/src/app/components/buttons/circle-button/circle-button.component.ts b/apps/red-ui/src/app/components/buttons/circle-button/circle-button.component.ts
index d9d067a0f..ee2280b3c 100644
--- a/apps/red-ui/src/app/components/buttons/circle-button/circle-button.component.ts
+++ b/apps/red-ui/src/app/components/buttons/circle-button/circle-button.component.ts
@@ -11,6 +11,7 @@ export class CircleButtonComponent implements OnInit {
     @Input() tooltipPosition: 'above' | 'below' | 'before' | 'after' = 'above';
     @Input() tooltipClass: string;
     @Input() disabled = false;
+    @Input() small = false;
     @Input() type: 'default' | 'primary' | 'warn' | 'dark-bg' = 'default';
     @Output() action = new EventEmitter<any>();
 
diff --git a/apps/red-ui/src/app/components/buttons/user-button/user-button.component.html b/apps/red-ui/src/app/components/buttons/user-button/user-button.component.html
index 2aaa65363..96be18c96 100644
--- a/apps/red-ui/src/app/components/buttons/user-button/user-button.component.html
+++ b/apps/red-ui/src/app/components/buttons/user-button/user-button.component.html
@@ -1,4 +1,4 @@
 <button mat-button>
-    <redaction-initials-avatar color="red-white" size="small" [userId]="user?.id" [withName]="true"></redaction-initials-avatar>
+    <redaction-initials-avatar size="small" [userId]="user?.id" [withName]="true"></redaction-initials-avatar>
     <mat-icon svgIcon="red:arrow-down"></mat-icon>
 </button>
diff --git a/apps/red-ui/src/app/components/buttons/user-button/user-button.component.scss b/apps/red-ui/src/app/components/buttons/user-button/user-button.component.scss
index 1da22f3b7..b91354af0 100644
--- a/apps/red-ui/src/app/components/buttons/user-button/user-button.component.scss
+++ b/apps/red-ui/src/app/components/buttons/user-button/user-button.component.scss
@@ -10,8 +10,7 @@
         }
 
         mat-icon {
-            width: 7px;
-            margin: 0 3.5px;
+            width: 14px;
         }
     }
 
diff --git a/apps/red-ui/src/app/components/table-col-name/table-col-name.component.scss b/apps/red-ui/src/app/components/table-col-name/table-col-name.component.scss
index db3f92bf2..24380c470 100644
--- a/apps/red-ui/src/app/components/table-col-name/table-col-name.component.scss
+++ b/apps/red-ui/src/app/components/table-col-name/table-col-name.component.scss
@@ -10,7 +10,7 @@
         display: flex;
         font-weight: 600;
         gap: 8px;
-        padding: 8px 16px;
+        padding: 8px 24px;
     }
 
     .sort-arrows-container {
diff --git a/apps/red-ui/src/app/components/type-filter/type-filter.component.scss b/apps/red-ui/src/app/components/type-filter/type-filter.component.scss
index be9b54e1a..a5827e8f2 100644
--- a/apps/red-ui/src/app/components/type-filter/type-filter.component.scss
+++ b/apps/red-ui/src/app/components/type-filter/type-filter.component.scss
@@ -2,5 +2,5 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    gap: 4px;
+    gap: 8px;
 }
diff --git a/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.html b/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.html
index fa0022e55..fa0a5a6a6 100644
--- a/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.html
+++ b/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.html
@@ -129,7 +129,10 @@
                 >
                     <!--                    <div *ngFor="let page of displayedPages">-->
                     <div attr.anotation-page-header="{{ activeViewerPage }}" class="page-separator">
-                        <span class="all-caps-label"><span translate="page"></span> {{ activeViewerPage }}</span>
+                        <span class="all-caps-label" *ngIf="!!activeViewerPage"
+                            ><span translate="page"></span> {{ activeViewerPage }} - {{ displayedAnnotations[activeViewerPage]?.annotations?.length || 0 }}
+                            <span [translate]="displayedAnnotations[activeViewerPage]?.annotations?.length === 1 ? 'annotation' : 'annotations'"></span
+                        ></span>
                     </div>
 
                     <div class="heading-l no-annotations" *ngIf="!displayedAnnotations[activeViewerPage]">
diff --git a/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.scss b/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.scss
index 43fa82073..94c6eed1f 100644
--- a/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.scss
+++ b/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.scss
@@ -76,11 +76,11 @@ redaction-pdf-viewer {
 
             .page-separator {
                 border-bottom: 1px solid $separator;
-                height: 40px;
+                height: 32px;
                 box-sizing: border-box;
-                padding: 8px 10px;
+                padding: 0 10px;
                 display: flex;
-                align-items: flex-end;
+                align-items: center;
                 background-color: $grey-6;
             }
 
diff --git a/apps/red-ui/src/app/screens/project-listing-screen/project-listing-details/project-listing-details.component.html b/apps/red-ui/src/app/screens/project-listing-screen/project-listing-details/project-listing-details.component.html
index ee6dcd1e0..a4c2073f8 100644
--- a/apps/red-ui/src/app/screens/project-listing-screen/project-listing-details/project-listing-details.component.html
+++ b/apps/red-ui/src/app/screens/project-listing-screen/project-listing-details/project-listing-details.component.html
@@ -2,12 +2,13 @@
     <redaction-simple-doughnut-chart
         [config]="projectsChartData"
         [strokeWidth]="15"
+        [radius]="80"
         [subtitle]="'project-listing.stats.charts.projects'"
     ></redaction-simple-doughnut-chart>
 
     <div class="project-stats-container">
         <div class="project-stats-item">
-            <mat-icon svgIcon="red:document"></mat-icon>
+            <mat-icon svgIcon="red:needs-work"></mat-icon>
             <div>
                 <div class="heading">{{ totalPages | number }}</div>
                 <div translate="project-listing.stats.analyzed-pages"></div>
@@ -27,6 +28,7 @@
     <redaction-simple-doughnut-chart
         [config]="documentsChartData"
         [strokeWidth]="15"
+        [radius]="80"
         [subtitle]="'project-listing.stats.charts.total-documents'"
         [filter]="filters.statusFilters"
         (toggleFilter)="toggleFilter('statusFilters', $event)"
diff --git a/apps/red-ui/src/app/screens/project-listing-screen/project-listing-details/project-listing-details.component.scss b/apps/red-ui/src/app/screens/project-listing-screen/project-listing-details/project-listing-details.component.scss
index 538a27659..1d013d2b9 100644
--- a/apps/red-ui/src/app/screens/project-listing-screen/project-listing-details/project-listing-details.component.scss
+++ b/apps/red-ui/src/app/screens/project-listing-screen/project-listing-details/project-listing-details.component.scss
@@ -1,3 +1,5 @@
+@import '../../../../assets/styles/red-variables';
+
 :host {
     flex: 1;
     display: flex;
@@ -6,12 +8,16 @@
 
     > div {
         display: flex;
+        flex: 1;
         flex-direction: column;
         align-items: center;
+        padding-top: 50px;
+
+        &:first-child {
+            border-right: 1px solid $separator;
+        }
 
         .project-stats-container {
-            width: fit-content;
-
             .project-stats-item {
                 display: flex;
                 width: fit-content;
diff --git a/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.html b/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.html
index 006e86cf7..ee2c62b7f 100644
--- a/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.html
+++ b/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.html
@@ -63,7 +63,7 @@
                     [class.pointer]="canOpenProject(pw)"
                 >
                     <div>
-                        <div class="table-item-title">
+                        <div class="table-item-title heading">
                             {{ pw.project.projectName }}
                         </div>
                         <div class="small-label stats-subtitle">
diff --git a/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.scss b/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.scss
index 218ff3640..df804a69e 100644
--- a/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.scss
+++ b/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.scss
@@ -1,4 +1,5 @@
 @import '../../../assets/styles/red-mixins';
+@import '../../../assets/styles/red-variables';
 
 .left-container {
     width: calc(100vw - #{$right-container-width} - 90px);
@@ -18,6 +19,7 @@
 
 .right-fixed-container {
     display: flex;
-    width: 430px;
-    padding-top: 50px;
+    width: calc(430px + 2 * #{$right-container-horizontal-padding});
+    height: calc(100vh - 110px);
+    padding: 0;
 }
diff --git a/apps/red-ui/src/app/screens/project-overview-screen/project-details/project-details.component.html b/apps/red-ui/src/app/screens/project-overview-screen/project-details/project-details.component.html
index a944e3bfe..664f65a7f 100644
--- a/apps/red-ui/src/app/screens/project-overview-screen/project-details/project-details.component.html
+++ b/apps/red-ui/src/app/screens/project-overview-screen/project-details/project-details.component.html
@@ -5,7 +5,12 @@
 <div class="mt-24">
     <div class="all-caps-label" translate="project-details.owner"></div>
     <div class="mt-12">
-        <redaction-initials-avatar [userId]="appStateService.activeProject.project.ownerId" size="large" withName="true"></redaction-initials-avatar>
+        <redaction-initials-avatar
+            [userId]="appStateService.activeProject.project.ownerId"
+            size="large"
+            withName="true"
+            color="gray"
+        ></redaction-initials-avatar>
     </div>
 </div>
 
@@ -13,14 +18,22 @@
     <div class="all-caps-label" translate="project-details.members"></div>
     <div class="flex members-container mt-12">
         <div *ngFor="let userId of displayMembers" class="member">
-            <redaction-initials-avatar [userId]="userId" size="large"></redaction-initials-avatar>
+            <redaction-initials-avatar [userId]="userId" size="large" color="gray"></redaction-initials-avatar>
         </div>
         <div *ngIf="overflowCount" class="member">
             <div class="oval large white-dark">+{{ overflowCount }}</div>
         </div>
-        <div (click)="openAssignProjectMembersDialog.emit()" *ngIf="permissionsService.isManager()" class="member pointer">
-            <div class="oval red-white large">+</div>
-        </div>
+        <!--        <div (click)="openAssignProjectMembersDialog.emit()" *ngIf="permissionsService.isManager()" class="member pointer">-->
+        <!--            <div class="oval red-white large">+</div>-->
+        <!--        </div>-->
+        <redaction-circle-button
+            (action)="openAssignProjectMembersDialog.emit()"
+            icon="red:plus"
+            *ngIf="permissionsService.isManager()"
+            type="primary"
+            tooltip="project-details.assign-members"
+        >
+        </redaction-circle-button>
     </div>
 </div>
 
@@ -29,7 +42,7 @@
         (toggleFilter)="toggleFilter('statusFilters', $event)"
         [config]="translateChartService.translateStatus(documentsChartData)"
         [filter]="filters.statusFilters"
-        [radius]="70"
+        [radius]="63"
         [strokeWidth]="15"
         [subtitle]="'project-overview.project-details.charts.documents-in-project'"
         direction="row"
@@ -71,7 +84,7 @@
     </div>
 </div>
 
-<div class="mt-32">
+<div class="mt-32" *ngIf="!!appStateService.activeProject.project.description">
     <div class="heading" translate="project-overview.project-details.description"></div>
     <div class="mt-8">{{ appStateService.activeProject.project.description }}</div>
 </div>
diff --git a/apps/red-ui/src/app/screens/project-overview-screen/project-details/project-details.component.scss b/apps/red-ui/src/app/screens/project-overview-screen/project-details/project-details.component.scss
index 5d103ffd2..5b557b11c 100644
--- a/apps/red-ui/src/app/screens/project-overview-screen/project-details/project-details.component.scss
+++ b/apps/red-ui/src/app/screens/project-overview-screen/project-details/project-details.component.scss
@@ -12,7 +12,6 @@
 
     > div {
         display: flex;
-        gap: 8px;
         align-items: center;
         border-radius: 4px;
         cursor: pointer;
diff --git a/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.html b/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.html
index 3fdee5740..89952af01 100644
--- a/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.html
+++ b/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.html
@@ -164,7 +164,7 @@
                         <mat-icon class="selection-icon active" *ngIf="isFileSelected(fileStatus)" svgIcon="red:radio-selected"></mat-icon>
                     </div>
 
-                    <div matTooltipPosition="above" [matTooltip]="'[' + fileStatus.status + '] ' + fileStatus.filename">
+                    <div [title]="'[' + fileStatus.status + '] ' + fileStatus.filename">
                         <div class="filename-wrapper">
                             <div [class.disabled]="fileStatus.isPending || fileStatus.isProcessing" [class.error]="fileStatus.isError" class="table-item-title">
                                 {{ fileStatus.filename }}
@@ -213,7 +213,6 @@
                                 class="mr-4"
                             ></redaction-file-actions>
                             <redaction-status-bar
-                                class="mr-8"
                                 *ngIf="fileStatus.isWorkable"
                                 [config]="[
                                     {
diff --git a/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.scss b/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.scss
index ddbee161d..08402177d 100644
--- a/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.scss
+++ b/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.scss
@@ -12,7 +12,21 @@
         grid-template-columns: auto 3fr 2fr 1fr 1fr 2fr auto;
     }
 
+    .header-item {
+        padding: 0 24px 0 10px;
+    }
+
+    redaction-table-col-name::ng-deep {
+        > div {
+            padding-left: 10px;
+        }
+    }
+
     .table-item {
+        > div {
+            padding-left: 10px;
+        }
+
         .disabled {
             color: $grey-7;
         }
@@ -53,9 +67,16 @@
     }
 }
 
+.left-container {
+    width: calc(100vw - 313px - 16px - 24px);
+}
+
 .right-fixed-container {
     overflow-y: scroll;
     @include no-scroll-bar();
+    height: calc(100vh - 110px - 2 * 16px);
+    width: 313px;
+    padding: 16px 16px 16px 24px;
 }
 
 .reanalyse-link {
diff --git a/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.ts b/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.ts
index 4580068d6..fd9dafee0 100644
--- a/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.ts
+++ b/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.ts
@@ -143,7 +143,7 @@ export class ProjectOverviewScreenComponent implements OnInit, OnDestroy {
     }
 
     public toggleSelectAll() {
-        if (this.areAllFilesSelected) {
+        if (this.areSomeFilesSelected) {
             this.selectedFileIds = [];
         } else {
             this.selectedFileIds = this.displayedFiles.map((file) => file.fileId);
diff --git a/apps/red-ui/src/assets/i18n/en.json b/apps/red-ui/src/assets/i18n/en.json
index 11ff1d0eb..ea2e43e07 100644
--- a/apps/red-ui/src/assets/i18n/en.json
+++ b/apps/red-ui/src/assets/i18n/en.json
@@ -138,7 +138,8 @@
             }
         },
         "owner": "Owner",
-        "members": "Members"
+        "members": "Members",
+        "assign-members": "Assign Members"
     },
     "project-overview": {
         "header-actions": {
@@ -170,9 +171,8 @@
         "report": {
             "action": "Download redaction report"
         },
-        "assign": {
-            "action": "Assign Reviewer"
-        },
+        "assign": "Assign Reviewer",
+        "assign-me": "Assign To Me",
         "table-header": {
             "title": "{{length}} documents",
             "bulk-select": "Toggle Selection"
@@ -373,6 +373,8 @@
     "dictionary": "Dictionary",
     "content": "Reason",
     "page": "Page",
+    "annotation": "Annotation",
+    "annotations": "Annotations",
     "filter": {
         "hint": "Hints only",
         "redaction": "Redacted",
diff --git a/apps/red-ui/src/assets/icons/general/download.svg b/apps/red-ui/src/assets/icons/general/download.svg
old mode 100755
new mode 100644
index ff267b600..f31108133
--- a/apps/red-ui/src/assets/icons/general/download.svg
+++ b/apps/red-ui/src/assets/icons/general/download.svg
@@ -1,22 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg height="16px" version="1.1" viewBox="0 0 16 16" width="16px" xmlns="http://www.w3.org/2000/svg"
->
-  <!-- Generator: Sketch 48.2 (47327) - http://www.bohemiancoding.com/sketch -->
-  <defs>
-    <polygon id="path-1" points="0 0 280 0 280 166 3.14002472e-16 166"></polygon>
-    <filter filterUnits="objectBoundingBox" height="138.0%" id="filter-2" width="122.5%" x="-10.5%" y="-17.2%">
-      <feOffset dx="2" dy="3" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
-      <feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="10"></feGaussianBlur>
-      <feColorMatrix in="shadowBlurOuter1" type="matrix"
-                     values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.1 0"></feColorMatrix>
-    </filter>
-  </defs>
-  <g fill="none" fill-rule="evenodd" id="Artboard" stroke="none" stroke-width="1"
-     transform="translate(-141.000000, -1387.000000)">
-    <g id="Card-Options-Menu" transform="translate(125.000000, 1263.000000)">
-      <path
-        d="M16.4603029,136.443345 C16.7333269,136.443345 16.9706057,136.685161 16.9706057,136.97588 L16.9706057,138.002218 C16.9706057,138.481802 17.3571344,138.881833 17.8239685,138.881833 L30.0762814,138.882865 C30.5497554,138.882865 30.9293943,138.49484 30.9293943,138.00325 L30.9293943,136.976913 C30.9293943,136.678859 31.1536674,136.443345 31.4396971,136.443345 C31.7258916,136.443345 31.95,136.678773 31.95,136.976913 L31.95,138.00325 C31.95,139.078606 31.1147393,139.95 30.0762814,139.95 L17.8239643,139.95 C16.7854618,139.95 15.95,139.078559 15.95,138.00325 L15.95,136.976913 C15.95,136.678773 16.1741084,136.443345 16.4603029,136.443345 Z M23.6132943,136.454633 C23.6127555,136.454534 23.6025385,136.447519 23.5826431,136.433585 C23.5776106,136.428379 22.3379357,135.328707 19.8636184,133.134568 C19.6200448,132.92886 19.5918905,132.560088 19.7949244,132.327161 C19.9944005,132.074418 20.3537924,132.045058 20.5809654,132.256889 L23.3545938,134.826617 L23.3545938,124.527304 C23.3545938,124.204485 23.6006072,123.95 23.9143338,123.95 C24.2080783,123.95 24.4601314,124.177706 24.555954,124.505089 L24.4700347,134.789438 L27.3255059,132.257625 C27.5466824,132.052627 27.9053068,132.089094 28.1109133,132.325412 C28.3080663,132.553026 28.2732938,132.920804 28.0448415,133.133785 L24.3347053,136.423173 C24.3170916,136.441394 24.3170916,136.441394 24.27885,136.45915 C24.2693707,136.469889 24.2693707,136.469889 24.2541673,136.481683 C24.2378444,136.492285 24.2251949,136.498282 24.2098311,136.500305 C24.1964444,136.513552 24.1809544,136.521901 24.157798,136.521901 C24.1312207,136.536599 24.1152977,136.542724 24.0960478,136.542724 L23.8112356,136.542724 C23.7916746,136.542724 23.7758799,136.536778 23.757502,136.526882 C23.7240871,136.521628 23.7082583,136.511798 23.6940863,136.49656 C23.6731626,136.485525 23.6731626,136.485525 23.6681781,136.481563 C23.6433368,136.479727 23.627485,136.46989 23.6132943,136.454633 Z"
-        fill="currentColor" fill-rule="nonzero" id="download-copy-2"></path>
+<svg width="100px" height="100px" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>download</title>
+    <g id="download" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M10,60 L10,90 L90,90 L90,60 L100,60 L100,100 L0,100 L0,60 L10,60 Z M55,0 L55,61 L68,48 L75,55 L50,80 L25,55 L32,48 L45,61 L45,0 L55,0 Z" id="Combined-Shape" fill="currentColor" fill-rule="nonzero"></path>
     </g>
-  </g>
 </svg>
diff --git a/apps/red-ui/src/assets/icons/general/refresh.svg b/apps/red-ui/src/assets/icons/general/refresh.svg
index 51cc16f7b..018632553 100644
--- a/apps/red-ui/src/assets/icons/general/refresh.svg
+++ b/apps/red-ui/src/assets/icons/general/refresh.svg
@@ -1,20 +1,9 @@
-<svg height="487.23px" id="Capa_1" style="enable-background:new 0 0 487.23 487.23;" version="1.1"
-     viewBox="0 0 487.23 487.23"
-     width="487.23px" x="0px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"
-     y="0px">
-<g fill="currentColor">
-		<path d="M55.323,203.641c15.664,0,29.813-9.405,35.872-23.854c25.017-59.604,83.842-101.61,152.42-101.61
-			c37.797,0,72.449,12.955,100.23,34.442l-21.775,3.371c-7.438,1.153-13.224,7.054-14.232,14.512
-			c-1.01,7.454,3.008,14.686,9.867,17.768l119.746,53.872c5.249,2.357,11.33,1.904,16.168-1.205
-			c4.83-3.114,7.764-8.458,7.796-14.208l0.621-131.943c0.042-7.506-4.851-14.144-12.024-16.332
-			c-7.185-2.188-14.947,0.589-19.104,6.837l-16.505,24.805C370.398,26.778,310.1,0,243.615,0C142.806,0,56.133,61.562,19.167,149.06
-			c-5.134,12.128-3.84,26.015,3.429,36.987C29.865,197.023,42.152,203.641,55.323,203.641z"/>
-    <path d="M464.635,301.184c-7.27-10.977-19.558-17.594-32.728-17.594c-15.664,0-29.813,9.405-35.872,23.854
-			c-25.018,59.604-83.843,101.61-152.42,101.61c-37.798,0-72.45-12.955-100.232-34.442l21.776-3.369
-			c7.437-1.153,13.223-7.055,14.233-14.514c1.009-7.453-3.008-14.686-9.867-17.768L49.779,285.089
-			c-5.25-2.356-11.33-1.905-16.169,1.205c-4.829,3.114-7.764,8.458-7.795,14.207l-0.622,131.943
-			c-0.042,7.506,4.85,14.144,12.024,16.332c7.185,2.188,14.948-0.59,19.104-6.839l16.505-24.805
-			c44.004,43.32,104.303,70.098,170.788,70.098c100.811,0,187.481-61.561,224.446-149.059
-			C473.197,326.043,471.903,312.157,464.635,301.184z"/>
-</g>
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="100px" height="100px" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>reanalyse</title>
+    <g id="reanalyse" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="refresh" fill="currentColor" fill-rule="nonzero">
+            <path d="M12.5,63.5 C18,79.5 33,90 50,90 C62,90 73.5,84.5 81,75 L81,75 L65,75 L65,65 L95,65 L95,95 L85,95 L85,85.5 C76,94.5 63.5,100 50,100 C29,100 10,86.5 3,67 L3,67 Z M50,0 C71,0 90,13.5 97,33 L97,33 L87.5,36.5 C82,20.5 67,10 50,10 C38,10 26.5,15.5 19,25 L19,25 L35,25 L35,35 L5,35 L5,5 L15,5 L15,14.5 C24.5,5.5 37,0 50,0 Z" id="Combined-Shape"></path>
+        </g>
+    </g>
 </svg>
diff --git a/apps/red-ui/src/assets/styles/red-components.scss b/apps/red-ui/src/assets/styles/red-components.scss
index b0c7112e9..5a48d3531 100644
--- a/apps/red-ui/src/assets/styles/red-components.scss
+++ b/apps/red-ui/src/assets/styles/red-components.scss
@@ -21,6 +21,15 @@
         font-size: 13px;
     }
 
+    &.gray-dark {
+        background-color: $grey-6;
+    }
+
+    &.gray-red {
+        background-color: $grey-6;
+        color: $red-1;
+    }
+
     &.lightgray-dark {
         background-color: $grey-4;
     }
diff --git a/apps/red-ui/src/assets/styles/red-grid.scss b/apps/red-ui/src/assets/styles/red-grid.scss
index 0f2dc749c..416046ea9 100644
--- a/apps/red-ui/src/assets/styles/red-grid.scss
+++ b/apps/red-ui/src/assets/styles/red-grid.scss
@@ -3,13 +3,15 @@
 .header-item {
     background-color: $grey-6;
     height: 50px;
-    padding: 0 16px;
+    padding: 0 24px;
     display: flex;
     align-items: center;
     z-index: 1;
     position: sticky;
     top: 50px;
-    gap: 16px;
+    gap: 10px;
+    border-bottom: 1px solid $separator;
+    box-sizing: border-box;
 
     .actions {
         display: flex;
diff --git a/apps/red-ui/src/assets/styles/red-menu.scss b/apps/red-ui/src/assets/styles/red-menu.scss
index eda490c58..a08b46ba5 100644
--- a/apps/red-ui/src/assets/styles/red-menu.scss
+++ b/apps/red-ui/src/assets/styles/red-menu.scss
@@ -4,6 +4,8 @@
     border-radius: 8px !important;
     box-shadow: 0 2px 6px 0 rgba(40, 50, 65, 0.3);
     max-width: none !important;
+    min-width: 180px !important;
+    margin-top: 4px;
 
     .mat-menu-item {
         font-family: 'Inter', sans-serif;
diff --git a/apps/red-ui/src/assets/styles/red-page-layout.scss b/apps/red-ui/src/assets/styles/red-page-layout.scss
index 1782fe506..c3f2516c8 100644
--- a/apps/red-ui/src/assets/styles/red-page-layout.scss
+++ b/apps/red-ui/src/assets/styles/red-page-layout.scss
@@ -48,9 +48,6 @@ body {
 .right-fixed-container {
     border-left: 1px solid $grey-4;
     background: $white;
-    height: calc(100vh - 110px - 2 * #{$right-container-vertical-padding});
-    width: $right-container-inside-width;
-    padding: $right-container-vertical-padding $right-container-horizontal-padding;
     position: fixed;
     right: 0;
     z-index: 2;
@@ -83,7 +80,6 @@ body {
 
 .left-container {
     height: calc(100vh - 61px - 50px);
-    width: calc(100vw - #{$right-container-width});
 }
 
 .break-20 {
diff --git a/apps/red-ui/src/assets/styles/red-tables.scss b/apps/red-ui/src/assets/styles/red-tables.scss
index 20354ada4..58d592ca6 100644
--- a/apps/red-ui/src/assets/styles/red-tables.scss
+++ b/apps/red-ui/src/assets/styles/red-tables.scss
@@ -42,7 +42,7 @@ redaction-table-col-name,
         > div {
             height: 80px;
             border-bottom: 1px solid $separator;
-            padding: 0 16px;
+            padding: 0 24px;
         }
 
         .action-buttons {
@@ -55,7 +55,7 @@ redaction-table-col-name,
             flex-direction: row;
             align-items: center;
             padding-left: 100px;
-            padding-right: 8px;
+            padding-right: 24px;
             background: linear-gradient(to right, rgba(244, 245, 247, 0) 0%, #f4f5f7 35%);
 
             mat-icon {