From 5e861ee34c26d6a9bba38e132044fe44398b3178 Mon Sep 17 00:00:00 2001 From: Jan-Marlon Leibl Date: Wed, 12 Feb 2025 11:26:48 +0100 Subject: [PATCH 1/7] feat: add navbar component to the application --- frontend/src/app/app.component.html | 1 + frontend/src/app/app.component.ts | 4 +- .../components/navbar/navbar.component.html | 42 +++++++++++ .../components/navbar/navbar.component.scss | 34 +++++++++ .../components/navbar/navbar.component.ts | 18 +++++ frontend/src/styles.css | 71 ++++++++++++++++++- frontend/tailwind.config.js | 28 ++++++++ 7 files changed, 195 insertions(+), 3 deletions(-) create mode 100644 frontend/src/app/shared/components/navbar/navbar.component.html create mode 100644 frontend/src/app/shared/components/navbar/navbar.component.scss create mode 100644 frontend/src/app/shared/components/navbar/navbar.component.ts diff --git a/frontend/src/app/app.component.html b/frontend/src/app/app.component.html index 0680b43..6659729 100644 --- a/frontend/src/app/app.component.html +++ b/frontend/src/app/app.component.html @@ -1 +1,2 @@ + diff --git a/frontend/src/app/app.component.ts b/frontend/src/app/app.component.ts index 7acf29a..6b8cdf7 100644 --- a/frontend/src/app/app.component.ts +++ b/frontend/src/app/app.component.ts @@ -2,11 +2,11 @@ import { Component, ChangeDetectionStrategy } from '@angular/core'; import { CommonModule } from '@angular/common'; import { RouterOutlet } from '@angular/router'; import { KeycloakAngularModule } from 'keycloak-angular'; - +import { NavbarComponent } from './shared/components/navbar/navbar.component'; @Component({ selector: 'app-root', standalone: true, - imports: [CommonModule, RouterOutlet, KeycloakAngularModule], + imports: [CommonModule, RouterOutlet, KeycloakAngularModule, NavbarComponent], providers: [], templateUrl: './app.component.html', styleUrl: './app.component.css', diff --git a/frontend/src/app/shared/components/navbar/navbar.component.html b/frontend/src/app/shared/components/navbar/navbar.component.html new file mode 100644 index 0000000..cd772bd --- /dev/null +++ b/frontend/src/app/shared/components/navbar/navbar.component.html @@ -0,0 +1,42 @@ + \ No newline at end of file diff --git a/frontend/src/app/shared/components/navbar/navbar.component.scss b/frontend/src/app/shared/components/navbar/navbar.component.scss new file mode 100644 index 0000000..1f11eda --- /dev/null +++ b/frontend/src/app/shared/components/navbar/navbar.component.scss @@ -0,0 +1,34 @@ +:host { + display: block; +} + +.text-gold { + color: #FFD700; +} + +.bg-gold { + background-color: #FFD700; + &:hover { + background-color: #FFC000; + } +} + +.hover\:bg-gold-dark:hover { + background-color: #FFC000; +} + +.hover\:text-gold:hover { + color: #FFD700; +} + +nav { + position: fixed; + top: 0; + left: 0; + right: 0; + z-index: 1000; +} + +.transition-colors { + transition: all 0.2s ease-in-out; +} \ No newline at end of file diff --git a/frontend/src/app/shared/components/navbar/navbar.component.ts b/frontend/src/app/shared/components/navbar/navbar.component.ts new file mode 100644 index 0000000..e4eb7c2 --- /dev/null +++ b/frontend/src/app/shared/components/navbar/navbar.component.ts @@ -0,0 +1,18 @@ +import { Component } from '@angular/core'; +import { RouterModule } from '@angular/router'; +import { CommonModule } from '@angular/common'; + +@Component({ + selector: 'app-navbar', + templateUrl: './navbar.component.html', + styleUrls: ['./navbar.component.scss'], + standalone: true, + imports: [CommonModule, RouterModule] +}) +export class NavbarComponent { + isMenuOpen = false; + + toggleMenu() { + this.isMenuOpen = !this.isMenuOpen; + } +} \ No newline at end of file diff --git a/frontend/src/styles.css b/frontend/src/styles.css index d4b5078..c69e30e 100644 --- a/frontend/src/styles.css +++ b/frontend/src/styles.css @@ -1 +1,70 @@ -@import 'tailwindcss'; +@import "tailwindcss"; + +@theme { + --color-primary-900: rgb(26, 44, 56); + --color-primary-800: #1a1a1a; + --color-primary-600: #2d2d2d; + + --color-accent-blue: #3b82f6; + --color-accent-green: #22c55e; + + --color-gold: #ffd700; + --color-gold-light: #ffe44d; + + --color-gray-100: #f3f4f6; + --color-gray-200: #e5e7eb; + --color-gray-300: #d1d5db; + --color-gray-400: #9ca3af; +} + +body { + @apply bg-primary-900 text-gray-100; +} +/* Buttons */ +.button { + @apply px-4 py-2 rounded font-medium transition-all duration-300; +} +/* Primary Button */ +.button-primary { + @apply bg-accent-blue text-gray-100 hover:bg-blue-600 active:bg-blue-700; +} +/* Secondary Button */ +.button-secondary { + @apply bg-gray-400 text-gray-100 hover:bg-gray-300 active:bg-gray-200; +} +/* Success Button */ +.button-success { + @apply bg-accent-green text-primary-900 hover:opacity-90 active:opacity-80; +} +/* Disabled Button */ +.button-disabled { + @apply bg-gray-200 text-gray-400 cursor-not-allowed; +} +/* Navigation */ +.nav-link { + @apply text-gray-100 hover:text-gold-light transition-colors duration-300; +} +.nav-link-active { + @apply text-gold; +} +/* Cards */ +.card { + @apply bg-primary-800 rounded-lg shadow-lg p-6; +} +/* Gradients */ +.gradient-primary { + @apply bg-gradient-to-r from-primary-800 to-primary-600; +} + + +/* Button States */ +.button:hover { + @apply shadow-lg; +} +.button:active { + @apply scale-95; +} +.button:focus { + @apply outline-none ring-2 ring-offset-2 ring-accent-blue; +} + \ No newline at end of file diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js index 843fec3..87e76e4 100644 --- a/frontend/tailwind.config.js +++ b/frontend/tailwind.config.js @@ -5,6 +5,34 @@ module.exports = { ], theme: { extend: { + colors: { + // Core colors from the palette + 'primary': { + 900: '#000000', // #000000 + 800: '#05080a', // #05080a + 700: '#071d2a', // #071d2a + 600: '#0f212e', // #0f212e - dark navy + 500: '#1a2c38', // #1a2c38 + 400: '#213743', // #213743 + 300: '#2f4553', // #2f4553 + }, + 'accent': { + blue: '#1475e1', // Bright blue + green: '#00e701', // Bright green + }, + 'gray': { + 400: '#557086', // Mid gray + 300: '#b1bad3', // Light gray + 200: '#d5dceb', // Lighter gray + 100: '#ffffff', // White + }, + // Semantic colors + 'gold': { + DEFAULT: '#b1bad3', + light: '#d5dceb', + dark: '#557086', + }, + }, animation: { 'fadeIn': 'fadeIn 0.3s ease-out', 'backdropBlur': 'backdropBlur 0.4s ease-out', -- 2.47.2 From 84c06de2e45cf5d9c88e395568bd84a193390b20 Mon Sep 17 00:00:00 2001 From: Jan-Marlon Leibl Date: Wed, 12 Feb 2025 11:28:59 +0100 Subject: [PATCH 2/7] chore: remove unused tailwind configuration file --- frontend/tailwind.config.js | 246 ------------------------------------ 1 file changed, 246 deletions(-) delete mode 100644 frontend/tailwind.config.js diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js deleted file mode 100644 index 87e76e4..0000000 --- a/frontend/tailwind.config.js +++ /dev/null @@ -1,246 +0,0 @@ -/** @type {import('tailwindcss').Config} */ -module.exports = { - content: [ - "./src/**/*.{html,ts}", - ], - theme: { - extend: { - colors: { - // Core colors from the palette - 'primary': { - 900: '#000000', // #000000 - 800: '#05080a', // #05080a - 700: '#071d2a', // #071d2a - 600: '#0f212e', // #0f212e - dark navy - 500: '#1a2c38', // #1a2c38 - 400: '#213743', // #213743 - 300: '#2f4553', // #2f4553 - }, - 'accent': { - blue: '#1475e1', // Bright blue - green: '#00e701', // Bright green - }, - 'gray': { - 400: '#557086', // Mid gray - 300: '#b1bad3', // Light gray - 200: '#d5dceb', // Lighter gray - 100: '#ffffff', // White - }, - // Semantic colors - 'gold': { - DEFAULT: '#b1bad3', - light: '#d5dceb', - dark: '#557086', - }, - }, - animation: { - 'fadeIn': 'fadeIn 0.3s ease-out', - 'backdropBlur': 'backdropBlur 0.4s ease-out', - 'modalSlideIn': 'modalSlideIn 0.5s cubic-bezier(0.16,1,0.3,1)', - 'slideDown': 'slideDown 0.6s ease-out', - 'slideUp': 'slideUp 0.6s ease-out', - 'scaleIn': 'scaleIn 0.8s cubic-bezier(0.16,1,0.3,1)', - 'spinAndBounce': 'spinAndBounce 3s ease-in-out infinite', - 'glow': 'glow 4s ease-in-out infinite', - 'marquee': 'marquee 30s linear infinite', - 'float': 'float 6s ease-in-out infinite', - 'tiltAndGlow': 'tiltAndGlow 3s ease-in-out infinite', - 'shimmer': 'shimmer 2s linear infinite', - 'morphBackground': 'morphBackground 10s ease-in-out infinite', - 'elasticScale': 'elasticScale 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55)', - 'bounceAndFade': 'bounceAndFade 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55)', - 'rotateAndScale': 'rotateAndScale 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55)', - 'pulseGlow': 'pulseGlow 2s cubic-bezier(0.4, 0, 0.6, 1) infinite', - }, - keyframes: { - fadeIn: { - 'from': { opacity: '0' }, - 'to': { opacity: '1' } - }, - backdropBlur: { - 'from': { - 'backdrop-filter': 'blur(0px)', - 'background-color': 'rgba(0,0,0,0)' - }, - 'to': { - 'backdrop-filter': 'blur(16px)', - 'background-color': 'rgba(0,0,0,0.95)' - } - }, - modalSlideIn: { - 'from': { - opacity: '0', - transform: 'scale(0.95) translateY(10px)' - }, - 'to': { - opacity: '1', - transform: 'scale(1) translateY(0)' - } - }, - slideDown: { - 'from': { - opacity: '0', - transform: 'translateY(-20px)' - }, - 'to': { - opacity: '1', - transform: 'translateY(0)' - } - }, - slideUp: { - 'from': { - opacity: '0', - transform: 'translateY(20px)' - }, - 'to': { - opacity: '1', - transform: 'translateY(0)' - } - }, - scaleIn: { - 'from': { - opacity: '0', - transform: 'scale(0.9)' - }, - 'to': { - opacity: '1', - transform: 'scale(1)' - } - }, - spinAndBounce: { - '0%': { - transform: 'scale(1) rotate(0deg)' - }, - '50%': { - transform: 'scale(1.2) rotate(180deg)' - }, - '100%': { - transform: 'scale(1) rotate(360deg)' - } - }, - glow: { - '0%, 100%': { - opacity: '0.3', - transform: 'scale(1)' - }, - '50%': { - opacity: '0.5', - transform: 'scale(1.05)' - } - }, - marquee: { - '0%': { transform: 'translateX(0)' }, - '100%': { transform: 'translateX(-100%)' } - }, - float: { - '0%, 100%': { transform: 'translateY(0)' }, - '50%': { transform: 'translateY(-20px)' } - }, - tiltAndGlow: { - '0%, 100%': { - transform: 'perspective(1000px) rotateX(0deg) rotateY(0deg)', - 'box-shadow': '0 0 20px rgba(34,197,94,0.2)' - }, - '50%': { - transform: 'perspective(1000px) rotateX(2deg) rotateY(5deg)', - 'box-shadow': '0 0 40px rgba(34,197,94,0.4)' - } - }, - shimmer: { - '0%': { - 'background-position': '-1000px 0' - }, - '100%': { - 'background-position': '1000px 0' - } - }, - morphBackground: { - '0%, 100%': { - 'border-radius': '60% 40% 30% 70%/60% 30% 70% 40%' - }, - '50%': { - 'border-radius': '30% 60% 70% 40%/50% 60% 30% 60%' - } - }, - elasticScale: { - '0%': { - transform: 'scale(0)' - }, - '60%': { - transform: 'scale(1.1)' - }, - '100%': { - transform: 'scale(1)' - } - }, - bounceAndFade: { - '0%': { - transform: 'scale(0.3)', - opacity: '0' - }, - '50%': { - transform: 'scale(1.05)', - opacity: '0.8' - }, - '100%': { - transform: 'scale(1)', - opacity: '1' - } - }, - rotateAndScale: { - '0%': { - transform: 'rotate(-180deg) scale(0)' - }, - '100%': { - transform: 'rotate(0) scale(1)' - } - }, - pulseGlow: { - '0%, 100%': { - opacity: '1', - transform: 'scale(1)', - filter: 'brightness(1)' - }, - '50%': { - opacity: '0.8', - transform: 'scale(1.05)', - filter: 'brightness(1.2)' - } - } - }, - transitionDelay: { - '100': '100ms', - '200': '200ms', - '300': '300ms', - '400': '400ms', - '500': '500ms', - }, - transitionTimingFunction: { - 'bounce': 'cubic-bezier(0.68, -0.55, 0.265, 1.55)', - 'smooth': 'cubic-bezier(0.4, 0, 0.2, 1)', - 'elastic': 'cubic-bezier(0.68, -0.55, 0.265, 1.55)', - 'spring': 'cubic-bezier(0.175, 0.885, 0.32, 1.275)', - }, - backdropBlur: { - 'xs': '2px', - '4xl': '72px', - '5xl': '96px', - }, - backgroundImage: { - 'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))', - 'gradient-conic': 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))', - 'shimmer': 'linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent)', - } - }, - }, - plugins: [ - require('@tailwindcss/aspect-ratio'), - require('@tailwindcss/forms'), - require('@tailwindcss/typography'), - require('tailwindcss-animated'), - require('tailwindcss-gradients'), - require('tailwindcss-transforms'), - require('tailwindcss-filters'), - require('tailwind-scrollbar-hide'), - ], -} -- 2.47.2 From 8ce4bb1be4010be58017e0bc2a29942e6e3c0aa2 Mon Sep 17 00:00:00 2001 From: Jan-Marlon Leibl Date: Wed, 12 Feb 2025 11:29:37 +0100 Subject: [PATCH 3/7] style: Clean up CSS comments and formatting --- frontend/src/styles.css | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/frontend/src/styles.css b/frontend/src/styles.css index c69e30e..b8e4ecb 100644 --- a/frontend/src/styles.css +++ b/frontend/src/styles.css @@ -20,51 +20,51 @@ body { @apply bg-primary-900 text-gray-100; } -/* Buttons */ + .button { @apply px-4 py-2 rounded font-medium transition-all duration-300; } -/* Primary Button */ + .button-primary { @apply bg-accent-blue text-gray-100 hover:bg-blue-600 active:bg-blue-700; } -/* Secondary Button */ + .button-secondary { @apply bg-gray-400 text-gray-100 hover:bg-gray-300 active:bg-gray-200; } -/* Success Button */ + .button-success { @apply bg-accent-green text-primary-900 hover:opacity-90 active:opacity-80; } -/* Disabled Button */ + .button-disabled { @apply bg-gray-200 text-gray-400 cursor-not-allowed; } -/* Navigation */ + .nav-link { @apply text-gray-100 hover:text-gold-light transition-colors duration-300; } + .nav-link-active { @apply text-gold; } -/* Cards */ + .card { @apply bg-primary-800 rounded-lg shadow-lg p-6; } -/* Gradients */ + .gradient-primary { @apply bg-gradient-to-r from-primary-800 to-primary-600; } - -/* Button States */ .button:hover { @apply shadow-lg; } + .button:active { @apply scale-95; } + .button:focus { @apply outline-none ring-2 ring-offset-2 ring-accent-blue; -} - \ No newline at end of file +} \ No newline at end of file -- 2.47.2 From 4a43b32133eb87d1d3991f45064ab9a69dc353df Mon Sep 17 00:00:00 2001 From: Jan-Marlon Leibl Date: Wed, 12 Feb 2025 11:31:22 +0100 Subject: [PATCH 4/7] style: Update color values in styles.css --- frontend/src/styles.css | 60 +++++------------------------------------ 1 file changed, 6 insertions(+), 54 deletions(-) diff --git a/frontend/src/styles.css b/frontend/src/styles.css index b8e4ecb..136cbe7 100644 --- a/frontend/src/styles.css +++ b/frontend/src/styles.css @@ -2,15 +2,15 @@ @theme { --color-primary-900: rgb(26, 44, 56); - --color-primary-800: #1a1a1a; - --color-primary-600: #2d2d2d; - + --color-primary-800: rgb(30, 48, 60); + --color-primary-600: rgb(34, 52, 64); + --color-accent-blue: #3b82f6; --color-accent-green: #22c55e; - + --color-gold: #ffd700; --color-gold-light: #ffe44d; - + --color-gray-100: #f3f4f6; --color-gray-200: #e5e7eb; --color-gray-300: #d1d5db; @@ -18,53 +18,5 @@ } body { - @apply bg-primary-900 text-gray-100; -} - -.button { - @apply px-4 py-2 rounded font-medium transition-all duration-300; -} - -.button-primary { - @apply bg-accent-blue text-gray-100 hover:bg-blue-600 active:bg-blue-700; -} - -.button-secondary { - @apply bg-gray-400 text-gray-100 hover:bg-gray-300 active:bg-gray-200; -} - -.button-success { - @apply bg-accent-green text-primary-900 hover:opacity-90 active:opacity-80; -} - -.button-disabled { - @apply bg-gray-200 text-gray-400 cursor-not-allowed; -} - -.nav-link { - @apply text-gray-100 hover:text-gold-light transition-colors duration-300; -} - -.nav-link-active { - @apply text-gold; -} - -.card { - @apply bg-primary-800 rounded-lg shadow-lg p-6; -} - -.gradient-primary { - @apply bg-gradient-to-r from-primary-800 to-primary-600; -} - -.button:hover { - @apply shadow-lg; -} - -.button:active { - @apply scale-95; -} - -.button:focus { - @apply outline-none ring-2 ring-offset-2 ring-accent-blue; + @apply bg-primary-800 text-gray-100; } \ No newline at end of file -- 2.47.2 From f7c98ec6fe47748f4de759c5c5cedca5294e4425 Mon Sep 17 00:00:00 2001 From: Jan-Marlon Leibl Date: Wed, 12 Feb 2025 11:38:28 +0100 Subject: [PATCH 5/7] style(navbar): update navbar colors to use variables --- .../components/navbar/navbar.component.html | 12 +++++------ frontend/src/styles.css | 21 ++++++------------- 2 files changed, 12 insertions(+), 21 deletions(-) diff --git a/frontend/src/app/shared/components/navbar/navbar.component.html b/frontend/src/app/shared/components/navbar/navbar.component.html index cd772bd..61447ad 100644 --- a/frontend/src/app/shared/components/navbar/navbar.component.html +++ b/frontend/src/app/shared/components/navbar/navbar.component.html @@ -1,4 +1,4 @@ -