Kevin-Mok/kanban
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Add transparent BG behind event popup

Browse Source 
"X" button spacing/transparency.
This commit is contained in:
Kevin Mok
2025-03-28 14:55:31 -04:00
parent da54bd0272
commit a2ecec8d1e
2 changed files with 7 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/Calendar.tsx
View File

@@ -231,12 +231,12 @@ const Calendar = () => {
<div <div
ref={containerRef} ref={containerRef}
className="flex-1 overflow-hidden bg-gradient-to-br from-[#f5f3ff] to-[#ede9fe]" className={`flex-1 ${isMobile ? 'overflow-hidden' : 'overflow-y-auto'} bg-gradient-to-br from-[#f5f3ff] to-[#ede9fe]`}
onTouchStart={handleTouchStart} onTouchStart={handleTouchStart}
onTouchMove={handleTouchMove} onTouchMove={handleTouchMove}
onTouchEnd={handleTouchEnd} onTouchEnd={handleTouchEnd}
> >
<div className={`flex ${!isMobile && 'gap-4'} h-full p-4`}> <div className={`flex ${!isMobile && 'gap-4'} ${isMobile ? 'h-full' : 'min-h-full'} p-4`}>
{isMobile ? ( {isMobile ? (
<motion.div <motion.div
className="flex h-full" className="flex h-full"

10
src/components/EventModal.tsx
View File

@@ -22,14 +22,14 @@ const EventModal = ({ event, date, onClose }: EventModalProps) => {
return ( return (
<AnimatePresence> <AnimatePresence>
<motion.div <motion.div
className="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center" className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center"
onClick={onClose} onClick={onClose}
initial={{ opacity: 0 }} initial={{ opacity: 0 }}
animate={{ opacity: 1 }} animate={{ opacity: 1 }}
exit={{ opacity: 0 }} exit={{ opacity: 0 }}
> >
<motion.div <motion.div
className="bg-white rounded-lg p-6 max-w-md w-full relative" className="bg-white/95 backdrop-blur-sm rounded-lg p-8 max-w-lg w-full relative"
onClick={(e) => e.stopPropagation()} onClick={(e) => e.stopPropagation()}
initial={{ scale: 0.95 }} initial={{ scale: 0.95 }}
animate={{ scale: 1 }} animate={{ scale: 1 }}
@@ -37,11 +37,11 @@ const EventModal = ({ event, date, onClose }: EventModalProps) => {
> >
<button <button
onClick={onClose} onClick={onClose}
className="absolute top-4 right-4 text-gray-500 hover:text-gray-700 transition-colors" className="absolute top-2 right-2 bg-transparent rounded-full p-1.5 text-gray-500 hover:text-gray-700 transition-colors"
> >
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
className="h-6 w-6" className="h-5 w-5"
fill="none" fill="none"
viewBox="0 0 24 24" viewBox="0 0 24 24"
stroke="currentColor" stroke="currentColor"
@@ -59,7 +59,7 @@ const EventModal = ({ event, date, onClose }: EventModalProps) => {
<img <img
src={event.imageUrl} src={event.imageUrl}
alt={event.title} alt={event.title}
className="w-full h-48 object-cover rounded-lg mb-4" className="w-full h-56 object-cover rounded-lg mb-4 mt-2"
/> />
)} )}
<motion.h2 className="text-lg mb-4 font-sans">{event.title}</motion.h2> <motion.h2 className="text-lg mb-4 font-sans">{event.title}</motion.h2>