From e4b34f69291769d23df3f70d5db37ecf61e6471b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adina=20=C8=9Aeudan?= <adina@devplant.ro>
Date: Fri, 11 Dec 2020 20:25:09 +0200
Subject: [PATCH] More cancel styles, save and add members button with icon

---
 .../buttons/icon-button/icon-button.component.html |  2 +-
 .../buttons/icon-button/icon-button.component.scss | 14 ++++----------
 .../buttons/icon-button/icon-button.component.ts   |  2 +-
 .../add-edit-project-dialog.component.html         | 13 ++++++-------
 .../dictionary-overview-screen.component.html      |  7 +------
 .../admin/rules-screen/rules-screen.component.html |  7 +------
 apps/red-ui/src/assets/styles/red-button.scss      |  4 ++++
 7 files changed, 18 insertions(+), 31 deletions(-)

diff --git a/apps/red-ui/src/app/components/buttons/icon-button/icon-button.component.html b/apps/red-ui/src/app/components/buttons/icon-button/icon-button.component.html
index dc429e50f..b6f760eec 100644
--- a/apps/red-ui/src/app/components/buttons/icon-button/icon-button.component.html
+++ b/apps/red-ui/src/app/components/buttons/icon-button/icon-button.component.html
@@ -1,4 +1,4 @@
-<button mat-button [class.overlay]="showDot" [class.primary]="primary" (click)="action.emit($event)" [class.link-button]="linkButton" [disabled]="disabled">
+<button mat-button [class.overlay]="showDot" [class.primary]="primary" (click)="action.emit($event)" [class.show-bg]="type === 'show-bg'" [disabled]="disabled">
     <mat-icon [svgIcon]="icon" *ngIf="icon"></mat-icon>
     <span [translate]="text"></span>
 </button>
diff --git a/apps/red-ui/src/app/components/buttons/icon-button/icon-button.component.scss b/apps/red-ui/src/app/components/buttons/icon-button/icon-button.component.scss
index 92a3847fd..8f44b4566 100644
--- a/apps/red-ui/src/app/components/buttons/icon-button/icon-button.component.scss
+++ b/apps/red-ui/src/app/components/buttons/icon-button/icon-button.component.scss
@@ -3,17 +3,11 @@
 button {
     padding: 0 14px 0 10px;
 
+    &.show-bg {
+        background-color: $grey-6;
+    }
+
     mat-icon {
         width: 14px;
     }
 }
-
-.link-button {
-    text-transform: uppercase;
-    opacity: 0.7;
-    color: $accent;
-    font-size: 11px;
-    letter-spacing: 0;
-    line-height: 14px;
-    font-weight: 600 !important;
-}
diff --git a/apps/red-ui/src/app/components/buttons/icon-button/icon-button.component.ts b/apps/red-ui/src/app/components/buttons/icon-button/icon-button.component.ts
index 46598d416..acbc8958b 100644
--- a/apps/red-ui/src/app/components/buttons/icon-button/icon-button.component.ts
+++ b/apps/red-ui/src/app/components/buttons/icon-button/icon-button.component.ts
@@ -10,8 +10,8 @@ export class IconButtonComponent implements OnInit {
     @Input() text: string;
     @Input() showDot = false;
     @Input() primary = false;
-    @Input() linkButton = false;
     @Input() disabled = false;
+    @Input() type: 'default' | 'show-bg' = 'default';
     @Output() action = new EventEmitter<any>();
 
     constructor() {}
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 bb450147a..71df39fbd 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
@@ -51,15 +51,14 @@
                 type="submit"
             ></button>
 
-            <button
+            <redaction-icon-button
                 [disabled]="disabled || !changed"
-                (click)="saveProjectAndAddMembers()"
+                (action)="saveProjectAndAddMembers()"
                 *ngIf="!project?.projectId"
-                color="primary"
-                mat-flat-button
-                translate="project-listing.add-edit-dialog.actions.save-and-add-members"
-                type="button"
-            ></button>
+                text="project-listing.add-edit-dialog.actions.save-and-add-members"
+                icon="red:assign"
+                type="show-bg"
+            ></redaction-icon-button>
         </div>
     </form>
 
diff --git a/apps/red-ui/src/app/screens/admin/dictionary-overview-screen/dictionary-overview-screen.component.html b/apps/red-ui/src/app/screens/admin/dictionary-overview-screen/dictionary-overview-screen.component.html
index a745b3f31..67abc10e6 100644
--- a/apps/red-ui/src/app/screens/admin/dictionary-overview-screen/dictionary-overview-screen.component.html
+++ b/apps/red-ui/src/app/screens/admin/dictionary-overview-screen/dictionary-overview-screen.component.html
@@ -99,12 +99,7 @@
                     text="dictionary-overview.save-changes"
                     [primary]="true"
                 ></redaction-icon-button>
-                <redaction-icon-button
-                    *ngIf="permissionsService.isAdmin()"
-                    (action)="revert()"
-                    text="dictionary-overview.revert-changes"
-                    [linkButton]="true"
-                ></redaction-icon-button>
+                <div class="all-caps-label cancel" *ngIf="permissionsService.isAdmin()" (click)="revert()" translate="dictionary-overview.revert-changes"></div>
             </div>
         </div>
 
diff --git a/apps/red-ui/src/app/screens/admin/rules-screen/rules-screen.component.html b/apps/red-ui/src/app/screens/admin/rules-screen/rules-screen.component.html
index b8f9f38a3..1a5d45b49 100644
--- a/apps/red-ui/src/app/screens/admin/rules-screen/rules-screen.component.html
+++ b/apps/red-ui/src/app/screens/admin/rules-screen/rules-screen.component.html
@@ -54,12 +54,7 @@
                 text="rules-screen.save-changes"
                 [primary]="true"
             ></redaction-icon-button>
-            <redaction-icon-button
-                *ngIf="permissionsService.isAdmin()"
-                (action)="revert()"
-                text="rules-screen.revert-changes"
-                [linkButton]="true"
-            ></redaction-icon-button>
+            <div *ngIf="permissionsService.isAdmin()" (click)="revert()" translate="rules-screen.revert-changes" class="all-caps-label cancel"></div>
         </div>
     </div>
 </section>
diff --git a/apps/red-ui/src/assets/styles/red-button.scss b/apps/red-ui/src/assets/styles/red-button.scss
index 57f561203..008154754 100644
--- a/apps/red-ui/src/assets/styles/red-button.scss
+++ b/apps/red-ui/src/assets/styles/red-button.scss
@@ -18,6 +18,10 @@
             margin-right: 6px;
         }
     }
+
+    &.mat-button-disabled {
+        background-color: $grey-6 !important;
+    }
 }
 
 .cdk-program-focused .mat-button-focus-overlay {