feat(notifications): redesign notifications tray with improved UI/UX (#2894)

src/app/shared/notifications-tray/notifications-tray.component.html

@@ -1,6 +1,7 @@
 <button
   mat-icon-button
   class="ml-1"
+  [attr.aria-label]="'tooltips.Notifications' | translate"
   matTooltip="{{ 'tooltips.Notifications' | translate }}"
   [matMenuTriggerFor]="notificationsMenu"
   (menuClosed)="menuClosed()"
@@ -9,30 +10,55 @@
   matBadgeColor="warn"
   matBadgeSize="medium"
 >
+  <span class="sr-only">{{ 'tooltips.Notifications' | translate }}</span>
   <fa-icon icon="bell" size="lg"></fa-icon>
 </button>
 
-<mat-menu class="mifosx-notifications-menu" #notificationsMenu="matMenu" [overlapTrigger]="false">
+<mat-menu
-  @if (unreadNotifications.length === 0) {
+  class="mifosx-notifications-menu"
-    <div class="layout-column align-center-center no-notifications">
+  #notificationsMenu="matMenu"
-      <mat-icon class="no-notifications-icon">
+  [overlapTrigger]="false"
-        <span class="material-icons">{{ 'labels.menus.Notifications' | translate }}</span>
+  xPosition="before"
-      </mat-icon>
+  yPosition="below"
-      <p>{{ 'labels.text.No notifications' | translate }}</p>
+>
-    </div>
+  <div class="notifications-container">
-  }
+    @if (unreadNotifications.length === 0 && displayedReadNotifications.length === 0) {
+      <div class="no-notifications">
+        <mat-icon class="no-notifications-icon">notifications_none</mat-icon>
+        <p class="no-notifications-text">{{ 'labels.text.No notifications' | translate }}</p>
+      </div>
+    } @else {
+      <div class="notifications-header">
+        <h3 class="notifications-title">{{ 'labels.menus.Notifications' | translate }}</h3>
+      </div>
+      <div class="notifications-list">
+        @for (notification of unreadNotifications; track notification) {
+          <button
+            mat-menu-item
+            class="notification-item unread"
+            [routerLink]="[routeMap[notification.objectType], notification.objectId]"
+          >
+            <div class="notification-content">
+              <span class="notification-text">{{ notification.content }}</span>
+              <span class="unread-indicator">●</span>
+            </div>
+            <span class="notification-time">{{ notification.createdAt }}</span>
+          </button>
+        }
 
-  @for (notification of unreadNotifications; track notification) {
+        @for (notification of displayedReadNotifications; track notification) {
-    <button mat-menu-item class="unread" [routerLink]="[routeMap[notification.objectType], notification.objectId]">
+          <button
-      {{ notification.content }}*<br />
+            mat-menu-item
-      <span class="time">[{{ notification.createdAt }}]</span>
+            class="notification-item read"
-    </button>
+            [routerLink]="[routeMap[notification.objectType], notification.objectId]"
-  }
+          >
-
+            <div class="notification-content">
-  @for (notification of displayedReadNotifications; track notification) {
+              <span class="notification-text">{{ notification.content }}</span>
-    <button mat-menu-item [routerLink]="[routeMap[notification.objectType], notification.objectId]">
+            </div>
-      {{ notification.content }}<br />
+            <span class="notification-time">{{ notification.createdAt }}</span>
-      <span class="time">[{{ notification.createdAt }}]</span>
+          </button>
-    </button>
+        }
-  }
+      </div>
+    }
+  </div>
 </mat-menu>

src/app/shared/notifications-tray/notifications-tray.component.scss

@@ -1,30 +1,243 @@
+@use '../../../assets/styles/colours' as *;
+
+// Screen reader only class for accessibility
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
 .mifosx-notifications-menu {
-  max-height: 20rem !important;
+  margin-top: 8px;
-  width: 12.5rem !important;
+  overflow: hidden;
+
+  .mat-mdc-menu-content,
+  .mat-menu-content {
+    padding: 0;
+    overflow: hidden;
+  }
+
+  .notifications-container {
+    width: 320px;
+    max-width: 320px;
+    max-height: 500px;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    overflow-x: hidden;
+    box-sizing: border-box;
+  }
+
+  .notifications-header {
+    padding: 16px 16px 12px;
+    border-bottom: 1px solid $silver;
+    background-color: transparent;
+
+    .notifications-title {
+      margin: 0;
+      font-size: 16px;
+      font-weight: 500;
+      color: $dark-grey;
+      line-height: 1.5;
+    }
+  }
 
   .no-notifications {
-    padding: 16px;
+    padding: 48px 32px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    min-height: 200px;
+
+    .no-notifications-icon {
+      font-size: 64px;
+      width: 64px;
+      height: 64px;
+      color: $concrete;
+      margin-bottom: 16px;
+    }
+
+    .no-notifications-text {
+      color: $asbestos;
+      font-size: 14px;
+      margin: 0;
+      font-weight: 500;
+    }
   }
 
-  .notification-icon {
+  .notifications-list {
-    font-size: 24px;
+    max-height: 500px;
-    opacity: 0.8;
+    overflow: hidden auto;
+    width: 100%;
+    box-sizing: border-box;
+
+    // Hide scrollbar
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
   }
 
-  .mat-menu-content {
+  .notification-item {
-    padding: 0 !important;
+    display: flex;
-  }
+    flex-direction: column;
+    align-items: flex-start;
+    padding: 12px 16px;
+    min-height: 0;
+    height: auto;
+    line-height: 1.5;
+    border-bottom: 1px solid $silver;
+    transition: background-color 0.2s ease;
+    width: 100%;
+    max-width: 100%;
+    box-sizing: border-box;
+    overflow: hidden;
 
-  [mat-menu-item] {
+    &:hover {
-    height: 5rem;
+      background-color: $light-grey;
-    line-height: 2.2rem;
+    }
 
-    .time {
+    &:last-child {
-      font-size: small;
+      border-bottom: none;
+    }
+
+    .notification-content {
+      width: 100%;
+      display: flex;
+      align-items: flex-start;
+      justify-content: space-between;
+      gap: 8px;
+      margin-bottom: 4px;
+      box-sizing: border-box;
+      min-width: 0;
+
+      .notification-text {
+        flex: 1;
+        font-size: 14px;
+        line-height: 1.4;
+        text-align: left;
+        word-wrap: break-word;
+        overflow-wrap: break-word;
+        min-width: 0;
+        overflow: hidden;
+      }
+
+      .unread-indicator {
+        color: $peter-river;
+        font-size: 8px;
+        margin-top: 6px;
+        flex-shrink: 0;
+      }
+    }
+
+    .notification-time {
+      font-size: 12px;
+      color: $asbestos;
+      font-weight: 400;
+      margin-top: 2px;
+      width: 100%;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
     }
 
     &.unread {
-      background-color: #e0f7ff !important;
+      background-color: $clouds;
+
+      .notification-content .notification-text {
+        font-weight: 500;
+        color: $dark-grey;
+      }
+
+      &:hover {
+        background-color: $light-grey;
+      }
+    }
+
+    &.read {
+      background-color: transparent;
+
+      .notification-content .notification-text {
+        font-weight: 400;
+        color: $asbestos;
+      }
+    }
+  }
+}
+
+.dark-theme {
+  .mifosx-notifications-menu {
+    .notifications-header {
+      border-bottom: 1px solid $asbestos;
+
+      .notifications-title {
+        color: $white;
+      }
+    }
+
+    .no-notifications {
+      .no-notifications-icon {
+        color: $white;
+        opacity: 0.6;
+      }
+
+      .no-notifications-text {
+        color: $white;
+      }
+    }
+
+    .notification-item {
+      border-bottom: 1px solid $asbestos;
+
+      &:hover {
+        background-color: $wet-asphalt;
+      }
+
+      .notification-content {
+        .notification-text {
+          color: $white;
+        }
+
+        .unread-indicator {
+          color: $peter-river;
+        }
+      }
+
+      .notification-time {
+        color: $white;
+        opacity: 0.7;
+      }
+
+      &.unread {
+        background-color: $wet-asphalt;
+
+        .notification-content .notification-text {
+          color: $white;
+        }
+
+        &:hover {
+          background-color: $midnight-blue;
+        }
+      }
+
+      &.read {
+        background-color: transparent;
+
+        .notification-content .notification-text {
+          color: $white;
+          opacity: 0.8;
+        }
+      }
     }
   }
 }