etkr4k/bedolaga-cabinet
1
0
Fork 0
mirror of https://github.com/chillpadclub/bedolaga-cabinet.git synced 2026-07-28 09:33:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: improve HoverBorderGradient visibility with accent colors and darker bg

Browse Source 
- Use accent CSS vars for gradient (matches app theme dynamically)
- Increase gradient spot size for visible animation
- Darker inner bg (dark-900) for better contrast
- Increase blur to 3px for glow effect
This commit is contained in:
Fringg
2026-02-25 08:41:18 +03:00
parent 3fb9606fd0
commit 4332c2bd25
1 changed files with 11 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/components/ui/hover-border-gradient.tsx
View File

@@ -34,17 +34,19 @@ export function HoverBorderGradient({
return directions[nextIndex]; return directions[nextIndex];
}; };
// Bright accent-colored moving gradient spot
const movingMap: Record<Direction, string> = { const movingMap: Record<Direction, string> = {
TOP: 'radial-gradient(20.7% 50% at 50% 0%, hsl(0, 0%, 100%) 0%, rgba(255, 255, 255, 0) 100%)', TOP: 'radial-gradient(30% 60% at 50% 0%, rgb(var(--color-accent-400)) 0%, transparent 100%)',
LEFT: 'radial-gradient(16.6% 43.1% at 0% 50%, hsl(0, 0%, 100%) 0%, rgba(255, 255, 255, 0) 100%)', LEFT: 'radial-gradient(25% 55% at 0% 50%, rgb(var(--color-accent-400)) 0%, transparent 100%)',
BOTTOM: BOTTOM:
'radial-gradient(20.7% 50% at 50% 100%, hsl(0, 0%, 100%) 0%, rgba(255, 255, 255, 0) 100%)', 'radial-gradient(30% 60% at 50% 100%, rgb(var(--color-accent-400)) 0%, transparent 100%)',
RIGHT: RIGHT:
'radial-gradient(16.2% 41.2% at 100% 50%, hsl(0, 0%, 100%) 0%, rgba(255, 255, 255, 0) 100%)', 'radial-gradient(25% 55% at 100% 50%, rgb(var(--color-accent-400)) 0%, transparent 100%)',
}; };
// On hover — full bright glow
const highlight = const highlight =
'radial-gradient(75% 181.16% at 50% 50%, #3275F8 0%, rgba(255, 255, 255, 0) 100%)'; 'radial-gradient(80% 200% at 50% 50%, rgb(var(--color-accent-500)) 0%, rgb(var(--color-accent-300) / 0.3) 50%, transparent 100%)';
useEffect(() => { useEffect(() => {
if (!hovered) { if (!hovered) {
@@ -60,14 +62,14 @@ export function HoverBorderGradient({
onMouseEnter={() => setHovered(true)} onMouseEnter={() => setHovered(true)}
onMouseLeave={() => setHovered(false)} onMouseLeave={() => setHovered(false)}
className={cn( className={cn(
'relative flex content-center items-center justify-center overflow-visible rounded-xl border-none bg-black/20 p-px transition duration-500 hover:bg-black/10', 'relative flex content-center items-center justify-center overflow-visible rounded-xl border-none p-[1.5px] transition duration-500',
containerClassName, containerClassName,
)} )}
{...props} {...props}
> >
<div <div
className={cn( className={cn(
'z-10 w-auto rounded-[inherit] bg-dark-800 px-4 py-2.5 text-sm font-medium text-white', 'z-10 w-auto rounded-[inherit] bg-dark-900 px-4 py-2.5 text-sm font-medium text-white',
className, className,
)} )}
> >
@@ -76,7 +78,7 @@ export function HoverBorderGradient({
<motion.div <motion.div
className="absolute inset-0 z-0 flex-none overflow-hidden rounded-[inherit]" className="absolute inset-0 z-0 flex-none overflow-hidden rounded-[inherit]"
style={{ style={{
filter: 'blur(2px)', filter: 'blur(3px)',
position: 'absolute', position: 'absolute',
width: '100%', width: '100%',
height: '100%', height: '100%',
@@ -87,7 +89,7 @@ export function HoverBorderGradient({
}} }}
transition={{ ease: 'linear', duration: duration ?? 1 }} transition={{ ease: 'linear', duration: duration ?? 1 }}
/> />
<div className="absolute inset-[2px] z-[1] flex-none rounded-[10px] bg-dark-800" /> <div className="absolute inset-[2px] z-[1] flex-none rounded-[10px] bg-dark-900" />
</Tag> </Tag>
); );
} }