From 6b94d3b675618f2ad966dca83f5f192d0af714ad Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Sun, 3 Aug 2025 09:40:53 +0200
Subject: [PATCH] Feature/improve style of header navigation (#5310)

* Improve style
---
 .../components/header/header.component.html   | 34 +++++++++++--------
 .../components/header/header.component.scss   |  1 -
 2 files changed, 19 insertions(+), 16 deletions(-)

diff --git a/apps/client/src/app/components/header/header.component.html b/apps/client/src/app/components/header/header.component.html
index b9d903aa3..13b987f2f 100644
--- a/apps/client/src/app/components/header/header.component.html
+++ b/apps/client/src/app/components/header/header.component.html
@@ -2,7 +2,7 @@
   @if (user) {
     <div class="d-flex h-100 logo-container" [ngClass]="{ filled: hasTabs }">
       <a
-        class="align-items-center justify-content-start rounded-0"
+        class="align-items-center h-100 justify-content-start rounded-0"
         mat-button
         [ngClass]="{ 'w-100': hasTabs }"
         [routerLink]="['/']"
@@ -15,7 +15,7 @@
     <ul class="align-items-center d-flex list-inline m-0 px-2">
       <li class="list-inline-item">
         <a
-          class="d-none d-sm-block"
+          class="d-none d-sm-block rounded"
           i18n
           mat-button
           [ngClass]="{
@@ -32,7 +32,7 @@
       </li>
       <li class="list-inline-item">
         <a
-          class="d-none d-sm-block"
+          class="d-none d-sm-block rounded"
           i18n
           mat-button
           [ngClass]="{
@@ -46,7 +46,7 @@
       </li>
       <li class="list-inline-item">
         <a
-          class="d-none d-sm-block"
+          class="d-none d-sm-block rounded"
           i18n
           mat-button
           [ngClass]="{
@@ -61,7 +61,7 @@
       @if (hasPermissionToAccessAdminControl) {
         <li class="list-inline-item">
           <a
-            class="d-none d-sm-block"
+            class="d-none d-sm-block rounded"
             i18n
             mat-button
             [ngClass]="{
@@ -77,7 +77,7 @@
       }
       <li class="list-inline-item">
         <a
-          class="d-none d-sm-block"
+          class="d-none d-sm-block rounded"
           i18n
           mat-button
           [ngClass]="{
@@ -93,7 +93,7 @@
       ) {
         <li class="list-inline-item">
           <a
-            class="d-none d-sm-block"
+            class="d-none d-sm-block rounded"
             mat-button
             [ngClass]="{
               'font-weight-bold': currentRoute === routePricing,
@@ -112,7 +112,7 @@
       }
       <li class="list-inline-item">
         <a
-          class="d-none d-sm-block"
+          class="d-none d-sm-block rounded"
           i18n
           mat-button
           [ngClass]="{
@@ -334,7 +334,7 @@
   @if (user === null) {
     <div class="d-flex h-100 logo-container" [ngClass]="{ filled: hasTabs }">
       <a
-        class="align-items-center justify-content-start rounded-0"
+        class="align-items-center h-100 justify-content-start rounded-0"
         mat-button
         [ngClass]="{ 'w-100': hasTabs }"
         [routerLink]="['/']"
@@ -350,7 +350,7 @@
     <ul class="align-items-center d-flex list-inline m-0 px-2">
       <li class="list-inline-item">
         <a
-          class="d-none d-sm-block"
+          class="d-none d-sm-block rounded"
           i18n
           mat-button
           [ngClass]="{
@@ -363,7 +363,7 @@
       </li>
       <li class="list-inline-item">
         <a
-          class="d-none d-sm-block"
+          class="d-none d-sm-block rounded"
           i18n
           mat-button
           [ngClass]="{
@@ -377,7 +377,7 @@
       @if (hasPermissionForSubscription) {
         <li class="list-inline-item">
           <a
-            class="d-sm-block"
+            class="d-sm-block rounded"
             mat-button
             [ngClass]="{
               'font-weight-bold': currentRoute === routePricing,
@@ -397,7 +397,7 @@
       @if (hasPermissionToAccessFearAndGreedIndex) {
         <li class="list-inline-item">
           <a
-            class="d-none d-sm-block"
+            class="d-none d-sm-block rounded"
             i18n
             mat-button
             [ngClass]="{
@@ -418,14 +418,18 @@
         ></a>
       </li>
       <li class="list-inline-item">
-        <button class="d-sm-block" mat-button (click)="openLoginDialog()">
+        <button
+          class="d-sm-block rounded"
+          mat-button
+          (click)="openLoginDialog()"
+        >
           <ng-container i18n>Sign in</ng-container>
         </button>
       </li>
       @if (currentRoute !== 'register' && hasPermissionToCreateUser) {
         <li class="list-inline-item ml-1">
           <a
-            class="d-none d-sm-block"
+            class="d-none d-sm-block px-3 rounded"
             color="primary"
             mat-flat-button
             [routerLink]="routerLinkRegister"
diff --git a/apps/client/src/app/components/header/header.component.scss b/apps/client/src/app/components/header/header.component.scss
index 9a8d85863..28927abec 100644
--- a/apps/client/src/app/components/header/header.component.scss
+++ b/apps/client/src/app/components/header/header.component.scss
@@ -25,7 +25,6 @@
 
     .mdc-button {
       color: var(--mdc-text-button-label-text-color);
-      height: 100%;
 
       &:not(.mat-primary) {
         background-color: transparent;