From: Afreen Misbah <afreen@ibm.com>
Date: Fri, 27 Mar 2026 16:06:38 +0000 (+0530)
Subject: mgr/dashboard: Add gray10 theme base color to all pages
X-Git-Url: http://git-server-git.apps.pok.os.sepia.ceph.com/?a=commitdiff_plain;h=2f37d895aa9bc85b420f05c89a4543fd1357f721;p=ceph.git

mgr/dashboard: Add gray10 theme base color to all pages

- applies #f4f4f4 - $background to all pages as base page
- earlier the base color of page was white
- also updates tabs/navs/tables css to adapt
- some fixes of spacings in alerts tabs, nvmeof

Signed-off-by: Afreen Misbah <afreen@ibm.com>
---

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/nvmeof-namespaces-list/nvmeof-namespaces-list.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/nvmeof-namespaces-list/nvmeof-namespaces-list.component.html
index ef76b9223fa4..79c82c3c4a2a 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/nvmeof-namespaces-list/nvmeof-namespaces-list.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/nvmeof-namespaces-list/nvmeof-namespaces-list.component.html
@@ -6,7 +6,7 @@
      [fullWidth]="true">
 <div cdsCol
      [columnNumbers]="{sm: 4, md: 8}">
-  <div class="pb-3 form-item"
+  <div class="cds-mt-3 form-item"
        cdsRow>
     <cds-combo-box
         type="single"
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/nvmeof-subsystems/nvmeof-subsystems.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/nvmeof-subsystems/nvmeof-subsystems.component.html
index e5ab87192df5..3111ae2e8d4d 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/nvmeof-subsystems/nvmeof-subsystems.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/nvmeof-subsystems/nvmeof-subsystems.component.html
@@ -6,7 +6,7 @@
      [fullWidth]="true">
 <div cdsCol
      [columnNumbers]="{sm: 4, md: 8}">
-  <div class="pb-3 form-item"
+  <div class="cds-mt-3 form-item"
        cdsRow>
     <cds-combo-box
         type="single"
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/prometheus/prometheus-tabs/prometheus-tabs.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/prometheus/prometheus-tabs/prometheus-tabs.component.html
index 71a2176b2fdd..e23d0a96167a 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/prometheus/prometheus-tabs/prometheus-tabs.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/prometheus/prometheus-tabs/prometheus-tabs.component.html
@@ -1,5 +1,8 @@
-<ul class="nav nav-tabs">
-  <li class="nav-item">
+<nav
+  class="nav nav-tabs"
+  ngbNav
+  #nav="ngbNav">
+  <ng-container ngbNavItem>
     <a class="nav-link"
        routerLink="/monitoring/active-alerts"
        routerLinkActive="active"
@@ -10,21 +13,21 @@
         class="tag-danger ms-1">{{ prometheusAlertService.activeCriticalAlerts }}</cds-tag>
     <cds-tag *ngIf="prometheusAlertService.activeWarningAlerts > 0"
         class="tag-warning ms-1">{{ prometheusAlertService.activeWarningAlerts }}</cds-tag></a>
-  </li>
-  <li class="nav-item">
+  </ng-container>
+  <ng-container ngbNavItem>
     <a class="nav-link"
        routerLink="/monitoring/silences"
        routerLinkActive="active"
        ariaCurrentWhenActive="page"
        [routerLinkActiveOptions]="{exact: true}"
        i18n>Silences</a>
-  </li>
-  <li class="nav-item">
+  </ng-container>
+  <ng-container ngbNavItem>
     <a class="nav-link"
        routerLink="/monitoring/alerts"
        routerLinkActive="active"
        ariaCurrentWhenActive="page"
        [routerLinkActiveOptions]="{exact: true}"
        i18n>Alert Rules</a>
-  </li>
-</ul>
+  </ng-container>
+</nav>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/layouts/workbench-layout/workbench-layout.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/core/layouts/workbench-layout/workbench-layout.component.scss
index 2fd7ebd8f7c7..5fe0558f2db3 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/layouts/workbench-layout/workbench-layout.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/layouts/workbench-layout/workbench-layout.component.scss
@@ -1,7 +1,6 @@
 @use './src/styles/vendor/variables' as vv;
 
 .overview {
-  background-color: var(--cds-background);
   margin: 0;
   padding: 0;
 }
@@ -10,6 +9,7 @@
   overflow: auto;
   padding-top: var(--cds-spacing-09);
   padding-bottom: var(--cds-spacing-09);
+  background-color: var(--cds-background);
 
   &:has(.tearsheet--full) {
     padding-left: 0;
@@ -31,10 +31,6 @@
   }
 }
 
-.rgw-dashboard {
-  background-color: var(--cds-background);
-}
-
 .cd-alert-container {
   display: flex;
   flex-direction: column;
diff --git a/src/pybind/mgr/dashboard/frontend/src/styles.scss b/src/pybind/mgr/dashboard/frontend/src/styles.scss
index 9c25a83972af..01bc0b1b076b 100644
--- a/src/pybind/mgr/dashboard/frontend/src/styles.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/styles.scss
@@ -34,7 +34,6 @@ $grid-breakpoints: (
 @import './src/styles/ceph-custom/forms';
 @import './src/styles/ceph-custom/grid';
 @import './src/styles/ceph-custom/icons';
-@import './src/styles/ceph-custom/navs';
 @import './src/styles/ceph-custom/toast';
 @import './src/styles/ceph-custom/spacings';
 
diff --git a/src/pybind/mgr/dashboard/frontend/src/styles/_carbon-defaults.scss b/src/pybind/mgr/dashboard/frontend/src/styles/_carbon-defaults.scss
index 4b83c3c7ae47..8d41b7a0fcec 100644
--- a/src/pybind/mgr/dashboard/frontend/src/styles/_carbon-defaults.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/styles/_carbon-defaults.scss
@@ -193,7 +193,11 @@ Code snippet
 Tabs
 ******************************************/
 .cds--tab-content {
-  background: var(--cds-layer-01);
+  padding: 0;
+}
+
+.cds--data-table-container {
+  padding: 0;
 }
 
 .cds-success-color {
diff --git a/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_navs.scss b/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_navs.scss
deleted file mode 100644
index 2bad31f40512..000000000000
--- a/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_navs.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-@use '../vendor/variables' as vv;
-
-.nav-tabs {
-  margin-bottom: vv.$nav-tabs-margin-bottom;
-}