Update all views to use new design system components and styling

Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>
This commit is contained in:
kbe
2025-09-08 17:59:12 +02:00
parent e4d778355e
commit 4b671a211b
39 changed files with 1068 additions and 5127 deletions

View File

@@ -12,9 +12,33 @@
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Outfit:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=DM+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<!-- TailwindCSS -->
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
'brand-primary': '#667eea',
'brand-secondary': '#764ba2',
'brand-accent': '#facc15'
},
fontFamily: {
'sans': ['Inter', 'system-ui', 'sans-serif'],
'display': ['DM Sans', 'system-ui', 'sans-serif']
},
backgroundImage: {
'gradient-primary': 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'
}
}
}
}
</script>
<!-- Lucide Icons loaded via npm package -->
<!-- Lucide Icons -->
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
<%# Enable PWA manifest for installable apps (make sure to enable in config/routes.rb too!) %>
<%#= tag.link rel: "manifest", href: pwa_manifest_path(format: :json) %>
@@ -28,21 +52,19 @@
<%= javascript_include_tag "application", "data-turbo-track": "reload", type: "module" %>
</head>
<body data-user-authenticated="<%= user_signed_in? %>" data-event-slug="<%= @event&.slug %>">
<body data-user-authenticated="<%= user_signed_in? %>" data-event-slug="<%= @event&.slug %>" class="font-sans bg-white text-gray-900">
<div class="app-wrapper">
<%= render "components/header" %>
<!-- Flash messages positioned between header and content -->
<%= render "shared/flash_messages" %>
<main class="">
<div class="yield">
<%= yield %>
</div>
<main class="flex-1">
<%= yield %>
</main>
<footer class="bg-neutral-800 text-neutral-300 py-8 pb-4">
<div class="container">
<footer class="bg-gray-900 text-white py-16">
<div class="container mx-auto px-4">
<%= render "components/footer" %>
</div>
</footer>