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%;