harivansh-afk/Habit-Tracker
1
0
Fork 0
mirror of https://github.com/harivansh-afk/Habit-Tracker.git synced 2026-04-17 03:03:47 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

improved tooltip UI

Browse source
This commit is contained in:
Harivansh Rathi 2024-11-22 02:17:02 -05:00
parent f59a64237d
commit 06f55fbe4b
1 changed files with 23 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

46
src/components/Calendar.tsx
View file

@ -303,52 +303,52 @@ export const Calendar: React.FC<CalendarProps> = ({
top: tooltipData.y - 8, top: tooltipData.y - 8,
transform: 'translate(-50%, -100%)', transform: 'translate(-50%, -100%)',
pointerEvents: tooltipData.isVisible ? 'auto' : 'none', pointerEvents: tooltipData.isVisible ? 'auto' : 'none',
zIndex: 100,
}} }}
> >
<div <div
className={` className={`
rounded-lg p-4 rounded-2xl p-5
w-[200px] w-[240px]
${theme.calendar.tooltip.background} bg-white dark:bg-[#232323]
${theme.calendar.tooltip.border}
shadow-[0_10px_38px_-10px_rgba(22,23,24,0.35),0_10px_20px_-15px_rgba(22,23,24,0.2)]
border border
backdrop-blur-sm ${theme.border}
shadow-lg
relative relative
transition-all duration-150 ease-in-out transition-all duration-150 ease-in-out
scale-100 origin-[bottom] scale-100 origin-[bottom]
${tooltipData.isVisible ? 'scale-100' : 'scale-98'} ${tooltipData.isVisible ? 'scale-100' : 'scale-98'}
`} `}
> >
{/* Arrow */} {/* Updated Arrow */}
<div <div
className={` className={`
absolute -bottom-2 left-1/2 -translate-x-1/2 absolute -bottom-[6px] left-1/2 -translate-x-1/2
w-4 h-4 rotate-45 w-3 h-3 rotate-45
${theme.calendar.tooltip.background} bg-white dark:bg-[#232323]
${theme.calendar.tooltip.border} ${theme.border}
border-t-0 border-l-0 border-t-0 border-l-0
`} `}
/> />
<div className="relative"> <div className="relative">
{tooltipData.completedHabits.length > 0 && ( {tooltipData.completedHabits.length > 0 && (
<div className="mb-3"> <div className="mb-4">
<span className="text-[#2ecc71] font-semibold block mb-2"> <span className="text-emerald-500 dark:text-emerald-400 font-medium block mb-2.5 text-sm">
✓ Completed ✓ Completed
</span> </span>
<ul className="space-y-1.5"> <ul className="space-y-2">
{tooltipData.completedHabits.map(habit => ( {tooltipData.completedHabits.map(habit => (
<li <li
key={habit.id} key={habit.id}
className={`${theme.text} text-sm truncate flex items-center justify-between`} className={`${theme.text} text-sm truncate flex items-center justify-between group`}
> >
<span>{habit.name}</span> <span className="truncate mr-2">{habit.name}</span>
<button <button
onClick={(e) => handleToggleHabit(e, habit.id, tooltipData.date)} onClick={(e) => handleToggleHabit(e, habit.id, tooltipData.date)}
className="p-1 hover:bg-gray-100 dark:hover:bg-gray-700 rounded" className={`p-1.5 rounded-lg transition-colors ${theme.habitItem}`}
> >
<Check className="h-4 w-4 text-[#2ecc71]" /> <Check className="h-4 w-4 text-emerald-500 dark:text-emerald-400" />
</button> </button>
</li> </li>
))} ))}
@ -357,21 +357,21 @@ export const Calendar: React.FC<CalendarProps> = ({
)} )}
{tooltipData.incompleteHabits.length > 0 && ( {tooltipData.incompleteHabits.length > 0 && (
<div> <div>
<span className="text-[#e74c3c] font-semibold block mb-2"> <span className="text-rose-500 dark:text-rose-400 font-medium block mb-2.5 text-sm">
○ Pending ○ Pending
</span> </span>
<ul className="space-y-1.5"> <ul className="space-y-2">
{tooltipData.incompleteHabits.map(habit => ( {tooltipData.incompleteHabits.map(habit => (
<li <li
key={habit.id} key={habit.id}
className={`${theme.text} text-sm truncate flex items-center justify-between group`} className={`${theme.text} text-sm truncate flex items-center justify-between group`}
> >
<span>{habit.name}</span> <span className="truncate mr-2">{habit.name}</span>
<button <button
onClick={(e) => handleToggleHabit(e, habit.id, tooltipData.date)} onClick={(e) => handleToggleHabit(e, habit.id, tooltipData.date)}
className="p-1 hover:bg-gray-100 dark:hover:bg-gray-700 rounded opacity-0 group-hover:opacity-100 transition-opacity" className={`p-1.5 rounded-lg transition-colors opacity-0 group-hover:opacity-100 ${theme.habitItem}`}
> >
<Check className="h-4 w-4 text-gray-400 hover:text-[#2ecc71]" /> <Check className="h-4 w-4 text-gray-400 dark:text-gray-500 hover:text-emerald-500 dark:hover:text-emerald-400" />
</button> </button>
</li> </li>
))} ))}