Task/improve styling of page tabs component on desktop (#7032)

* Improve styling

* Update changelog

CHANGELOG.md

@@ -13,6 +13,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
+- Improved the styling of the page tabs component on desktop
 - Enabled the _Bull Dashboard_ tab in the admin control panel (experimental)
 - Upgraded `bull-board` from version `7.1.5` to `7.2.1`
 

libs/ui/src/lib/page-tabs/page-tabs.component.html

@@ -12,7 +12,7 @@
     @if (tab.showCondition !== false) {
       @if (tab.onClick) {
         <button
-          class="no-min-width px-3"
+          class="no-min-width overflow-hidden px-2"
           mat-tab-link
           type="button"
           (click)="tab.onClick()"
@@ -24,7 +24,7 @@
       } @else {
         <a
           #rla="routerLinkActive"
-          class="no-min-width px-3"
+          class="no-min-width overflow-hidden px-2"
           mat-tab-link
           routerLinkActive
           [active]="rla.isActive"
@@ -45,5 +45,5 @@
     [name]="tab.iconName"
     [size]="deviceType === 'mobile' ? 'large' : 'small'"
   />
-  <div class="d-none d-sm-block ml-2" [innerHTML]="tab.label"></div>
+  <div class="d-none d-sm-block ml-1" [innerHTML]="tab.label"></div>
 </ng-template>

libs/ui/src/lib/page-tabs/page-tabs.component.scss

@@ -37,7 +37,12 @@
 
     @include mat.tabs-overrides(
       (
-        container-height: 2rem
+        active-focus-label-text-color: rgba(var(--palette-foreground-base), 1),
+        active-hover-label-text-color: rgba(var(--palette-foreground-base), 1),
+        active-label-text-color: rgba(var(--palette-foreground-base), 1),
+        active-ripple-color: rgba(var(--palette-foreground-base), 1),
+        container-height: 2rem,
+        inactive-ripple-color: rgba(var(--palette-foreground-base), 1)
       )
     );
 
@@ -51,7 +56,15 @@
           flex-direction: column;
 
           .mat-mdc-tab-link {
+            border-radius: 0.25rem;
+            font-weight: 400;
             justify-content: flex-start;
+            margin: 0 0.5rem 0.1rem 0.5rem;
+
+            &.mdc-tab--active {
+              background-color: rgba(var(--palette-foreground-base), 0.05);
+              font-weight: 500;
+            }
           }
         }
       }
@@ -61,8 +74,32 @@
 
 :host-context(.theme-dark) {
   @media (min-width: 576px) {
-    .mat-mdc-tab-header {
-      background-color: rgba(var(--palette-foreground-base-dark), 0.02);
+    @include mat.tabs-overrides(
+      (
+        active-focus-label-text-color: rgba(
+            var(--palette-foreground-base-dark),
+            1
+          ),
+        active-hover-label-text-color: rgba(
+            var(--palette-foreground-base-dark),
+            1
+          ),
+        active-label-text-color: rgba(var(--palette-foreground-base-dark), 1),
+        active-ripple-color: rgba(var(--palette-foreground-base-dark), 1),
+        inactive-ripple-color: rgba(var(--palette-foreground-base-dark), 1)
+      )
+    );
+
+    ::ng-deep {
+      .mat-mdc-tab-header {
+        background-color: rgba(var(--palette-foreground-base-dark), 0.02);
+
+        .mat-mdc-tab-link {
+          &.mdc-tab--active {
+            background-color: rgba(var(--palette-foreground-base-dark), 0.05);
+          }
+        }
+      }
     }
   }
 }