diff --git a/CHANGELOG.md b/CHANGELOG.md index d402bf8f5..95770cad9 100644 --- a/CHANGELOG.md +++ b/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` diff --git a/libs/ui/src/lib/page-tabs/page-tabs.component.html b/libs/ui/src/lib/page-tabs/page-tabs.component.html index 28843148a..051005790 100644 --- a/libs/ui/src/lib/page-tabs/page-tabs.component.html +++ b/libs/ui/src/lib/page-tabs/page-tabs.component.html @@ -12,7 +12,7 @@ @if (tab.showCondition !== false) { @if (tab.onClick) { -
+ diff --git a/libs/ui/src/lib/page-tabs/page-tabs.component.scss b/libs/ui/src/lib/page-tabs/page-tabs.component.scss index 0b377e57a..3415a7cb0 100644 --- a/libs/ui/src/lib/page-tabs/page-tabs.component.scss +++ b/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); + } + } + } } } }