styles

src/app/shared/components/data-display/orders-table/orders-table.component.css

@@ -93,7 +93,7 @@
 
 .actions-cell {
   display: flex;
-  justify-content: center;
+  justify-content: right;
   gap: 0.5rem;
 }
 

src/app/shared/components/data-display/orders-table/orders-table.component.html

@@ -6,7 +6,7 @@
         <th>Bestell-ID</th>
         <th>Status</th>
         <th class="text-right">Betrag</th>
-        <th class="text-center">Aktionen</th>
+        <th class="text-right">Aktionen</th>
       </tr>
     </thead>
     <tbody>
@@ -33,7 +33,7 @@
           }}</app-status-pill>
         </td>
         <td class="amount">{{ order.amount }}</td>
-        <td class="actions-cell">
+        <td class="actions-cell text-right">
           <app-button
             buttonType="icon"
             tooltip="Details anzeigen"

src/app/shared/components/form/form.css

@@ -1,73 +0,0 @@
-/* =================================================================================
- * GEMEINSAME BASIS-STILE FÜR ALLE FORMULAR-KOMPONENTEN
- * ================================================================================= */
-
-/* Stellt sicher, dass die Host-Komponente als Block-Element gerendert wird */
-:host {
-  display: block;
-}
-
-/* Der Wrapper für das Label und das Eingabefeld */
-.form-field {
-  position: relative;
-}
-
-/* Das "schwebende" Label */
-.form-label {
-  position: absolute;
-  top: 50%;
-  left: 1rem;
-  transform: translateY(-50%);
-  color: var(--color-text-light);
-  background-color: var(--color-surface);
-  padding: 0 0.25rem;
-  transition: all 0.2s ease-out;
-  pointer-events: none;
-  border-radius: var(--border-radius-sm);
-}
-
-/* Passt die Hintergrundfarbe des Labels für das Dark Theme an */
-:host-context(body.dark-theme) .form-label {
-  background-color: var(--color-surface);
-}
-
-/* Gemeinsame Stile für <input>, <select> und <textarea> */
-.form-input {
-  width: 100%;
-  padding: 0.85rem 1rem;
-  border: 1px solid var(--color-border);
-  border-radius: var(--border-radius-md);
-  background-color: var(--color-surface);
-  color: var(--color-text);
-  font-size: 1rem;
-  font-family: inherit; /* Stellt eine einheitliche Schriftart sicher */
-  transition: border-color var(--transition-speed);
-}
-
-/* Fokus-Zustand für alle Eingabefelder */
-.form-input:focus {
-  outline: none;
-  border-color: var(--color-primary);
-}
-
-/* Logik, die das Label nach oben bewegt */
-.form-input:focus ~ .form-label,
-.form-input:not(:placeholder-shown) ~ .form-label {
-  top: 0;
-  font-size: 0.8rem;
-  color: var(--color-primary);
-}
-
-/* Spezieller Fix für den Autofill-Hintergrund in Webkit-Browsern (Chrome, Edge) */
-.form-input:-webkit-autofill ~ .form-label {
-  top: 0;
-  font-size: 0.8rem;
-  color: var(--color-primary);
-}
-
-/* Layout-Helfer für Formulargruppen */
-.form-group-inline {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}

src/app/shared/components/layout/page-header/page-header.component.css

@@ -1,4 +1,3 @@
-/* Verschieben Sie diese Stile aus der globalen styles.css hierher */
 :host {
   display: block;
 }
@@ -7,20 +6,23 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 2rem;
 }
 
+/* .header-left {
+  Platzhalter für zukünftige Elemente wie Seitentitel oder Breadcrumbs
+} */
+
 .header-actions {
   display: flex;
   align-items: center;
   gap: 1.5rem;
 }
 
-/* Responsivität für den Header */
+/* Responsivität NUR für den Header */
 @media (max-width: 768px) {
   .main-header {
     flex-direction: column;
-    gap: 1rem;
+    gap: 1.5rem; /* Etwas mehr Abstand für mobile Ansicht */
     align-items: stretch;
   }
 }

src/app/shared/components/layout/page-header/page-header.component.html

@@ -1,14 +1,15 @@
 <header class="main-header">
-  
-  <!-- Linker Bereich: Hier könnte später ein Titel oder Breadcrumbs via ng-content platziert werden -->
   <div class="header-left">
     <app-search-bar></app-search-bar>
   </div>
-  
-  <!-- Rechter Bereich mit den Aktionen -->
   <div class="header-actions">
-    <app-theme-switcher></app-theme-switcher>
+
+    <app-slide-toggle
+     label="Dark Mode"
+    [ngModel]="darkModeAktiv"
+    (ngModelChange)="onDarkModeChange($event)"
+    name="mainDarkModeToggle"
+  ></app-slide-toggle>
     <app-user-profile></app-user-profile>
   </div>
-
 </header>

src/app/shared/components/layout/page-header/page-header.component.ts

@@ -1,8 +1,16 @@
-import { Component, Input } from '@angular/core';
-import { CommonModule } from '@angular/common';
+import {
+  Component,
+  Inject,
+  PLATFORM_ID,
+  Renderer2,
+  OnInit,
+  AfterViewInit,
+} from '@angular/core';
+import { CommonModule, DOCUMENT, isPlatformBrowser } from '@angular/common';
 import { SearchBarComponent } from '../search-bar/search-bar.component';
-import { ThemeSwitcherComponent } from '../theme-switcher/theme-switcher.component';
 import { UserProfileComponent } from '../user-profile/user-profile.component';
+import { SlideToggleComponent } from '../../form/slide-toggle/slide-toggle.component';
+import { FormsModule } from '@angular/forms';
 
 @Component({
   selector: 'app-page-header',
@@ -10,12 +18,67 @@ import { UserProfileComponent } from '../user-profile/user-profile.component';
   imports: [
     CommonModule,
     SearchBarComponent,
-    ThemeSwitcherComponent,
-    UserProfileComponent
+    UserProfileComponent,
+    SlideToggleComponent,
+    FormsModule,
   ],
   templateUrl: './page-header.component.html',
-  styleUrl: './page-header.component.css'
+  styleUrl: './page-header.component.css',
 })
-export class PageHeaderComponent {
-  // Hier könnten später z.B. der Seitentitel oder Breadcrumbs übergeben werden
-}
+export class PageHeaderComponent implements OnInit, AfterViewInit {
+  private readonly darkModeKey = 'app-dark-mode-setting';
+  darkModeAktiv: boolean = false;
+
+  constructor(
+    private renderer: Renderer2,
+    @Inject(DOCUMENT) private document: Document,
+    @Inject(PLATFORM_ID) private platformId: Object
+  ) {}
+
+  ngOnInit(): void {
+    this.loadThemeSetting();
+  }
+
+  ngAfterViewInit(): void {
+    this.updateTheme(this.darkModeAktiv);
+  }
+
+  private loadThemeSetting(): void {
+    if (isPlatformBrowser(this.platformId)) {
+      try {
+        const storedValue = localStorage.getItem(this.darkModeKey);
+        // Setze den Zustand der Komponente basierend auf dem gespeicherten Wert.
+        this.darkModeAktiv = storedValue === 'true';
+      } catch (e) {
+        console.error('Could not access localStorage:', e);
+      }
+    }
+    // Wende das Theme an - entweder den Standardwert (false) oder den geladenen Wert.
+    this.updateTheme(this.darkModeAktiv);
+  }
+
+  onDarkModeChange(isEnabled: boolean): void {
+    this.darkModeAktiv = isEnabled;
+
+    // --- KORREKTUR 2: Speichere die neue Einstellung ---
+    if (isPlatformBrowser(this.platformId)) {
+      try {
+        localStorage.setItem(this.darkModeKey, String(isEnabled));
+      } catch (e) {
+        console.error('Could not write to localStorage:', e);
+      }
+    }
+
+    // Wende die visuelle Änderung an.
+    this.updateTheme(isEnabled);
+  }
+
+  // This method is CORRECT. It just needs to be called.
+  private updateTheme(isEnabled: boolean): void {
+    if (isEnabled) {
+      this.renderer.addClass(this.document.body, 'dark-theme');
+    } else {
+      this.renderer.removeClass(this.document.body, 'dark-theme');
+    }
+  }
+}

src/app/shared/components/layout/theme-switcher/theme-switcher.component.css

@@ -1,12 +0,0 @@
-:host {
-  display: block;
-}
-
-.theme-switcher {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  color: var(--color-text-light);
-  font-weight: 500;
-  font-size: 0.9rem;
-}

src/app/shared/components/layout/theme-switcher/theme-switcher.component.html

@@ -1,5 +0,0 @@
-<div class="theme-switcher">
-  <label>Dark Mode</label>
-
-  <app-slide-toggle [(ngModel)]="isDarkMode" (ngModelChange)="toggleTheme($event)"></app-slide-toggle>
-</div>

src/app/shared/components/layout/theme-switcher/theme-switcher.component.ts

@@ -1,35 +0,0 @@
-import { Component, Renderer2, OnInit } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms'; // FormsModule importieren
-import { SlideToggleComponent } from '../../form/slide-toggle/slide-toggle.component';
-
-@Component({
-  selector: 'app-theme-switcher',
-  standalone: true,
-  imports: [
-    CommonModule, 
-    SlideToggleComponent,
-    FormsModule // <-- HIER IST DIE KORREKTUR
-  ],
-  templateUrl: './theme-switcher.component.html',
-  styleUrl: './theme-switcher.component.css'
-})
-export class ThemeSwitcherComponent implements OnInit {
-  isDarkMode = false;
-
-  constructor(private renderer: Renderer2) {}
-
-  ngOnInit(): void {
-    // Hier könnte man den Zustand aus dem localStorage laden
-  }
-
-  // Die Methode akzeptiert jetzt direkt den neuen boolean-Wert
-  toggleTheme(isDarkMode: boolean): void {
-    this.isDarkMode = isDarkMode;
-    if (this.isDarkMode) {
-      this.renderer.addClass(document.body, 'dark-theme');
-    } else {
-      this.renderer.removeClass(document.body, 'dark-theme');
-    }
-  }
-}