Graham McIntire
5a7cdc7138
- Replace gray->cool-steel, blue/indigo->cerulean, red->sweet-salmon, yellow/amber->wheat - Dark sidebar: sidebar/footer use cool-steel-800 bg, text lightened for contrast - ~11,600 color replacements across ~99 files - Update tests for new color class names
72 lines
2.7 KiB
Elixir
72 lines
2.7 KiB
Elixir
defmodule ToweropsWeb.Components.CookieConsent do
|
|
@moduledoc """
|
|
Cookie consent banner component for GDPR compliance.
|
|
|
|
Only displays to users from EU/EEA countries and for users who haven't
|
|
yet accepted the cookie policy.
|
|
|
|
Since we only use essential cookies (session, CSRF), the banner is
|
|
informational and provides an "Acknowledge" button.
|
|
"""
|
|
use Phoenix.Component
|
|
|
|
import ToweropsWeb.CoreComponents, only: [icon: 1]
|
|
|
|
@doc """
|
|
Renders a cookie consent banner at the bottom of the page.
|
|
|
|
## Attributes
|
|
* `requires_consent` - boolean, whether to show the banner (EU/EEA users)
|
|
|
|
Note: The banner is always rendered if requires_consent is true.
|
|
JavaScript will hide it immediately if the consent cookie exists.
|
|
"""
|
|
attr :requires_consent, :boolean, required: true
|
|
|
|
def banner(assigns) do
|
|
~H"""
|
|
<%= if @requires_consent do %>
|
|
<div
|
|
id="cookie-consent-banner"
|
|
class="fixed bottom-0 left-0 right-0 z-50 bg-white dark:bg-cool-steel-900 border-t border-cool-steel-200 dark:border-cool-steel-700 shadow-lg"
|
|
role="dialog"
|
|
aria-live="polite"
|
|
aria-label="Cookie consent"
|
|
>
|
|
<div class="max-w-7xl mx-auto px-4 py-4 sm:px-6 lg:px-8">
|
|
<div class="flex flex-col sm:flex-row items-start sm:items-center gap-4">
|
|
<div class="flex-1 flex items-start gap-3">
|
|
<.icon
|
|
name="hero-information-circle"
|
|
class="h-6 w-6 text-cerulean-600 dark:text-cerulean-400 flex-shrink-0"
|
|
/>
|
|
<div class="text-sm text-cool-steel-700 dark:text-cool-steel-300">
|
|
<p class="font-medium mb-1">We respect your privacy</p>
|
|
<p>
|
|
We use essential cookies to maintain your session and ensure the security of our service. We do not use tracking or advertising cookies.
|
|
<a
|
|
href="/privacy"
|
|
class="underline hover:text-cool-steel-900 dark:hover:text-cool-steel-100 font-medium"
|
|
>
|
|
Learn more
|
|
</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex gap-2 w-full sm:w-auto">
|
|
<button
|
|
type="button"
|
|
data-cookie-consent="accept"
|
|
class="flex-1 sm:flex-none px-4 py-2 bg-cerulean-600 text-white text-sm font-medium rounded-lg hover:bg-cerulean-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-cerulean-500 dark:focus:ring-offset-cool-steel-900"
|
|
>
|
|
Accept
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
"""
|
|
end
|
|
end
|