From 8514d6d73f239f588b12be4e23020c183587bf43 Mon Sep 17 00:00:00 2001
From: Jan-Marlon Leibl <jleibl@proton.me>
Date: Thu, 13 Feb 2025 12:28:00 +0100
Subject: [PATCH] style: Update footer and navbar HTML structure and classes

---
 .../components/footer/footer.component.html   | 108 ++++++------------
 .../components/navbar/navbar.component.html   |  53 ++-------
 frontend/src/styles.css                       |  52 +++++++++
 3 files changed, 99 insertions(+), 114 deletions(-)

diff --git a/frontend/src/app/shared/components/footer/footer.component.html b/frontend/src/app/shared/components/footer/footer.component.html
index a6d0610..87c4682 100644
--- a/frontend/src/app/shared/components/footer/footer.component.html
+++ b/frontend/src/app/shared/components/footer/footer.component.html
@@ -1,103 +1,65 @@
 <footer class="bg-deep-blue mt-auto">
   <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
     <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-8">
-      <div class="col-span-2 md:col-span-1">
-        <h3 class="text-white text-sm font-semibold mb-4">Casino Spiele</h3>
+      <div class="footer-section">
+        <h3 class="footer-heading">Casino Spiele</h3>
         <ul class="space-y-3">
           <li>
-            <a
-              href="#"
-              class="text-gray-400 hover:text-white text-sm transition-colors duration-200"
-              >Slots</a
-            >
+            <a routerLink="/games" class="footer-link">Slots</a>
           </li>
           <li>
-            <a
-              href="#"
-              class="text-gray-400 hover:text-white text-sm transition-colors duration-200"
-              >Plinko</a
-            >
+            <a routerLink="/games" class="footer-link">Plinko</a>
           </li>
           <li>
-            <a
-              href="#"
-              class="text-gray-400 hover:text-white text-sm transition-colors duration-200"
-              >Blackjack</a
-            >
+            <a routerLink="/games" class="footer-link">Blackjack</a>
           </li>
           <li>
-            <a
-              href="#"
-              class="text-gray-400 hover:text-white text-sm transition-colors duration-200"
-              >Poker</a
-            >
+            <a routerLink="/games" class="footer-link">Poker</a>
           </li>
           <li>
-            <a
-              href="#"
-              class="text-gray-400 hover:text-white text-sm transition-colors duration-200"
-              >Liars Dice</a
-            >
+            <a routerLink="/games" class="footer-link">Liars Dice</a>
           </li>
         </ul>
       </div>
-      <div class="col-span-2 md:col-span-1">
-        <h3 class="text-white text-sm font-semibold mb-4">Andere Spiele</h3>
+      <div class="footer-section">
+        <h3 class="footer-heading">Andere Spiele</h3>
         <ul class="space-y-3">
           <li>
-            <a
-              href="#"
-              class="text-gray-400 hover:text-white text-sm transition-colors duration-200"
-              >Lootboxen</a
-            >
+            <a routerLink="/games" class="footer-link">Lootboxen</a>
           </li>
         </ul>
       </div>
 
       <div class="col-span-2 lg:col-span-2">
-        <h3 class="text-white text-sm font-semibold mb-4">Einzahlungsmöglichkeiten</h3>
+        <h3 class="footer-heading">Einzahlungsmöglichkeiten</h3>
         <div class="grid grid-cols-2 md:grid-cols-3 gap-4">
-          <div
-            class="bg-deep-blue rounded p-3 flex items-center justify-center space-x-2 hover:bg-deep-blue/50 transition-colors duration-200"
-          >
-            <fa-icon [icon]="faMoneyBillTransfer" class="text-gray-400 text-lg"></fa-icon>
-            <span class="text-gray-400 text-xs whitespace-nowrap">Sofort</span>
+          <div class="footer-payment-method">
+            <fa-icon [icon]="faMoneyBillTransfer" class="footer-payment-icon"></fa-icon>
+            <span class="footer-payment-text">Sofort</span>
           </div>
-          <div
-            class="bg-deep-blue rounded p-3 flex items-center justify-center space-x-2 hover:bg-deep-blue/50 transition-colors duration-200"
-          >
-            <fa-icon [icon]="faPaypal" class="text-gray-400 text-lg"></fa-icon>
-            <span class="text-gray-400 text-xs whitespace-nowrap">Paypal</span>
+          <div class="footer-payment-method">
+            <fa-icon [icon]="faPaypal" class="footer-payment-icon"></fa-icon>
+            <span class="footer-payment-text">Paypal</span>
           </div>
-          <div
-            class="bg-deep-blue rounded p-3 flex items-center justify-center space-x-2 hover:bg-deep-blue/50 transition-colors duration-200"
-          >
-            <fa-icon [icon]="faCreditCard" class="text-gray-400 text-lg"></fa-icon>
-            <span class="text-gray-400 text-xs whitespace-nowrap">Kreditkarte</span>
+          <div class="footer-payment-method">
+            <fa-icon [icon]="faCreditCard" class="footer-payment-icon"></fa-icon>
+            <span class="footer-payment-text">Kreditkarte</span>
           </div>
-          <div
-            class="bg-deep-blue rounded p-3 flex items-center justify-center space-x-2 hover:bg-deep-blue/50 transition-colors duration-200"
-          >
-            <fa-icon [icon]="faWallet" class="text-gray-400 text-lg"></fa-icon>
-            <span class="text-gray-400 text-xs whitespace-nowrap">Klara</span>
+          <div class="footer-payment-method">
+            <fa-icon [icon]="faWallet" class="footer-payment-icon"></fa-icon>
+            <span class="footer-payment-text">Klara</span>
           </div>
-          <div
-            class="bg-deep-blue rounded p-3 flex items-center justify-center space-x-2 hover:bg-deep-blue/50 transition-colors duration-200"
-          >
-            <fa-icon [icon]="faMoneyBillTransfer" class="text-gray-400 text-lg"></fa-icon>
-            <span class="text-gray-400 text-xs whitespace-nowrap">Sepa</span>
+          <div class="footer-payment-method">
+            <fa-icon [icon]="faMoneyBillTransfer" class="footer-payment-icon"></fa-icon>
+            <span class="footer-payment-text">Sepa</span>
           </div>
-          <div
-            class="bg-deep-blue rounded p-3 flex items-center justify-center space-x-2 hover:bg-deep-blue/50 transition-colors duration-200"
-          >
-            <fa-icon [icon]="faGooglePay" class="text-gray-400 text-lg"></fa-icon>
-            <span class="text-gray-400 text-xs whitespace-nowrap">Google Pay</span>
+          <div class="footer-payment-method">
+            <fa-icon [icon]="faGooglePay" class="footer-payment-icon"></fa-icon>
+            <span class="footer-payment-text">Google Pay</span>
           </div>
-          <div
-            class="bg-deep-blue rounded p-3 flex items-center justify-center space-x-2 hover:bg-deep-blue/50 transition-colors duration-200"
-          >
-            <fa-icon [icon]="faApplePay" class="text-gray-400 text-lg"></fa-icon>
-            <span class="text-gray-400 text-xs whitespace-nowrap">Apple Pay</span>
+          <div class="footer-payment-method">
+            <fa-icon [icon]="faApplePay" class="footer-payment-icon"></fa-icon>
+            <span class="footer-payment-text">Apple Pay</span>
           </div>
         </div>
       </div>
@@ -105,8 +67,10 @@
 
     <div class="mt-12 pt-8 border-t border-deep-blue-light">
       <div class="flex flex-col md:flex-row justify-between items-center">
-        <div class="text-gray-400 text-sm mb-4 md:mb-0">
-          <span class="text-xs"> <span class="text-emerald">*</span> nicht vorhanden. </span>
+        <div class="footer-copyright">
+          <span class="footer-disclaimer">
+            <span class="text-emerald">*</span> nicht vorhanden.
+          </span>
           <br />
           © {{ currentYear }} Trustworthy Casino. Keine Rechte vorbehalten.
         </div>
diff --git a/frontend/src/app/shared/components/navbar/navbar.component.html b/frontend/src/app/shared/components/navbar/navbar.component.html
index b0abbbb..6ce24cc 100644
--- a/frontend/src/app/shared/components/navbar/navbar.component.html
+++ b/frontend/src/app/shared/components/navbar/navbar.component.html
@@ -1,43 +1,26 @@
-<nav class="bg-deep-blue text-gray-300 border-b border-deep-blue-contrast">
+<nav class="bg-deep-blue border-b border-deep-blue-contrast">
   <div class="max-w-full mx-auto px-4">
     <div class="flex justify-between items-center h-14">
       <div class="flex items-center space-x-6">
-        <a routerLink="/" class="flex items-center">
-          <span class="text-white text-xl font-semibold">Trustworthy Casino</span>
+        <a routerLink="/" class="nav-brand">
+          <span>Trustworthy Casino</span>
         </a>
         <div class="hidden md:flex items-center space-x-1">
-          <a
-            routerLink="/games"
-            class="px-3 py-2 rounded-md text-sm hover:bg-deep-blue-contrast transition-colors duration-200"
-            >Games</a
-          >
+          <a routerLink="/games" class="nav-link">Games</a>
         </div>
       </div>
 
       <div class="hidden md:flex items-center space-x-4">
         @if (!isLoggedIn) {
-          <button
-            (click)="login()"
-            class="cursor-pointer px-4 py-1.5 rounded bg-emerald-500 hover:bg-emerald-600 text-white text-sm font-medium transition-colors duration-200"
-          >
-            Login
-          </button>
+          <button (click)="login()" class="button-base px-4 py-1.5">Login</button>
         }
         @if (isLoggedIn) {
-          <button
-            (click)="logout()"
-            class="cursor-pointer px-4 py-1.5 rounded bg-emerald-500 hover:bg-emerald-600 text-white text-sm font-medium transition-colors duration-200"
-          >
-            Logout
-          </button>
+          <button (click)="logout()" class="button-base px-4 py-1.5">Logout</button>
         }
       </div>
 
       <div class="md:hidden">
-        <button
-          (click)="toggleMenu()"
-          class="text-gray-300 hover:text-white transition-colors duration-200"
-        >
+        <button (click)="toggleMenu()" class="nav-toggle">
           <svg
             class="h-6 w-6"
             [class.hidden]="isMenuOpen"
@@ -71,28 +54,14 @@
     </div>
 
     <div [class]="isMenuOpen ? 'block' : 'hidden'" class="md:hidden">
-      <div class="p-2 pt-2 mb-4 space-y-1 bg-deep-blue-contrast rounded-b-lg">
-        <a
-          routerLink="/games"
-          class="block px-3 py-2 rounded-md text-sm hover:bg-deep-blue-light transition-colors duration-200"
-          >Games</a
-        >
+      <div class="nav-mobile-menu">
+        <a routerLink="/games" class="nav-mobile-link">Games</a>
         <div class="pt-2 space-y-2">
           @if (!isLoggedIn) {
-            <button
-              (click)="login()"
-              class="cursor-pointer w-full px-4 py-1.5 rounded bg-emerald-500 hover:bg-emerald-600 text-white text-sm font-medium transition-colors duration-200"
-            >
-              Login
-            </button>
+            <button (click)="login()" class="button-base w-full py-1.5">Login</button>
           }
           @if (isLoggedIn) {
-            <button
-              (click)="logout()"
-              class="cursor-pointer w-full px-4 py-1.5 rounded bg-emerald-500 hover:bg-emerald-600 text-white text-sm font-medium transition-colors duration-200"
-            >
-              Logout
-            </button>
+            <button (click)="logout()" class="button-base w-full py-1.5">Logout</button>
           }
         </div>
       </div>
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index e801711..7d86b3c 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -83,6 +83,58 @@ a {
   @apply text-text-secondary text-sm;
 }
 
+.nav-brand {
+  @apply flex items-center text-text-primary text-xl font-semibold;
+}
+
+.nav-link {
+  @apply px-3 py-2 rounded-md text-sm text-text-secondary hover:text-text-primary hover:bg-deep-blue-contrast transition-all duration-200;
+}
+
+.nav-toggle {
+  @apply text-text-secondary hover:text-text-primary transition-colors duration-200;
+}
+
+.nav-mobile-menu {
+  @apply p-2 pt-2 mb-4 space-y-1 bg-deep-blue-contrast rounded-b-lg;
+}
+
+.nav-mobile-link {
+  @apply block px-3 py-2 rounded-md text-sm text-text-secondary hover:text-text-primary hover:bg-deep-blue-light transition-all duration-200;
+}
+
+.footer-section {
+  @apply col-span-2 md:col-span-1;
+}
+
+.footer-heading {
+  @apply text-text-primary text-sm font-semibold mb-4;
+}
+
+.footer-link {
+  @apply text-text-secondary hover:text-text-primary text-sm transition-all duration-200;
+}
+
+.footer-payment-method {
+  @apply bg-deep-blue rounded p-3 flex items-center justify-center space-x-2 hover:bg-deep-blue/50 transition-all duration-200;
+}
+
+.footer-payment-icon {
+  @apply text-text-secondary text-lg;
+}
+
+.footer-payment-text {
+  @apply text-text-secondary text-xs whitespace-nowrap;
+}
+
+.footer-copyright {
+  @apply text-text-secondary text-sm;
+}
+
+.footer-disclaimer {
+  @apply text-xs;
+}
+
 html,
 body {
   height: 100%;