ben.carrasco/prowler
1
0
Fork 0
mirror of https://github.com/prowler-cloud/prowler.git synced 2026-07-24 21:11:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): restore animated gradient background on Lighthouse banner

Browse Source
This commit is contained in:
alejandrobailo
2026-07-02 15:38:00 +02:00
parent 884f2f5891
commit b64fbe3cbd
3 changed files with 137 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ui/app/(prowler)/_overview/_components/lighthouse-overview-banner.tsx
+85 -2
View File
@@ -1,8 +1,13 @@
"use client";
import { ArrowRight } from "lucide-react";
import Link from "next/link";
import { useRef, useState } from "react";
import { LighthouseIcon } from "@/components/icons/Icons";
import { Card, CardContent } from "@/components/shadcn";
import { useMountEffect } from "@/hooks/use-mount-effect";
import { cn } from "@/lib/utils";
import type { LighthouseOverviewBannerHref } from "../_lib/lighthouse-banner";
@@ -13,6 +18,46 @@ interface LighthouseOverviewBannerProps {
export function LighthouseOverviewBanner({
href,
}: LighthouseOverviewBannerProps) {
const interactiveRef = useRef<HTMLDivElement>(null);
const curXRef = useRef(0);
const curYRef = useRef(0);
const tgXRef = useRef(0);
const tgYRef = useRef(0);
const [isSafari, setIsSafari] = useState(false);
useMountEffect(() => {
setIsSafari(/^((?!chrome|android).)*safari/i.test(navigator.userAgent));
});
useMountEffect(() => {
let animationFrameId: number;
const move = () => {
if (!interactiveRef.current) return;
curXRef.current += (tgXRef.current - curXRef.current) / 20;
curYRef.current += (tgYRef.current - curYRef.current) / 20;
interactiveRef.current.style.transform = `translate(${Math.round(curXRef.current)}px, ${Math.round(curYRef.current)}px)`;
animationFrameId = requestAnimationFrame(move);
};
animationFrameId = requestAnimationFrame(move);
return () => {
cancelAnimationFrame(animationFrameId);
};
});
const handleMouseMove = (event: React.MouseEvent<HTMLDivElement>) => {
if (interactiveRef.current) {
const rect = interactiveRef.current.getBoundingClientRect();
tgXRef.current = event.clientX - rect.left;
tgYRef.current = event.clientY - rect.top;
}
};
return (
<Link
href={href}
@@ -21,9 +66,47 @@ export function LighthouseOverviewBanner({
<Card
variant="base"
padding="none"
className="group-hover:border-border-input-primary transition-colors"
className="group-hover:border-border-input-primary relative overflow-hidden transition-colors"
onMouseMove={handleMouseMove}
>
<CardContent className="flex min-w-0 items-center justify-between gap-4 px-4 py-3 sm:px-5">
<svg className="hidden">
<defs>
<filter id="blurMe">
<feGaussianBlur
in="SourceGraphic"
stdDeviation="10"
result="blur"
/>
<feColorMatrix
in="blur"
mode="matrix"
values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -8"
result="goo"
/>
<feBlend in="SourceGraphic" in2="goo" />
</filter>
</defs>
</svg>
<div
className={cn(
"pointer-events-none absolute inset-0 blur-lg",
isSafari ? "blur-2xl" : "[filter:url(#blurMe)_blur(40px)]",
)}
>
<div className="animate-first lighthouse-banner-gradient-neutral absolute [top:calc(50%-60%)] [left:calc(50%-60%)] h-[120%] w-[120%] [transform-origin:center_center] opacity-100 [mix-blend-mode:hard-light]" />
<div className="animate-second lighthouse-banner-gradient-primary absolute [top:calc(50%-60%)] [left:calc(50%-60%)] h-[120%] w-[120%] [transform-origin:calc(50%-200px)] opacity-80 [mix-blend-mode:hard-light]" />
<div className="animate-third lighthouse-banner-gradient-primary-hover absolute [top:calc(50%-60%)] [left:calc(50%-60%)] h-[120%] w-[120%] [transform-origin:calc(50%+200px)] opacity-70 [mix-blend-mode:hard-light]" />
<div
ref={interactiveRef}
className="lighthouse-banner-gradient-primary-press absolute -top-1/2 -left-1/2 h-full w-full opacity-60 [mix-blend-mode:hard-light]"
/>
</div>
<CardContent className="relative z-10 flex min-w-0 items-center justify-between gap-4 px-4 py-3 sm:px-5">
<div className="flex min-w-0 items-center gap-3">
<span className="border-border-neutral-tertiary bg-bg-neutral-tertiary flex size-9 shrink-0 items-center justify-center rounded-md border">
<LighthouseIcon className="size-5" />
ui/styles/globals.css
+37
View File
@@ -328,6 +328,43 @@
max-width: 100% !important;
height: auto;
}
/* Lighthouse overview banner animated gradient layers */
.lighthouse-banner-gradient-neutral {
background: radial-gradient(
circle at center,
var(--bg-neutral-tertiary) 0,
transparent 50%
)
no-repeat;
}
.lighthouse-banner-gradient-primary {
background: radial-gradient(
circle at center,
var(--bg-button-primary) 0,
transparent 50%
)
no-repeat;
}
.lighthouse-banner-gradient-primary-hover {
background: radial-gradient(
circle at center,
var(--bg-button-primary-hover) 0,
transparent 50%
)
no-repeat;
}
.lighthouse-banner-gradient-primary-press {
background: radial-gradient(
circle at center,
var(--bg-button-primary-press) 0,
transparent 50%
)
no-repeat;
}
}
/* ===== UTILITY LAYER ===== */
ui/tailwind.config.js
+15
View File
@@ -140,11 +140,26 @@ module.exports = {
"50%": { opacity: "1" },
"100%": { transform: "translateY(0)", opacity: "1" },
},
first: {
"0%": { transform: "rotate(0deg)" },
"100%": { transform: "rotate(360deg)" },
},
second: {
"0%": { transform: "rotate(0deg)" },
"100%": { transform: "rotate(360deg)" },
},
third: {
"0%": { transform: "rotate(0deg)" },
"100%": { transform: "rotate(360deg)" },
},
},
animation: {
"collapsible-down": "collapsible-down 0.2s ease-out",
"collapsible-up": "collapsible-up 0.2s ease-out",
"drop-arrow": "dropArrow 0.6s ease-out infinite",
first: "first 20s linear infinite",
second: "second 30s linear infinite",
third: "third 25s linear infinite",
},
screens: {
"3xl": "1920px", // Add breakpoint to optimize layouts for large screens.