denis/gremiumhub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Add new design closer to gremiumhub landing

Browse Source
This commit is contained in:
Denis Lugowski
2026-02-15 09:59:15 +01:00
parent 454321dad2
commit 05b89778cf
10 changed files with 358 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

169
deployment/keycloak-theme/legalconsenthub/login/resources/css/styles.css
View File

@@ -1,20 +1,46 @@
/* LegalConsentHub Keycloak Theme - Matching Nuxt UI 4 Styling */ /* LegalConsentHub Keycloak Theme - Matching Nuxt UI 4 Styling */
/* Compatible with Keycloak 26+ PatternFly-based themes */ /* Compatible with Keycloak 26+ PatternFly-based themes */
/* CSS Variables matching Nuxt UI green/zinc theme */ /* CSS Variables matching Nuxt UI teal/cyan/violet theme */
:root { :root {
/* Green palette (primary) */ /* Teal palette (primary) */
--lch-green-50: #effdf5; --lch-teal-50: #f0fdfa;
--lch-green-100: #d9fbe8; --lch-teal-100: #ccfbf1;
--lch-green-200: #b3f5d1; --lch-teal-200: #99f6e4;
--lch-green-300: #75edae; --lch-teal-300: #5eead4;
--lch-green-400: #00dc82; --lch-teal-400: #2dd4bf;
--lch-green-500: #00c16a; --lch-teal-500: #14b8a6;
--lch-green-600: #00a155; --lch-teal-600: #0d9488;
--lch-green-700: #007f45; --lch-teal-700: #0f766e;
--lch-green-800: #016538; --lch-teal-800: #115e59;
--lch-green-900: #0a5331; --lch-teal-900: #134e4a;
--lch-green-950: #052e16; --lch-teal-950: #042f2e;
/* Cyan palette (accent) */
--lch-cyan-50: #ecfeff;
--lch-cyan-100: #cffafe;
--lch-cyan-200: #a5f3fc;
--lch-cyan-300: #67e8f9;
--lch-cyan-400: #22d3ee;
--lch-cyan-500: #06b6d4;
--lch-cyan-600: #0891b2;
--lch-cyan-700: #0e7490;
--lch-cyan-800: #155e75;
--lch-cyan-900: #164e63;
--lch-cyan-950: #083344;
/* Violet palette (highlight accent) */
--lch-violet-50: #f5f3ff;
--lch-violet-100: #ede9fe;
--lch-violet-200: #ddd6fe;
--lch-violet-300: #c4b5fd;
--lch-violet-400: #a78bfa;
--lch-violet-500: #8b5cf6;
--lch-violet-600: #7c3aed;
--lch-violet-700: #6d28d9;
--lch-violet-800: #5b21b6;
--lch-violet-900: #4c1d95;
--lch-violet-950: #2e1065;
/* Zinc palette (neutral) */ /* Zinc palette (neutral) */
--lch-zinc-50: #fafafa; --lch-zinc-50: #fafafa;
@@ -40,8 +66,56 @@ html.login-pf body {
height: 100%; height: 100%;
margin: 0; margin: 0;
padding: 0; padding: 0;
background: linear-gradient(135deg, var(--lch-zinc-100) 0%, var(--lch-zinc-200) 100%) !important; background: linear-gradient(180deg, #ffffff 0%, var(--lch-teal-50) 50%, var(--lch-cyan-50) 100%) !important;
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important; font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
position: relative !important;
overflow: hidden !important;
}
/* Decorative gradient orbs - matching auth layout */
html.login-pf::before,
html.login-pf::after {
content: "" !important;
position: fixed !important;
border-radius: 50% !important;
filter: blur(80px) !important;
opacity: 0.4 !important;
pointer-events: none !important;
z-index: 0 !important;
}
/* Teal/cyan orb - top right */
html.login-pf::before {
width: 400px !important;
height: 400px !important;
top: -100px !important;
right: -100px !important;
background: linear-gradient(135deg, var(--lch-teal-500), var(--lch-cyan-400)) !important;
}
/* Cyan/teal orb - bottom left */
html.login-pf::after {
width: 300px !important;
height: 300px !important;
bottom: -50px !important;
left: -50px !important;
background: linear-gradient(135deg, var(--lch-cyan-400), var(--lch-teal-500)) !important;
}
/* Violet orb via body pseudo-element - bottom right */
html.login-pf body::before {
content: "" !important;
position: fixed !important;
width: 200px !important;
height: 200px !important;
bottom: -50px !important;
right: 20% !important;
border-radius: 50% !important;
filter: blur(80px) !important;
opacity: 0.3 !important;
background: linear-gradient(135deg, var(--lch-violet-400), var(--lch-violet-600)) !important;
pointer-events: none !important;
z-index: 0 !important;
} }
.login-pf-page { .login-pf-page {
@@ -52,6 +126,8 @@ html.login-pf body {
min-height: 100vh !important; min-height: 100vh !important;
padding: 1rem !important; padding: 1rem !important;
box-sizing: border-box !important; box-sizing: border-box !important;
position: relative !important;
z-index: 1 !important;
} }
/* Hide the default header with realm name */ /* Hide the default header with realm name */
@@ -139,8 +215,8 @@ input[type="email"] {
input[type="text"]:focus, input[type="text"]:focus,
input[type="password"]:focus, input[type="password"]:focus,
input[type="email"]:focus { input[type="email"]:focus {
border-color: var(--lch-green-400) !important; border-color: var(--lch-teal-400) !important;
box-shadow: 0 0 0 3px rgba(0, 220, 130, 0.2) !important; box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.2) !important;
} }
.pf-c-form-control:hover, .pf-c-form-control:hover,
@@ -159,28 +235,29 @@ input[type="email"]:hover {
font-weight: 500 !important; font-weight: 500 !important;
line-height: 1.5 !important; line-height: 1.5 !important;
color: white !important; color: white !important;
background-color: var(--lch-green-500) !important; background: linear-gradient(135deg, var(--lch-teal-500) 0%, var(--lch-cyan-500) 100%) !important;
border: none !important; border: none !important;
border-radius: 0.5rem !important; border-radius: 0.75rem !important;
cursor: pointer !important; cursor: pointer !important;
transition: background-color 0.15s ease-in-out, transform 0.1s ease-in-out, box-shadow 0.15s ease-in-out !important; transition: all 0.2s ease-in-out !important;
text-align: center !important; text-align: center !important;
box-sizing: border-box !important; box-sizing: border-box !important;
box-shadow: 0 4px 14px -2px rgba(20, 184, 166, 0.4) !important;
} }
#kc-login:hover { #kc-login:hover {
background-color: var(--lch-green-400) !important; background: linear-gradient(135deg, var(--lch-cyan-500) 0%, var(--lch-violet-500) 100%) !important;
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1) !important; box-shadow: 0 6px 20px -2px rgba(139, 92, 246, 0.4) !important;
} }
#kc-login:active { #kc-login:active {
background-color: var(--lch-green-700) !important; background: linear-gradient(135deg, var(--lch-teal-600) 0%, var(--lch-cyan-600) 100%) !important;
transform: scale(0.98) !important; transform: scale(0.98) !important;
} }
#kc-login:focus { #kc-login:focus {
outline: none !important; outline: none !important;
box-shadow: 0 0 0 3px rgba(0, 220, 130, 0.3) !important; box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.3) !important;
} }
/* Secondary/link buttons */ /* Secondary/link buttons */
@@ -191,7 +268,7 @@ input[type="email"]:hover {
padding: 0.5rem 1rem !important; padding: 0.5rem 1rem !important;
font-size: 0.875rem !important; font-size: 0.875rem !important;
font-weight: 500 !important; font-weight: 500 !important;
color: var(--lch-green-600) !important; color: var(--lch-teal-600) !important;
background-color: transparent !important; background-color: transparent !important;
border: none !important; border: none !important;
cursor: pointer !important; cursor: pointer !important;
@@ -199,19 +276,19 @@ input[type="email"]:hover {
} }
.pf-c-button.pf-m-link:hover { .pf-c-button.pf-m-link:hover {
color: var(--lch-green-700) !important; color: var(--lch-teal-700) !important;
text-decoration: underline !important; text-decoration: underline !important;
} }
/* Links */ /* Links */
a { a {
color: var(--lch-green-600) !important; color: var(--lch-teal-600) !important;
text-decoration: none !important; text-decoration: none !important;
transition: color 0.15s ease-in-out !important; transition: color 0.15s ease-in-out !important;
} }
a:hover { a:hover {
color: var(--lch-green-700) !important; color: var(--lch-teal-700) !important;
text-decoration: underline !important; text-decoration: underline !important;
} }
@@ -241,9 +318,9 @@ a:hover {
.alert-success, .alert-success,
.pf-m-success { .pf-m-success {
background-color: var(--lch-green-50) !important; background-color: var(--lch-teal-50) !important;
border: 1px solid var(--lch-green-200) !important; border: 1px solid var(--lch-teal-200) !important;
color: var(--lch-green-700) !important; color: var(--lch-teal-700) !important;
} }
.alert-info, .alert-info,
@@ -257,7 +334,7 @@ a:hover {
input[type="checkbox"] { input[type="checkbox"] {
width: 1rem !important; width: 1rem !important;
height: 1rem !important; height: 1rem !important;
accent-color: var(--lch-green-500) !important; accent-color: var(--lch-teal-500) !important;
border-radius: 0.25rem !important; border-radius: 0.25rem !important;
margin-right: 0.5rem !important; margin-right: 0.5rem !important;
} }
@@ -372,7 +449,7 @@ input[type="checkbox"] {
} }
.change-username-link:hover { .change-username-link:hover {
color: var(--lch-green-600) !important; color: var(--lch-teal-600) !important;
text-decoration: none !important; text-decoration: none !important;
} }
@@ -419,7 +496,17 @@ input[readonly]:hover {
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
html.login-pf, html.login-pf,
html.login-pf body { html.login-pf body {
background: linear-gradient(135deg, var(--lch-zinc-900) 0%, var(--lch-zinc-950) 100%) !important; background: linear-gradient(180deg, #0a0a0a 0%, var(--lch-teal-950) 50%, var(--lch-cyan-950) 100%) !important;
}
/* Dark mode orbs - reduced opacity */
html.login-pf::before,
html.login-pf::after {
opacity: 0.2 !important;
}
html.login-pf body::before {
opacity: 0.15 !important;
} }
.card-pf { .card-pf {
@@ -458,16 +545,16 @@ input[readonly]:hover {
input[type="text"]:focus, input[type="text"]:focus,
input[type="password"]:focus, input[type="password"]:focus,
input[type="email"]:focus { input[type="email"]:focus {
border-color: var(--lch-green-400) !important; border-color: var(--lch-teal-400) !important;
box-shadow: 0 0 0 3px rgba(0, 220, 130, 0.25) !important; box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.25) !important;
} }
a { a {
color: var(--lch-green-400) !important; color: var(--lch-teal-400) !important;
} }
a:hover { a:hover {
color: var(--lch-green-300) !important; color: var(--lch-teal-300) !important;
} }
#kc-form-options label, #kc-form-options label,
@@ -496,9 +583,9 @@ input[readonly]:hover {
.alert-success, .alert-success,
.pf-m-success { .pf-m-success {
background-color: var(--lch-green-950) !important; background-color: var(--lch-teal-950) !important;
border-color: var(--lch-green-800) !important; border-color: var(--lch-teal-800) !important;
color: var(--lch-green-300) !important; color: var(--lch-teal-300) !important;
} }
.alert-info, .alert-info,
@@ -549,7 +636,7 @@ input[readonly]:hover {
} }
.change-username-link:hover { .change-username-link:hover {
color: var(--lch-green-400) !important; color: var(--lch-teal-400) !important;
} }
.input-error { .input-error {

17
legalconsenthub/app/app.config.ts
View File

@@ -1,8 +1,23 @@
export default defineAppConfig({ export default defineAppConfig({
ui: { ui: {
colors: { colors: {
primary: 'green', primary: 'teal',
neutral: 'zinc' neutral: 'zinc'
},
// Card customizations with vibrant hover effect
card: {
slots: {
root: 'hover:ring-2 hover:ring-teal-400/50 dark:hover:ring-teal-500/40 hover:shadow-lg hover:shadow-teal-500/10 transition-all duration-200'
}
},
// Dashboard navbar with glass morphism
dashboardNavbar: {
slots: {
root: 'bg-white/90 dark:bg-gray-950/90 backdrop-blur-xl border-b border-gray-200/50 dark:border-gray-800/50 transition-all duration-300',
title: 'font-semibold text-gray-900 dark:text-white'
}
} }
} }
}) })

103
legalconsenthub/app/assets/css/main.css
View File

@@ -2,15 +2,96 @@
@import '@nuxt/ui'; @import '@nuxt/ui';
@theme static { @theme static {
--color-green-50: #effdf5; /* Primary color - Teal (matching landing page) */
--color-green-100: #d9fbe8; --color-teal-50: #f0fdfa;
--color-green-200: #b3f5d1; --color-teal-100: #ccfbf1;
--color-green-300: #75edae; --color-teal-200: #99f6e4;
--color-green-400: #00dc82; --color-teal-300: #5eead4;
--color-green-500: #00c16a; --color-teal-400: #2dd4bf;
--color-green-600: #00a155; --color-teal-500: #14b8a6;
--color-green-700: #007f45; --color-teal-600: #0d9488;
--color-green-800: #016538; --color-teal-700: #0f766e;
--color-green-900: #0a5331; --color-teal-800: #115e59;
--color-green-950: #052e16; --color-teal-900: #134e4a;
--color-teal-950: #042f2e;
/* Cyan for accent highlights */
--color-cyan-50: #ecfeff;
--color-cyan-100: #cffafe;
--color-cyan-200: #a5f3fc;
--color-cyan-300: #67e8f9;
--color-cyan-400: #22d3ee;
--color-cyan-500: #06b6d4;
--color-cyan-600: #0891b2;
--color-cyan-700: #0e7490;
--color-cyan-800: #155e75;
--color-cyan-900: #164e63;
--color-cyan-950: #083344;
/* Violet color palette (for Tailwind classes and hover effects) */
--color-violet-50: #f5f3ff;
--color-violet-100: #ede9fe;
--color-violet-200: #ddd6fe;
--color-violet-300: #c4b5fd;
--color-violet-400: #a78bfa;
--color-violet-500: #8b5cf6;
--color-violet-600: #7c3aed;
--color-violet-700: #6d28d9;
--color-violet-800: #5b21b6;
--color-violet-900: #4c1d95;
--color-violet-950: #2e1065;
}
/* ============================================
FOCUS & ACCESSIBILITY
============================================ */
/* Global focus styles for elements without built-in focus styling.
Nuxt UI components (inputs, buttons, selects, etc.) have their own
focus ring styling, so we exclude them to avoid double borders. */
:focus-visible:not(input):not(textarea):not(select):not(button):not([role="combobox"]):not([role="listbox"]):not([role="option"]):not([role="checkbox"]):not([role="radio"]):not([role="switch"]):not([role="slider"]):not([role="tab"]):not([role="menuitem"]) {
outline: 2px solid var(--color-teal-500);
outline-offset: 2px;
}
/* ============================================
HEADER STYLING
============================================ */
/* Header logo accent with gradient */
.header-logo-accent {
background: linear-gradient(135deg, var(--color-teal-500), var(--color-cyan-400));
box-shadow: 0 4px 6px -1px rgba(20, 184, 166, 0.2);
}
/* ============================================
NAVIGATION BUTTON GROUP
============================================ */
.nav-button-group {
display: flex;
gap: 0.75rem;
align-items: center;
}
@media (max-width: 640px) {
.nav-button-group {
flex-direction: column;
width: 100%;
}
.nav-button-group > * {
width: 100%;
justify-content: center;
}
}
/* Navigation separator line */
.nav-separator {
height: 1px;
background: linear-gradient(90deg, transparent, var(--color-gray-200), transparent);
margin-bottom: 1.5rem;
}
.dark .nav-separator {
background: linear-gradient(90deg, transparent, var(--color-gray-700), transparent);
} }

23
legalconsenthub/app/components/FormStepperWithNavigation.vue
View File

@@ -99,17 +99,31 @@
</div> </div>
</UCard> </UCard>
<div class="flex gap-2 justify-between"> <!-- Navigation Section -->
<UButton leading-icon="i-lucide-arrow-left" :disabled="!stepper?.hasPrev" @click="handleNavigate('backward')"> <div class="mt-8">
<div class="nav-separator" />
<div class="flex flex-col sm:flex-row gap-3 justify-between items-stretch sm:items-center">
<!-- Previous Button -->
<UButton
leading-icon="i-lucide-arrow-left"
:disabled="!stepper?.hasPrev"
variant="soft"
color="neutral"
size="lg"
class="order-2 sm:order-1 rounded-xl"
@click="handleNavigate('backward')"
>
{{ $t('applicationForms.navigation.previous') }} {{ $t('applicationForms.navigation.previous') }}
</UButton> </UButton>
<div class="flex flex-wrap items-center gap-1.5"> <!-- Primary Actions -->
<div class="nav-button-group order-1 sm:order-2">
<UButton <UButton
trailing-icon="i-lucide-save" trailing-icon="i-lucide-save"
:disabled="disabled" :disabled="disabled"
variant="outline" variant="outline"
size="lg" size="lg"
class="rounded-xl font-semibold"
@click="emit('save')" @click="emit('save')"
> >
{{ $t('applicationForms.navigation.save') }} {{ $t('applicationForms.navigation.save') }}
@@ -118,6 +132,7 @@
v-if="stepper?.hasNext" v-if="stepper?.hasNext"
trailing-icon="i-lucide-arrow-right" trailing-icon="i-lucide-arrow-right"
size="lg" size="lg"
class="bg-gradient-to-br from-teal-500 to-cyan-500 text-white font-semibold rounded-xl shadow-lg shadow-teal-500/25 hover:from-cyan-500 hover:to-violet-500 hover:shadow-xl hover:shadow-violet-500/30 transition-all duration-200"
@click="handleNavigate('forward')" @click="handleNavigate('forward')"
> >
{{ $t('applicationForms.navigation.next') }} {{ $t('applicationForms.navigation.next') }}
@@ -127,6 +142,7 @@
trailing-icon="i-lucide-send-horizontal" trailing-icon="i-lucide-send-horizontal"
:disabled="disabled" :disabled="disabled"
size="lg" size="lg"
class="bg-gradient-to-br from-teal-500 to-cyan-500 text-white font-semibold rounded-xl shadow-lg shadow-teal-500/25 hover:from-cyan-500 hover:to-violet-500 hover:shadow-xl hover:shadow-violet-500/30 transition-all duration-200"
@click="emit('submit')" @click="emit('submit')"
> >
{{ $t('applicationForms.navigation.submit') }} {{ $t('applicationForms.navigation.submit') }}
@@ -136,6 +152,7 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">

4
legalconsenthub/app/composables/useSectionSpawning.ts
View File

@@ -71,9 +71,7 @@ export function useSectionSpawning() {
const newSection = spawnSectionFromTemplate(templateSection, element.reference!, triggerValue) const newSection = spawnSectionFromTemplate(templateSection, element.reference!, triggerValue)
// Find template index // Find template index
const templateIndex = sections.findIndex( const templateIndex = sections.findIndex((s) => s.isTemplate && s.templateReference === trigger.templateReference)
(s) => s.isTemplate && s.templateReference === trigger.templateReference
)
if (templateIndex === -1) { if (templateIndex === -1) {
// Fallback: append if template not found (shouldn't happen) // Fallback: append if template not found (shouldn't happen)

58
legalconsenthub/app/layouts/auth.vue
View File

@@ -1,5 +1,61 @@
<template> <template>
<div class="h-screen flex items-center justify-center overlay"> <div class="auth-layout h-screen flex items-center justify-center p-4">
<!-- Subtle gradient orbs for visual interest -->
<div class="absolute inset-0 overflow-hidden pointer-events-none">
<div class="auth-orb auth-orb-1" />
<div class="auth-orb auth-orb-2" />
<div class="auth-orb auth-orb-3" />
</div>
<div class="relative z-10 w-full max-w-md">
<slot /> <slot />
</div> </div>
</div>
</template> </template>
<style scoped>
.auth-layout {
position: relative;
background: linear-gradient(180deg, #ffffff 0%, #f0fdfa 50%, #ecfeff 100%);
}
.dark .auth-layout {
background: linear-gradient(180deg, #0a0a0a 0%, #042f2e 50%, #083344 100%);
}
/* Subtle floating orbs */
.auth-orb {
position: absolute;
border-radius: 50%;
filter: blur(80px);
opacity: 0.4;
}
.auth-orb-1 {
width: 400px;
height: 400px;
top: -100px;
right: -100px;
background: linear-gradient(135deg, #14b8a6, #22d3ee);
}
.auth-orb-2 {
width: 300px;
height: 300px;
bottom: -50px;
left: -50px;
background: linear-gradient(135deg, #22d3ee, #14b8a6);
}
.auth-orb-3 {
width: 200px;
height: 200px;
bottom: -50px;
right: 20%;
background: linear-gradient(135deg, #a78bfa, #7c3aed);
opacity: 0.3;
}
.dark .auth-orb {
opacity: 0.2;
}
</style>

2
legalconsenthub/app/layouts/default.vue
View File

@@ -6,7 +6,7 @@
v-model:open="open" v-model:open="open"
collapsible collapsible
resizable resizable
class="bg-(--ui-bg-elevated)/25" class="bg-(--ui-bg-elevated)/75 border-r border-(--ui-border)"
:ui="{ footer: 'lg:border-t lg:border-(--ui-border)' }" :ui="{ footer: 'lg:border-t lg:border-(--ui-border)' }"
> >
<template #header> <template #header>

6
legalconsenthub/app/pages/application-forms/[id]/[sectionIndex].vue
View File

@@ -13,11 +13,7 @@
to="/create" to="/create"
:disabled="!canWriteApplicationForms" :disabled="!canWriteApplicationForms"
size="xl" size="xl"
variant="outline" class="bg-gradient-to-br from-teal-500 to-cyan-500 text-white font-semibold rounded-xl shadow-lg shadow-teal-500/25 hover:from-cyan-500 hover:to-violet-500 hover:shadow-xl hover:shadow-violet-500/30 transition-all duration-200"
color="neutral"
:ui="{
leadingIcon: 'text-primary'
}"
/> />
</template> </template>
</UDashboardNavbar> </UDashboardNavbar>

17
legalconsenthub/app/pages/index.vue
View File

@@ -4,6 +4,9 @@
<UDashboardNavbar :title="$t('common.home')" :ui="{ right: 'gap-3' }"> <UDashboardNavbar :title="$t('common.home')" :ui="{ right: 'gap-3' }">
<template #leading> <template #leading>
<UDashboardSidebarCollapse /> <UDashboardSidebarCollapse />
<div class="header-logo-accent w-8 h-8 rounded-lg flex items-center justify-center ml-2">
<UIcon name="i-lucide-file-text" class="size-5 text-white" />
</div>
</template> </template>
<template #right> <template #right>
@@ -21,7 +24,13 @@
/> />
<UTooltip :text="$t('notifications.tooltip')" :shortcuts="['N']"> <UTooltip :text="$t('notifications.tooltip')" :shortcuts="['N']">
<UButton color="neutral" variant="ghost" square @click="isNotificationsSlideoverOpen = true"> <UButton
color="neutral"
variant="ghost"
square
class="hover:bg-teal-50 dark:hover:bg-teal-950/50 transition-colors"
@click="isNotificationsSlideoverOpen = true"
>
<UChip :show="hasUnread" color="error" inset> <UChip :show="hasUnread" color="error" inset>
<UIcon name="i-lucide-bell" class="size-5 shrink-0" /> <UIcon name="i-lucide-bell" class="size-5 shrink-0" />
</UChip> </UChip>
@@ -34,11 +43,7 @@
to="/create" to="/create"
:disabled="!canWriteApplicationForms" :disabled="!canWriteApplicationForms"
size="xl" size="xl"
variant="outline" class="bg-gradient-to-br from-teal-500 to-cyan-500 text-white font-semibold rounded-xl shadow-lg shadow-teal-500/25 hover:from-cyan-500 hover:to-violet-500 hover:shadow-xl hover:shadow-violet-500/30 transition-all duration-200"
color="neutral"
:ui="{
leadingIcon: 'text-primary'
}"
/> />
</template> </template>
</UDashboardNavbar> </UDashboardNavbar>

4
legalconsenthub/app/pages/login.vue
View File

@@ -3,10 +3,10 @@
<template #header> <template #header>
<div class="text-center"> <div class="text-center">
<UIcon name="i-lucide-lock" class="mx-auto h-16 w-16 text-primary-500 mb-6" /> <UIcon name="i-lucide-lock" class="mx-auto h-16 w-16 text-primary-500 mb-6" />
<h1 class="text-3xl font-bold text-gray-900 mb-2"> <h1 class="text-3xl font-bold text-gray-900 dark:text-gray-100 mb-2">
{{ $t('auth.welcome') }} {{ $t('auth.welcome') }}
</h1> </h1>
<p class="text-gray-600"> <p class="text-gray-600 dark:text-gray-400">
{{ $t('auth.redirectMessage') }} {{ $t('auth.redirectMessage') }}
</p> </p>
</div> </div>