felix/packlist
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: enhance progress gradient

Browse source
This commit is contained in:
Felix Zett 2025-09-20 21:00:23 +02:00
parent 00d4a9b7e8
commit ef7eeb27a1
1 changed files with 7 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
frontend/src/pages/TripChecklist.tsx
View file

@ -241,15 +241,20 @@ export default function TripChecklist({ trips }: { trips: any[] }) {
const progress = totalItems > 0 ? Math.round((checkedItems / totalItems) * 100) : 0;
// Progress gradient for header background (always full width)
const progressGradient = `linear-gradient(140deg, #f59e42 0%, #facc15 50%, #22c55e 100%)`;
const progressGradient = `
linear-gradient(90deg,#facc15 0%, #22c55e 100%),
linear-gradient(to top, rgba(255,255,255,0) 6%, rgba(255, 255, 255, 1) 8%)
`;
return (
<div className="py-4 max-w-5xl mx-auto">
<div
className="mb-6 px-4 py-3 rounded-xl shadow flex flex-wrap items-center gap-4 relative"
className="mb-6 px-4 py-3 pb-6 rounded-xl border hadow shadow-md flex flex-wrap items-center gap-4 relative"
style={{
background: progressGradient,
backgroundBlendMode: "lighten",
transition: "background 0.3s",
overflow: "visible",
}}
>
{/* Overlay: shrinking box from the right */}