radoslaw.smolinski/poi-preview
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(ui): ensure scrollable cookie settings modal and clean body layout

Browse Source
This commit is contained in:
radoslaw.smolinski
2026-08-26 03:01:12 +02:00
parent b87b2bb47b
commit 3353cee64c
2 changed files with 27 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/CustomCookieBanner.tsx
+26 -16
View File
@@ -1,7 +1,7 @@
'use client'
import React, { useState, useEffect } from 'react'
import { Cookie, Check, ArrowRight } from 'lucide-react'
import { Cookie, Check, X } from 'lucide-react'
import { useConsentContext } from '@intecion/ipal-kit/client'
const CONSENT_CATEGORIES = ['necessary', 'analytics', 'marketing'] as const
@@ -32,14 +32,14 @@ export function CustomCookieBanner() {
<div
role="dialog"
aria-label="Cookie consent"
className="fixed bottom-0 inset-x-0 z-50 bg-[#1f1f1f] text-white p-6 border-t-4 border-[#FFED00] shadow-2xl"
className="fixed bottom-0 inset-x-0 z-50 bg-[#1f1f1f] text-white p-5 sm:p-6 border-t-4 border-[#FFED00] shadow-2xl max-h-[85vh] overflow-y-auto"
>
<div className="container mx-auto max-w-4xl">
{!showSettings ? (
<div className="flex flex-col lg:flex-row lg:items-center justify-between gap-6">
<div className="flex items-start gap-4">
<div className="flex flex-col lg:flex-row lg:items-center justify-between gap-5">
<div className="flex items-start gap-3.5">
<div className="p-2 bg-[#FFED00] text-[#1f1f1f] shrink-0 border border-[#1f1f1f]">
<Cookie className="h-6 w-6" />
<Cookie className="h-5 w-5" />
</div>
<div className="text-xs sm:text-sm text-[#e0e0e0] leading-relaxed">
<p>
@@ -56,7 +56,7 @@ export function CustomCookieBanner() {
</div>
</div>
<div className="flex flex-wrap items-center gap-3 shrink-0">
<div className="flex flex-wrap items-center gap-2.5 shrink-0">
<button
type="button"
onClick={() => setShowSettings(true)}
@@ -81,17 +81,27 @@ export function CustomCookieBanner() {
</div>
</div>
) : (
<div className="space-y-6">
<div className="flex items-center gap-3 border-b border-[#333333] pb-4">
<div className="p-1.5 bg-[#FFED00] text-[#1f1f1f]">
<Cookie className="h-5 w-5" />
<div className="space-y-5">
<div className="flex items-center justify-between border-b border-[#333333] pb-3">
<div className="flex items-center gap-3">
<div className="p-1.5 bg-[#FFED00] text-[#1f1f1f]">
<Cookie className="h-5 w-5" />
</div>
<h2 className="text-sm sm:text-base font-black uppercase tracking-wider text-white">
{texts.settingsTitle}
</h2>
</div>
<h2 className="text-base font-black uppercase tracking-wider text-white">
{texts.settingsTitle}
</h2>
<button
type="button"
onClick={() => setShowSettings(false)}
className="text-[#a0a0a0] hover:text-white p-1"
aria-label="Zamknij ustawienia"
>
<X className="h-5 w-5" />
</button>
</div>
<ul className="space-y-4">
<ul className="space-y-3">
{CONSENT_CATEGORIES.map((cat) => {
const isChecked = cat === 'necessary' ? true : !!choices[cat]
const isDisabled = cat === 'necessary'
@@ -103,7 +113,7 @@ export function CustomCookieBanner() {
<li
key={cat}
onClick={() => !isDisabled && toggle(cat)}
className={`flex items-start justify-between gap-4 p-4 border border-[#333333] bg-[#262626] ${
className={`flex items-start justify-between gap-4 p-3.5 border border-[#333333] bg-[#262626] ${
!isDisabled ? 'cursor-pointer hover:border-[#FFED00]' : 'opacity-90'
} transition-colors`}
>
@@ -111,7 +121,7 @@ export function CustomCookieBanner() {
<div className="text-xs font-black uppercase tracking-wider text-[#FFED00]">
{catData.title}
</div>
<p className="text-xs text-[#a0a0a0] mt-1 leading-relaxed">
<p className="text-xs text-[#a0a0a0] mt-0.5 leading-relaxed">
{catData.description}
</p>
</div>