dashboard: align 'no notifications available' icon in notifications page

The icon displayed when there are no notifications available in the
notifications page was slightly misaligned with the message text.

This change adjusts the layout to properly align the icon with the
message using flexbox and removes unnecessary spacing.

Fixes: https://tracker.ceph.com/issues/74598
Signed-off-by: Shashiranjan Singh <singhshashiranjan34@gmail.com>
Signed-off-by: Shashiranjan singh <singhshashiranjan34@gmail.com>

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notifications-page/notifications-page.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notifications-page/notifications-page.component.scss
index 2cd8e7112773d6434fb0af02b07f8a610d1fc993..c3f066ba42b28c5c1e8543d71811d09b1359ca72 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notifications-page/notifications-page.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notifications-page/notifications-page.component.scss
@@ -51,12 +51,14 @@
 
 // Empty state
 .empty-state {
-  text-align: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   color: var(--cds-text-secondary);
   margin-top: var(--cds-spacing-05);
 
   p {
-    margin: var(--cds-spacing-03) 0 0 0;
+    margin: 0;
     font-size: var(--cds-body-01-font-size);
     line-height: var(--cds-body-01-line-height);
   }
@@ -133,6 +135,9 @@
 .empty-icon,
 .no-selection-icon {
   fill: var(--cds-icon-secondary);
+}
+
+.no-selection-icon {
   margin-bottom: var(--cds-spacing-05);
 }