[ACS-7681] Bell icon not aligned [ACS-7571] Comments [ACS-7563] Add permission dialog (#9594)

lib/content-services/src/lib/permission-manager/components/add-permission/add-permission-dialog.component.html

@@ -7,7 +7,7 @@
         <button mat-button (click)="enableSearch()" class="adf-search-user-button">
             {{ "PERMISSION_MANAGER.ADD-PERMISSION.SEARCH" | translate }}
             <span class="adf-toolbar--spacer"></span>
-            <mat-icon>search</mat-icon>
+            <mat-icon iconPositionEnd>search</mat-icon>
         </button>
 
         <div class="adf-new-permission-table">

lib/content-services/src/lib/permission-manager/components/add-permission/add-permission-dialog.component.scss

@@ -1,7 +1,15 @@
+@import 'styles/mat-selectors';
+
+#{$mdc-dialog} {
+    #{$mat-dialog-surface}:is(div) {
+        padding-bottom: 0;
+    }
+}
+
 .adf-add-permission-dialog {
     .adf-add-permission-dialog-title {
-        margin-left: 24px;
-        margin-right: 24px;
+        margin-left: 20px;
+        margin-right: 20px;
         font-size: var(--theme-title-font-size);
         font-weight: 600;
         font-style: normal;
@@ -17,6 +25,28 @@
         flex-grow: 1;
         height: 80vh;
 
+        .adf {
+            &-search-user-button {
+                width: 100%;
+                justify-content: unset;
+
+                #{$mat-button-label} {
+                    padding-right: 0;
+                }
+
+                #{$mat-icon} {
+                    font-size: 24px;
+                    width: 24px;
+                    height: 24px;
+                    margin-left: 0;
+                }
+            }
+
+            &-add-member-action {
+                padding: 0 15px;
+            }
+        }
+
         .adf-new-permission-table {
             height: 90%;
         }
@@ -52,19 +82,4 @@
     .adf-datatable-cell .adf-cell-value adf-user-role-column {
         position: unset;
     }
-
-    .adf {
-        &-search-user-button {
-            width: 100%;
-
-            span {
-                display: flex;
-                align-items: center;
-            }
-        }
-
-        &-add-member-action {
-            padding: 0 15px;
-        }
-    }
 }

lib/content-services/src/lib/permission-manager/components/add-permission/add-permission-panel.component.html

@@ -1,4 +1,4 @@
-<mat-form-field floatPlaceholder="never" class="adf-permission-search-input">
+<mat-form-field appearance="outline" floatPlaceholder="never" class="adf-permission-search-input">
     <input
         matInput
         id="searchInput"

lib/content-services/src/lib/permission-manager/components/add-permission/add-permission-panel.component.scss

@@ -1,6 +1,6 @@
 @import 'styles/mat-selectors';
 
-$search-result-height: calc(100% - 75px);
+$search-result-height: calc(100% - 60px);
 
 .adf {
     &-permission-result-list {
@@ -52,8 +52,7 @@ $search-result-height: calc(100% - 75px);
         &-input {
             width: 100%;
 
-            &-icon {
-                color: var(--adf-theme-background-selected-button-color);
+            .adf-permission-search-icon {
                 cursor: pointer;
 
                 &:hover {

lib/content-services/src/lib/permission-manager/components/permission-list/permission-list.component.html

@@ -76,6 +76,7 @@
                     mat-icon-button
                     title="{{'PERMISSION_MANAGER.ACTION.ADD-PERMISSION' | translate}}"
                     (click)="openAddPermissionDialog()"
+                    class="adf-add-permission-button"
                     data-automation-id="adf-add-permission-button">
                     <mat-icon>person_add_outline</mat-icon>
                 </button>

lib/content-services/src/lib/permission-manager/components/permission-list/permission-list.component.scss

@@ -48,6 +48,11 @@
         flex-direction: row;
         align-items: center;
         padding: 5px 15px;
+
+        .adf-add-permission-button {
+            margin-left: 12px;
+            margin-right: 24px;
+        }
     }
 
     &-permission-role-column-header {