From 76ea03549139b5be7a14ded0650ed7d3aa4f5565 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adina=20=C8=9Aeudan?= <adina@devplant.ro>
Date: Tue, 15 Dec 2020 15:55:22 +0200
Subject: [PATCH] UI updates

---
 .../app/components/comments/comments.component.html   |  2 +-
 .../add-edit-project-dialog.component.html            | 10 +++-------
 .../assign-owner-dialog.component.html                |  2 +-
 .../confirmation-dialog.component.html                |  4 ++--
 .../manual-annotation-dialog.component.html           |  4 +++-
 .../add-edit-dictionary-dialog.component.html         |  4 +++-
 .../watermark-screen/watermark-screen.component.html  | 11 +++--------
 .../project-listing-details.component.scss            |  7 +------
 .../project-details/project-details.component.html    |  6 +++---
 .../project-details/project-details.component.scss    |  4 ++--
 apps/red-ui/src/assets/styles/red-button.scss         |  6 +++++-
 11 files changed, 27 insertions(+), 33 deletions(-)

diff --git a/apps/red-ui/src/app/components/comments/comments.component.html b/apps/red-ui/src/app/components/comments/comments.component.html
index 12854b686..e1faa0d7b 100644
--- a/apps/red-ui/src/app/components/comments/comments.component.html
+++ b/apps/red-ui/src/app/components/comments/comments.component.html
@@ -30,7 +30,7 @@
 
     <form (submit)="addComment()" *ngIf="addingComment" [formGroup]="commentForm">
         <div class="red-input-group">
-            <input [placeholder]="translateService.instant('comments.add-comment')" formControlName="comment" name="comment" type="text" />
+            <input [placeholder]="translateService.instant('comments.add-comment')" formControlName="comment" name="comment" type="text" class="w-full" />
         </div>
     </form>
 
diff --git a/apps/red-ui/src/app/dialogs/add-edit-project-dialog/add-edit-project-dialog.component.html b/apps/red-ui/src/app/dialogs/add-edit-project-dialog/add-edit-project-dialog.component.html
index fd0f49496..d96420c96 100644
--- a/apps/red-ui/src/app/dialogs/add-edit-project-dialog/add-edit-project-dialog.component.html
+++ b/apps/red-ui/src/app/dialogs/add-edit-project-dialog/add-edit-project-dialog.component.html
@@ -56,13 +56,9 @@
         </div>
 
         <div class="dialog-actions">
-            <button
-                [disabled]="disabled || !changed"
-                color="primary"
-                mat-flat-button
-                translate="project-listing.add-edit-dialog.actions.save"
-                type="submit"
-            ></button>
+            <button [disabled]="disabled || !changed" color="primary" mat-flat-button type="submit">
+                {{ 'project-listing.add-edit-dialog.actions.save' | translate }}
+            </button>
 
             <redaction-icon-button
                 [disabled]="disabled || !changed"
diff --git a/apps/red-ui/src/app/dialogs/assign-owner-dialog/assign-owner-dialog.component.html b/apps/red-ui/src/app/dialogs/assign-owner-dialog/assign-owner-dialog.component.html
index f3ab9efcf..c67810280 100644
--- a/apps/red-ui/src/app/dialogs/assign-owner-dialog/assign-owner-dialog.component.html
+++ b/apps/red-ui/src/app/dialogs/assign-owner-dialog/assign-owner-dialog.component.html
@@ -48,7 +48,7 @@
         </div>
 
         <div class="dialog-actions">
-            <button color="primary" mat-flat-button type="submit" [disabled]="!usersForm.valid || !changed" class="red-button">
+            <button [disabled]="!usersForm.valid || !changed" color="primary" mat-flat-button type="submit">
                 {{ 'assign-' + data.type + '-owner.dialog.save' | translate }}
             </button>
 
diff --git a/apps/red-ui/src/app/dialogs/confirmation-dialog/confirmation-dialog.component.html b/apps/red-ui/src/app/dialogs/confirmation-dialog/confirmation-dialog.component.html
index b8eaf7cbf..310267be3 100644
--- a/apps/red-ui/src/app/dialogs/confirmation-dialog/confirmation-dialog.component.html
+++ b/apps/red-ui/src/app/dialogs/confirmation-dialog/confirmation-dialog.component.html
@@ -8,10 +8,10 @@
     </div>
 
     <div class="dialog-actions">
-        <button (click)="confirm()" color="primary" mat-flat-button class="red-button">
+        <button (click)="confirm()" color="primary" mat-flat-button>
             {{ confirmationDialogInput.confirmationText | translate: confirmationDialogInput.translateParams }}
         </button>
-        <button (click)="deny()" color="primary" mat-flat-button class="red-button">
+        <button (click)="deny()" color="primary" mat-flat-button>
             {{ confirmationDialogInput.denyText | translate: confirmationDialogInput.translateParams }}
         </button>
     </div>
diff --git a/apps/red-ui/src/app/dialogs/manual-redaction-dialog/manual-annotation-dialog.component.html b/apps/red-ui/src/app/dialogs/manual-redaction-dialog/manual-annotation-dialog.component.html
index 2ac26d0e4..5f36ff807 100644
--- a/apps/red-ui/src/app/dialogs/manual-redaction-dialog/manual-annotation-dialog.component.html
+++ b/apps/red-ui/src/app/dialogs/manual-redaction-dialog/manual-annotation-dialog.component.html
@@ -47,7 +47,9 @@
         </div>
 
         <div class="dialog-actions">
-            <button color="primary" mat-flat-button [disabled]="!redactionForm.valid" translate="manual-annotation.dialog.actions.save" type="submit"></button>
+            <button color="primary" mat-flat-button [disabled]="!redactionForm.valid" type="submit">
+                {{ 'manual-annotation.dialog.actions.save' | translate }}
+            </button>
         </div>
     </form>
 
diff --git a/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/add-edit-dictionary-dialog/add-edit-dictionary-dialog.component.html b/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/add-edit-dictionary-dialog/add-edit-dictionary-dialog.component.html
index 45b1b5915..e46f46e53 100644
--- a/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/add-edit-dictionary-dialog/add-edit-dictionary-dialog.component.html
+++ b/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/add-edit-dictionary-dialog/add-edit-dictionary-dialog.component.html
@@ -61,7 +61,9 @@
         </div>
 
         <div class="dialog-actions">
-            <button [disabled]="dictionaryForm.invalid || !changed" color="primary" mat-flat-button translate="add-edit-dictionary.save" type="submit"></button>
+            <button [disabled]="dictionaryForm.invalid || !changed" color="primary" mat-flat-button type="submit">
+                {{ 'add-edit-dictionary.save' | translate }}
+            </button>
         </div>
     </form>
 
diff --git a/apps/red-ui/src/app/screens/admin/watermark-screen/watermark-screen.component.html b/apps/red-ui/src/app/screens/admin/watermark-screen/watermark-screen.component.html
index c6c53324b..c3d720290 100644
--- a/apps/red-ui/src/app/screens/admin/watermark-screen/watermark-screen.component.html
+++ b/apps/red-ui/src/app/screens/admin/watermark-screen/watermark-screen.component.html
@@ -71,14 +71,9 @@
             </form>
 
             <div class="actions-container">
-                <button
-                    color="primary"
-                    mat-flat-button
-                    (click)="save()"
-                    [disabled]="configForm.invalid || !changed"
-                    class="red-button"
-                    translate="watermark-screen.action.save"
-                ></button>
+                <button color="primary" mat-flat-button (click)="save()" [disabled]="configForm.invalid || !changed">
+                    {{ 'watermark-screen.action.save' | translate }}
+                </button>
 
                 <div class="all-caps-label pointer cancel" [class.disabled]="!changed" (click)="revert()" translate="watermark-screen.action.revert"></div>
             </div>
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 e74f5c002..05197f10b 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
@@ -4,19 +4,14 @@
     flex: 1;
     display: flex;
     flex-direction: row;
-    justify-content: space-between;
+    justify-content: space-evenly;
 
     > div {
         display: flex;
-        flex: 1;
         flex-direction: column;
         align-items: center;
         padding-top: 50px;
 
-        //&:first-child {
-        //    border-right: 1px solid $separator;
-        //}
-
         .project-stats-container {
             .project-stats-item {
                 display: flex;
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 9d1d92815..ca7fa8730 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
@@ -47,13 +47,13 @@
     ></redaction-simple-doughnut-chart>
 </div>
 
-<div *ngIf="hasFiles" class="mt-24 legend">
+<div *ngIf="hasFiles" class="mt-24 legend pb-32">
     <div (click)="toggleFilter('needsWorkFilters', filter.key)" *ngFor="let filter of filters.needsWorkFilters" [class.active]="filter.checked">
         <redaction-type-filter [filter]="filter"></redaction-type-filter>
     </div>
 </div>
 
-<div class="mt-32 small-label stats-subtitle">
+<div class="pb-32 small-label stats-subtitle">
     <div>
         <mat-icon svgIcon="red:document"></mat-icon>
         <span>{{ 'project-overview.project-details.stats.documents' | translate: { count: appStateService.activeProject.files.length } }}</span>
@@ -86,7 +86,7 @@
     </div>
 </div>
 
-<div class="mt-32" *ngIf="!!appStateService.activeProject.project.description">
+<div class="pb-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 6512f227d..9b01c9835 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
@@ -63,6 +63,6 @@
     margin-top: 24px;
 }
 
-.mt-32 {
-    margin-top: 32px;
+.pb-32 {
+    padding-bottom: 32px;
 }
diff --git a/apps/red-ui/src/assets/styles/red-button.scss b/apps/red-ui/src/assets/styles/red-button.scss
index b80c936c2..c152790fe 100644
--- a/apps/red-ui/src/assets/styles/red-button.scss
+++ b/apps/red-ui/src/assets/styles/red-button.scss
@@ -38,7 +38,11 @@
 
     &.mat-button-disabled {
         background-color: $red-1;
-        color: rgba($white, 0.5);
+        color: $white;
+
+        > * {
+            opacity: 0.5;
+        }
     }
 
     &:not(.mat-button-disabled):hover {