[ACS-8092] [ACA] testing angular 15 notifications bell is much smalle…

…r and is further from the profile page 2 (#9786)
Alfresco · Jun 25, 2024 · 0cd0f8a · 0cd0f8a
1 parent 3f0684b
commit 0cd0f8a
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 3 deletions.
diff --git a/lib/core/src/lib/notifications/components/notification-history.component.html b/lib/core/src/lib/notifications/components/notification-history.component.html
@@ -8,6 +8,7 @@
             (menuOpened)="onMenuOpened()">
         <mat-icon matBadge="&#8288;"
                   [matBadgeHidden]="!notifications.length"
+                  class="adf-notification-history-menu_button-icon"
                   matBadgeColor="accent"
                   matBadgeSize="small">notifications
         </mat-icon>
@@ -16,16 +17,17 @@
               [xPosition]="menuPositionX"
               [yPosition]="menuPositionY"
               id="adf-notification-history-menu"
-              class="adf-notification-history-menu">
+              class="adf-notification-history-menu adf-notification-history-menu-panel">
         <div class="adf-notification-history-list"
              role="button"
              tabindex="0"
              (keyup.enter)="$event.stopPropagation()"
              (click)="$event.stopPropagation()">
             <div mat-subheader role="menuitem">
-                <span>{{ 'NOTIFICATIONS.TITLE' | translate }}</span>
+                <span class="adf-notification-history-menu-title">{{ 'NOTIFICATIONS.TITLE' | translate }}</span>
                 <button *ngIf="notifications.length"
                         id="adf-notification-history-mark-as-read"
+                        class="adf-notification-history-mark-as-read"
                         mat-icon-button
                         title="{{ 'NOTIFICATIONS.MARK_AS_READ' | translate }}"
                         (click)="markAsRead()">

diff --git a/lib/core/src/lib/notifications/components/notification-history.component.scss b/lib/core/src/lib/notifications/components/notification-history.component.scss
@@ -36,10 +36,10 @@ $notification-item-height: 72px;
 
     &-notification-history-menu-title {
         font-size: 14px;
+        -webkit-font-smoothing: subpixel-antialiased;
     }
 
     &-notification-history-menu_button#{$mat-button} {
-        margin-right: 10px;
         border-radius: 90%;
         padding: 0;
         min-width: 40px;
@@ -83,6 +83,7 @@ $notification-item-height: 72px;
             font-size: 16px;
             color: var(--theme-sidenav-user-menu-color);
             margin-bottom: 0;
+            -webkit-font-smoothing: subpixel-antialiased;
         }
 
         .adf-notification-history-menu-date.adf-notification-history-menu-text:is(p) {
@@ -118,6 +119,10 @@ $notification-item-height: 72px;
             width: 100%;
         }
     }
+
+    &-notification-history-mark-as-read {
+        margin: 4px 0;
+    }
 }
 
 #{$mat-menu-panel}.adf-notification-history-menu.adf-notification-history-menu-panel {
@@ -126,5 +131,18 @@ $notification-item-height: 72px;
 
     #{$mat-menu-content} {
         padding: 0;
+
+        #{$mat-list} {
+            padding: 8px 0 0;
+
+            #{$mat-list-item-unscoped-content} {
+                display: flex;
+            }
+
+            #{$mat-list-item-content} {
+                display: flex;
+                align-items: center;
+            }
+        }
     }
 }
diff --git a/lib/core/src/lib/styles/_mat-selectors.scss b/lib/core/src/lib/styles/_mat-selectors.scss
@@ -95,6 +95,8 @@ $mat-calendar-table-header: '.mat-calendar-table-header';
 $mat-calendar-body-disabled: '.mat-calendar-body-disabled';
 $mat-toolbar: '.mat-toolbar';
 $mat-slide-toggle: '.mat-mdc-slide-toggle';
+$mat-list: '.mat-mdc-list';
+$mat-list-item-content: '.mdc-list-item__content';
 $mat-list-item-unscoped-content: '.mat-mdc-list-item-unscoped-content';
 $mat-text-field--no-label: '.mdc-text-field--no-label';
 $mat-form-field-infix: '.mat-mdc-form-field-infix';