fix css issues

src/app/modules/songs/song-list/song-list.component.less

@@ -55,3 +55,7 @@
 .success {
   color: var(--success);
 }
+
+.list-action {
+  margin: var(--gap-m) var(--gap-l);
+}

src/app/modules/user/login/login.component.html

@@ -12,11 +12,13 @@
         <input (keyup.enter)="onLogin()" formControlName="pass" matInput type="password" />
       </mat-form-field>
       @if (errorMessage) {
-      <p class="error">{{ errorMessage | authMessage }}</p>
+        <p class="error">{{ errorMessage | authMessage }}</p>
       }
-      <button (click)="onLogin()" class="btn-login" color="primary" mat-stroked-button>Anmelden</button>
-      <button class="btn-password" mat-stroked-button routerLink="/user/password">Passwort zurücksetzen</button>
-      <button class="btn-user" mat-stroked-button routerLink="/user/new">neuen Benutzer anlegen</button>
+      <div class="buttons">
+        <app-button class="full-width" (click)="onLogin()">Anmelden</app-button>
+        <app-button class="full-width" routerLink="/user/password">Passwort zurücksetzen</app-button>
+        <app-button class="full-width" routerLink="/user/new">neuen Benutzer anlegen</app-button>
+      </div>
     </div>
   </div>
 </div>

src/app/modules/user/login/login.component.less

@@ -25,21 +25,11 @@ p.error {
   }
 }
 
-button {
-  font-size: 18px;
-}
-
-.btn-login {
-  margin-bottom: 40px;
-}
-
-.btn-password {
-  margin-bottom: 20px;
-  color: var(--text-soft);
-}
-
-.btn-user {
-  color: var(--text-soft);
+.buttons {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-l);
+  margin-top: var(--gap-l);
 }
 
 .frame {

src/app/modules/user/login/login.component.ts

@@ -1,4 +1,4 @@
-import {Component, OnInit, inject} from '@angular/core';
+import {Component, inject, OnInit} from '@angular/core';
 import {FormControl, FormGroup, ReactiveFormsModule, Validators} from '@angular/forms';
 import {Router, RouterLink} from '@angular/router';
 import {UserService} from '../../../services/user/user.service';
@@ -6,15 +6,14 @@ import {faSignInAlt, faUserPlus} from '@fortawesome/free-solid-svg-icons';
 import {LogoComponent} from '../../../widget-modules/components/logo/logo.component';
 import {MatFormField, MatLabel} from '@angular/material/form-field';
 import {MatInput} from '@angular/material/input';
-
-import {MatButton} from '@angular/material/button';
 import {AuthMessagePipe} from './auth-message.pipe';
+import {ButtonComponent} from '../../../widget-modules/components/button/button.component';
 
 @Component({
   selector: 'app-login',
   templateUrl: './login.component.html',
   styleUrls: ['./login.component.less'],
-  imports: [LogoComponent, ReactiveFormsModule, MatFormField, MatLabel, MatInput, MatButton, RouterLink, AuthMessagePipe],
+  imports: [LogoComponent, ReactiveFormsModule, MatFormField, MatLabel, MatInput, RouterLink, AuthMessagePipe, ButtonComponent],
 })
 export class LoginComponent implements OnInit {
   private userService = inject(UserService);

src/app/widget-modules/components/application-frame/navigation/navigation.component.less

@@ -10,7 +10,7 @@ nav {
     height: 50px;
     background: var(--navigation-background);
     color: var(--text-inverse);
-    z-index: 1;
+    z-index: 20;
     box-shadow: 0px -5px 20px 4px rgba(0, 0, 0, 0.39), 1px 0px 6px 4px rgba(0, 0, 0, 0.53);
     backdrop-filter: blur(10px);
     transition: var(--transition);