From f3a8c7b3b45805eca5a1783a4946b391d5b4026d Mon Sep 17 00:00:00 2001
From: dominikiwanekhyland
 <141320833+dominikiwanekhyland@users.noreply.github.com>
Date: Mon, 13 May 2024 11:46:59 +0200
Subject: [PATCH] ACS-7561 - permissions page (#9675)

---
 .../permission-list/permission-list.component.html |  7 ++++---
 .../permission-list/permission-list.component.scss | 14 ++++++++++++++
 2 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/lib/content-services/src/lib/permission-manager/components/permission-list/permission-list.component.html b/lib/content-services/src/lib/permission-manager/components/permission-list/permission-list.component.html
index 50c25bf0297..b8ddd586eb0 100644
--- a/lib/content-services/src/lib/permission-manager/components/permission-list/permission-list.component.html
+++ b/lib/content-services/src/lib/permission-manager/components/permission-list/permission-list.component.html
@@ -42,13 +42,14 @@ <h3 class="adf-inherit-container-header">
             <button
                 mat-flat-button
                 data-automation-id="permission-info-button"
+                class="adf-permission-visibility-toggle"
                 [adf-pop-over]="inheritedPermission"
                 [target]="target"
                 #popOver="adfPopOver"
                 *ngIf="model.node.permissions.isInheritanceEnabled">
                 {{ (popOver.open ? 'PERMISSION_MANAGER.LABELS.HIDE' : 'PERMISSION_MANAGER.LABELS.SHOW') | translate }}
-                <mat-icon *ngIf="popOver.open" iconPositionEnd> keyboard_arrow_up </mat-icon>
-                <mat-icon *ngIf="!popOver.open" iconPositionEnd> keyboard_arrow_down </mat-icon>
+                <mat-icon class="adf-permission-visibility-toggle-icon" iconPositionEnd>
+                    {{ popOver.open ? 'keyboard_arrow_up' : 'keyboard_arrow_down' }} </mat-icon>
             </button>
         </div>
 
@@ -87,7 +88,7 @@ <h3>{{'PERMISSION_MANAGER.LABELS.DIRECT-PERMISSIONS' | translate }}</h3>
                     [disabled]="!selectedPermissions?.length"
                     (click)="deleteSelection()"
                     data-automation-id="adf-delete-selected-permission">
-                    <mat-icon>delete_outline</mat-icon>
+                    <mat-icon class="adf-delete-selected-permission-icon">delete_outline</mat-icon>
                 </button>
             </section>
 
diff --git a/lib/content-services/src/lib/permission-manager/components/permission-list/permission-list.component.scss b/lib/content-services/src/lib/permission-manager/components/permission-list/permission-list.component.scss
index 0961dde4f73..d8e67f36a29 100644
--- a/lib/content-services/src/lib/permission-manager/components/permission-list/permission-list.component.scss
+++ b/lib/content-services/src/lib/permission-manager/components/permission-list/permission-list.component.scss
@@ -22,6 +22,15 @@
         align-items: center;
         padding: 10px 15px;
         border: 1px solid var(--adf-theme-foreground-text-color-007);
+
+        .adf-permission-visibility-toggle {
+            .adf-permission-visibility-toggle-icon {
+                font-size: 24px;
+                height: 24px;
+                width: 24px;
+                margin: 1px 0 0 4px;
+            }
+        }
     }
 
     &-inherit-container {
@@ -37,6 +46,7 @@
 
     &-inherit-toggle {
         padding-left: 30px;
+        margin-top: -2px;
     }
 
     &-inherit-subtitle {
@@ -79,6 +89,10 @@
         flex: 1 1 auto;
         padding: 0;
     }
+
+    &-delete-selected-permission-icon {
+        color: var(--theme-grey-divider-color);
+    }
 }
 
 [aria-sort='Ascending'] adf-user-role-column,