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

2025-07-24 17:32:15 +00:00 · 2024-04-23 09:15:36 +02:00
parent 365a23388c
commit f6a7e6ee9c
10 changed files with 49 additions and 30 deletions
--- a/lib/content-services/src/lib/permission-manager/components/add-permission/add-permission-dialog.component.html
+++ b/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">
--- a/lib/content-services/src/lib/permission-manager/components/add-permission/add-permission-dialog.component.scss
+++ b/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;
-        }
-    }
 }
--- a/lib/content-services/src/lib/permission-manager/components/add-permission/add-permission-panel.component.html
+++ b/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"
--- a/lib/content-services/src/lib/permission-manager/components/add-permission/add-permission-panel.component.scss
+++ b/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 {
--- 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
@@ -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>
--- 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
@@ -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 {
--- a/lib/core/src/lib/comments/comment-list/comment-list.component.scss
+++ b/lib/core/src/lib/comments/comment-list/comment-list.component.scss
@@ -1,4 +1,5 @@
 .adf-comment-list {
+    padding-bottom: 0;
    .adf {
        &-comment-img-container {
            width: 40px;
@@ -56,7 +57,7 @@
            margin-top: 5px;
            width: 100%;
            padding: 2px 10px;
-            font-size: var(--theme-caption-font-size);
+            font-size: unset;
            color: var(--adf-theme-foreground-text-color);
        }

--- a/lib/core/src/lib/comments/comments.component.html
+++ b/lib/core/src/lib/comments/comments.component.html
@@ -3,11 +3,12 @@
        {{'COMMENTS.HEADER' | translate: { count: comments?.length } }}
    </div>
    <div *ngIf="!readOnly" class="adf-comments-input-container adf-comments-divider">
-            <mat-form-field class="adf-comments-form-field" subscriptSizing="dynamic">
+            <mat-form-field>
                <mat-label>{{'COMMENTS.ADD' | translate}}</mat-label>
                <textarea
                    matInput
                    id="comment-input"
+                    class="adf-text-text-area"
                    [attr.aria-label]="'COMMENTS.ADD' | translate"
                    [(ngModel)]="message"
                    (keydown.escape)="clearMessage($event)"
--- a/lib/core/src/lib/comments/comments.component.scss
+++ b/lib/core/src/lib/comments/comments.component.scss
@@ -12,16 +12,12 @@ adf-comments {

            textarea {
                resize: vertical;
+                height: 20px;
            }

            #{$mat-form-field} {
-                padding-bottom: 12px;
                width: 100%;
            }
-
-            #{$mat-form-field-infix} {
-                padding-bottom: 0;
-            }
        }
    }

--- a/lib/core/src/lib/notifications/components/notification-history.component.scss
+++ b/lib/core/src/lib/notifications/components/notification-history.component.scss
@@ -39,13 +39,14 @@ $notification-item-height: 72px;
    }

    &-notification-history-menu_button#{$mat-button} {
-        margin-right: 6px;
+        margin-right: 10px;
        border-radius: 90%;
        padding: 0;
        min-width: 40px;
        height: 40px;

        .adf-notification-history-menu_button-icon {
+            margin-right: 0;
            font-size: 24px;
            height: 24px;
            width: 24px;