diff --git a/ui-ngx/src/app/modules/home/home.component.html b/ui-ngx/src/app/modules/home/home.component.html index 5b67d91b98..e11b4c624b 100644 --- a/ui-ngx/src/app/modules/home/home.component.html +++ b/ui-ngx/src/app/modules/home/home.component.html @@ -30,7 +30,7 @@ -
+
diff --git a/ui-ngx/src/app/modules/home/home.component.scss b/ui-ngx/src/app/modules/home/home.component.scss index ef7b91e2fa..6a866bab0d 100644 --- a/ui-ngx/src/app/modules/home/home.component.scss +++ b/ui-ngx/src/app/modules/home/home.component.scss @@ -54,6 +54,7 @@ height: inherit; padding: 0; border-right: 1px solid rgba(0, 0, 0, 0.12); + --mat-toolbar-container-text-color: rgba(0, 0, 0, .76); tb-user-menu { border-top: 1px solid rgba(0, 0, 0, 0.12); } diff --git a/ui-ngx/src/app/modules/home/menu/menu-toggle.component.html b/ui-ngx/src/app/modules/home/menu/menu-toggle.component.html index 2223a99062..fad34b8215 100644 --- a/ui-ngx/src/app/modules/home/menu/menu-toggle.component.html +++ b/ui-ngx/src/app/modules/home/menu/menu-toggle.component.html @@ -15,7 +15,7 @@ limitations under the License. --> - @if (section.icon !== null) { {{section.icon}} diff --git a/ui-ngx/src/app/modules/home/menu/menu-toggle.component.scss b/ui-ngx/src/app/modules/home/menu/menu-toggle.component.scss index faa0d01ff2..84aac93c5a 100644 --- a/ui-ngx/src/app/modules/home/menu/menu-toggle.component.scss +++ b/ui-ngx/src/app/modules/home/menu/menu-toggle.component.scss @@ -18,6 +18,9 @@ :host ::ng-deep { .tb-button-toggle { + &.tb-toggled { + border-bottom: 1px solid rgba(0, 0, 0, 0.05); + } .tb-toggle-icon { display: inline-block; width: 15px; diff --git a/ui-ngx/src/app/modules/home/menu/side-menu.component.scss b/ui-ngx/src/app/modules/home/menu/side-menu.component.scss index e60580e95a..d58bc0f649 100644 --- a/ui-ngx/src/app/modules/home/menu/side-menu.component.scss +++ b/ui-ngx/src/app/modules/home/menu/side-menu.component.scss @@ -19,17 +19,18 @@ :host ::ng-deep { - .tb-side-menu, + .tb-side-menu { + padding: 12px 0; + margin: 0; + list-style: none; + } + .tb-side-menu ul { padding: 0; margin-top: 0; list-style: none; } - .tb-side-menu > li { - border-bottom: 1px solid rgba(0, 0, 0, .12); - } - a.mat-mdc-button.mat-mdc-button-base { display: inline-flex; width: 100%; @@ -39,6 +40,7 @@ line-height: 40px; border-radius: 0; padding: 0 16px; + --mat-button-text-label-text-color: rgba(0, 0, 0, .76); &:hover { border-bottom: none; background-color: rgba(255,255,255,0.08); diff --git a/ui-ngx/src/app/shared/components/user-menu.component.html b/ui-ngx/src/app/shared/components/user-menu.component.html index b7157488a9..c9207da9af 100644 --- a/ui-ngx/src/app/shared/components/user-menu.component.html +++ b/ui-ngx/src/app/shared/components/user-menu.component.html @@ -30,11 +30,11 @@ @if (authority$ | async; as authority) {
-
diff --git a/ui-ngx/src/app/shared/components/user-menu.component.scss b/ui-ngx/src/app/shared/components/user-menu.component.scss index 995e82765a..7148f3d529 100644 --- a/ui-ngx/src/app/shared/components/user-menu.component.scss +++ b/ui-ngx/src/app/shared/components/user-menu.component.scss @@ -30,7 +30,6 @@ } span.tb-user-display-name { - color: rgba(0, 0, 0, 0.76); font-size: 14px; line-height: 16px; font-weight: 500; @@ -57,4 +56,20 @@ .tb-user-menu-items { min-width: 250px; + display: flex; + flex-direction: column; + gap: 8px; + --mat-menu-item-label-text-size: 14px; + --mat-menu-item-label-text-line-height: 20px; + --mat-menu-item-spacing: 8px; + --mat-menu-item-icon-size: 18px; + .mat-icon { + font-size: 18px; + } + .mat-mdc-menu-item { + min-height: 40px; + &.tb-logout { + border-top: 1px solid rgba(0, 0, 0, 0.12); + } + } }