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 ef76b9223fa46b5cb154d03df8bae11d921c04a5..79c82c3c4a2ae8176af5bff97ea4db5910c4e849 100644 (file)
--- 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 e5ab87192df52987a3b169e2e992610b3fb505c6..3111ae2e8d4dbed1bcc786ba62b609a9037eb9a6 100644 (file)
--- 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 71a2176b2fdd41535d51bd1767ada157c7072774..e23d0a96167addd02a2f53ff41ebd328727653b8 100644 (file)
--- 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 2fd7ebd8f7c7f44b58dfe4f63551fa4fb0540b4a..5fe0558f2db3de505dd61554c8ddae0cee9afcbe 100644 (file)
--- 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 9c25a83972af159e9f36ea129cac04a92e141a79..01bc0b1b076b0db209d74b9d89681dff3f8c44e3 100644 (file)
--- 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 4b83c3c7ae472495985f7a2a170b2dd8018f5f25..8d41b7a0fcecd4a171807bea9e6407f313aee93b 100644 (file)
--- 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 (file)
index 2bad31f..0000000
--- 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;
-}