mgr/dashboard: fix icon alignment in navigation header

Fixes: https://tracker.ceph.com/issues/73665
Resolves: rhbz#2404088

Changes Includes:
Added styles in rh_overrides for btn-tertiary to fix the styles on multisite page and also added class `btn-group` class to make the buttons look like before
Regression introduced by the previous PR https://gitlab.cee.redhat.com/ceph/ceph/-/merge_requests/1323

Signed-off-by: Naman Munet <naman.munet@ibm.com>
(cherry picked from commit b4d61dcd304ef9040e3b53a4730bf1ab451b233f)
(cherry picked from commit 5af064e6b3ccc19019c6fbf2b5749e853b703e4f)

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-details/rgw-multisite-details.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-details/rgw-multisite-details.component.html
index 2eea555d050dff86c091efe96005664697783e43..fc4348b7643ebd8f92d7a18496ea4809940c74d8 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-details/rgw-multisite-details.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-details/rgw-multisite-details.component.html
@@ -20,16 +20,19 @@
   </cd-alert-panel>
   <div [cdsStack]="'horizontal'"
        [gap]="4">
-    <cd-table-actions [permission]="permissions.rgw"
+    <cd-table-actions class="btn-group"
+                      [permission]="permissions.rgw"
                       [selection]="selection"
                       [tableActions]="multisiteReplicationActions">
     </cd-table-actions>
     <cd-table-actions *ngIf="showMigrateAndReplicationActions"
+                      class="btn-group"
                       [permission]="permissions.rgw"
                       [selection]="selection"
                       [tableActions]="migrateTableAction">
     </cd-table-actions>
-    <cd-table-actions [permission]="permissions.rgw"
+    <cd-table-actions class="btn-group multisite-actions"
+                      [permission]="permissions.rgw"
                       [selection]="selection"
                       [tableActions]="createTableActions"
                       dropDownOnly="Actions"

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-details/rgw-multisite-details.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-details/rgw-multisite-details.component.scss
index 7037c2469f619da8fe77faa150b7fc23d9dc0a05..decb39195b6099e217d626b5044f2bcd98ca8726 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-details/rgw-multisite-details.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-details/rgw-multisite-details.component.scss
@@ -18,7 +18,7 @@
   width: 100%;
 }
 
-::ng-deep cds-overflow-menu .cds--btn--icon-only {
+::ng-deep cd-table-actions.btn-group.multisite-actions cds-overflow-menu .cds--btn--icon-only {
   position: relative;
   top: 4px;
   width: auto;

diff --git a/src/pybind/mgr/dashboard/frontend/src/redhat/rh_overrides.scss b/src/pybind/mgr/dashboard/frontend/src/redhat/rh_overrides.scss
index b0e2bc7ef48e53eb5d8f3e1a7e6520295ae24c42..0c3e006eaf73f1154d93ebe1baa3cd13a89c0dab 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/redhat/rh_overrides.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/redhat/rh_overrides.scss
@@ -1,4 +1,5 @@
 @use '/src/redhat/variables' as vv;
+@use '@carbon/layout';
 
 /* stylelint-disable */
 $pf-global--font-path: '~@patternfly/patternfly/assets/fonts';
@@ -45,14 +46,22 @@ $pf-global--image-path: '~@patternfly/patternfly/assets/images';
 }
 
 .cds--btn--tertiary {
+  @extend .pf-c-button, .pf-m-tertiary;
   border-color: vv.$primary !important;
   color: vv.$primary !important;
 
   &:active,
+  &:focus,
   &:hover {
     background-color: vv.$primary !important;
     color: vv.$white !important;
   }
+
+  .cds--btn__icon {
+    margin-bottom: layout.rem(2px) !important;
+    margin-left: layout.rem(16px) !important;
+    position: static !important;
+  }
 }
 
 .cds--btn--primary {
@@ -1246,3 +1255,12 @@ cd-upgrade {
     color: vv.$white !important;
   }
 }
+
+cd-table-actions.btn-group.multisite-actions cds-overflow-menu .cds--btn--icon-only {
+  top: 0px !important;
+  
+  .cds--btn.cds--btn--tertiary {
+    height: layout.rem(40px);
+    min-block-size: 0% !important;
+  }
+}
\ No newline at end of file