Goutam/LynkedUpPro_CRM
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix PropertyDetailDrawer close button interactivity and corner transparency leak

Browse Source
This commit is contained in:
Satyam
2026-02-13 05:58:46 +05:30
parent cc58b148e4
commit fae968a541
2 changed files with 10 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/SpotlightCard.jsx
+8 -3
View File
@@ -1,6 +1,6 @@
import React, { useRef, useState } from 'react'; import React, { useRef, useState } from 'react';
export const SpotlightCard = ({ children, className = "", spotlightColor = "rgba(255, 255, 255, 0.25)" }) => { export const SpotlightCard = ({ children, className = "", spotlightColor = "rgba(255, 255, 255, 0.25)", rounded = "rounded-3xl" }) => {
const divRef = useRef(null); const divRef = useRef(null);
const [position, setPosition] = useState({ x: 0, y: 0 }); const [position, setPosition] = useState({ x: 0, y: 0 });
const [opacity, setOpacity] = useState(0); const [opacity, setOpacity] = useState(0);
@@ -30,6 +30,11 @@ export const SpotlightCard = ({ children, className = "", spotlightColor = "rgba
setOpacity(0); setOpacity(0);
}; };
// Calculate inner rounding based on outer rounding
// If rounded-3xl (24px), inner should be ~22px
// If rounded-none (0px), inner should be 0px
const innerRounded = rounded === "rounded-none" ? "rounded-none" : "rounded-[22px]";
return ( return (
<div <div
ref={divRef} ref={divRef}
@@ -39,7 +44,7 @@ export const SpotlightCard = ({ children, className = "", spotlightColor = "rgba
onMouseEnter={handleMouseEnter} onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave} onMouseLeave={handleMouseLeave}
// Light: bg-white, Dark: bg-zinc-800 // Light: bg-white, Dark: bg-zinc-800
className={`group relative rounded-3xl bg-white dark:bg-zinc-800 overflow-hidden shadow-sm dark:shadow-none ${className}`} className={`group relative ${rounded} bg-white dark:bg-zinc-800 overflow-hidden shadow-sm dark:shadow-none ${className}`}
> >
{/* {/*
Rainbow Glow Layer Rainbow Glow Layer
@@ -61,7 +66,7 @@ export const SpotlightCard = ({ children, className = "", spotlightColor = "rgba
- Light Mode: bg-white/90 (Opaque white with slight blur) - Light Mode: bg-white/90 (Opaque white with slight blur)
- Dark Mode: bg-zinc-950/90 - Dark Mode: bg-zinc-950/90
*/} */}
<div className="absolute inset-[2px] rounded-[22px] bg-white/90 dark:bg-zinc-950/90 backdrop-blur-xl z-10 transition-colors duration-300" /> <div className={`absolute inset-[2px] ${innerRounded} bg-white/90 dark:bg-zinc-950/90 backdrop-blur-xl z-10 transition-colors duration-300`} />
{/* Surface Shine (Subtle top sheen) */} {/* Surface Shine (Subtle top sheen) */}
<div <div
src/components/maps/PropertyDetailDrawer.jsx
+2 -2
View File
@@ -285,7 +285,7 @@ const PropertyDetailDrawer = ({ isOpen, onClose, data, newLocation, onSave, load
aria-modal="true" aria-modal="true"
aria-label="Property Details" aria-label="Property Details"
> >
<SpotlightCard className="h-full flex flex-col overflow-hidden bg-white/95 dark:bg-zinc-900/95 backdrop-blur-3xl border-l border-white/20 shadow-2xl"> <SpotlightCard rounded="rounded-none" className="h-full flex flex-col overflow-hidden bg-white/95 dark:bg-zinc-900/95 backdrop-blur-3xl border-l border-white/20 shadow-2xl">
{/* Header */} {/* Header */}
<div className="relative h-32 bg-gradient-to-br from-zinc-100 to-zinc-200 dark:from-zinc-900 dark:to-black p-6 flex flex-col justify-end shrink-0 border-b border-zinc-200 dark:border-white/5"> <div className="relative h-32 bg-gradient-to-br from-zinc-100 to-zinc-200 dark:from-zinc-900 dark:to-black p-6 flex flex-col justify-end shrink-0 border-b border-zinc-200 dark:border-white/5">
@@ -294,7 +294,7 @@ const PropertyDetailDrawer = ({ isOpen, onClose, data, newLocation, onSave, load
<button <button
ref={closeButtonRef} ref={closeButtonRef}
onClick={onClose} onClick={onClose}
className="absolute top-4 right-4 p-2 bg-white/50 dark:bg-white/10 hover:bg-white dark:hover:bg-white/20 rounded-full transition-colors backdrop-blur-md text-zinc-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-zinc-500" className="absolute top-4 right-4 p-2 bg-white/50 dark:bg-white/10 hover:bg-white dark:hover:bg-white/20 rounded-full transition-all backdrop-blur-md text-zinc-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-zinc-500 z-50 cursor-pointer shadow-sm border border-black/5 dark:border-white/5"
aria-label="Close property details" aria-label="Close property details"
> >
<X size={18} /> <X size={18} />