From ffdd409875cf45b96407a32b75d6df827f1b090d Mon Sep 17 00:00:00 2001
From: dominikiwanekhyland
 <141320833+dominikiwanekhyland@users.noreply.github.com>
Date: Fri, 12 Apr 2024 15:13:12 +0200
Subject: [PATCH] [ACS-7530] - Notifications popup looks a bit differently
 (#9543)

---
 .../components/notification-history.component.html  |  8 ++++----
 .../components/notification-history.component.scss  | 13 ++++++++++++-
 2 files changed, 16 insertions(+), 5 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
index 3f14cc4460..5ff34a0e16 100644
--- a/lib/core/src/lib/notifications/components/notification-history.component.html
+++ b/lib/core/src/lib/notifications/components/notification-history.component.html
@@ -16,12 +16,12 @@
               [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"
              (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"
                         mat-icon-button
@@ -51,7 +51,7 @@
                             <div class="adf-notification-history-menu-item-content">
                                 <p class="adf-notification-history-menu-text adf-notification-history-menu-message"
                                    *ngFor="let message of notification.messages"
-                                   matListItemLine [matTooltip]="message" matTooltipShowDelay="1000">{{ message }}</p>
+                                   matListItemLine [matTooltip]="message" matTooltipShowDelay="1000">&nbsp;{{ message }}</p>
                                 <p class="adf-notification-history-menu-text adf-notification-history-menu-date"
                                    matListItemLine> {{notification.datetime | adfTimeAgo}} </p>
                             </div>
@@ -61,7 +61,7 @@
                 <ng-template #empty_list_template>
                     <mat-list-item id="adf-notification-history-component-no-message"
                                    class="adf-notification-history-menu-no-message">
-                        <p matListItemLine>{{ 'NOTIFICATIONS.NO_MESSAGE' | translate }}</p>
+                        <p class="adf-notification-history-menu-no-message-text" matListItemLine>{{ 'NOTIFICATIONS.NO_MESSAGE' | translate }}</p>
                     </mat-list-item>
                 </ng-template>
             </mat-list>
diff --git a/lib/core/src/lib/notifications/components/notification-history.component.scss b/lib/core/src/lib/notifications/components/notification-history.component.scss
index 5d4940f6a7..5b3c30df2a 100644
--- a/lib/core/src/lib/notifications/components/notification-history.component.scss
+++ b/lib/core/src/lib/notifications/components/notification-history.component.scss
@@ -30,9 +30,14 @@ $notification-item-height: 72px;
         p {
             line-height: 16px;
             margin-bottom: 0;
+            color: var(--theme-sidenav-user-menu-color);
         }
     }
 
+    &-notification-history-menu-title {
+        font-size: 14px;
+    }
+
     &-notification-history-menu_button#{$mat-button} {
         margin-right: 6px;
         border-radius: 90%;
@@ -73,6 +78,12 @@ $notification-item-height: 72px;
             font-size: var(--theme-body-1-font-size);
         }
 
+        .adf-notification-history-menu-no-message-text {
+            font-size: 16px;
+            color: var(--theme-sidenav-user-menu-color);
+            margin-bottom: 0;
+        }
+
         .adf-notification-history-menu-date.adf-notification-history-menu-text:is(p) {
             font-size: var(--theme-caption-font-size);
         }
@@ -108,7 +119,7 @@ $notification-item-height: 72px;
     }
 }
 
-#{$mat-menu-panel}.adf-notification-history-menu {
+#{$mat-menu-panel}.adf-notification-history-menu.adf-notification-history-menu-panel {
     min-width: 320px;
     max-height: 500px;