monadical/common-availability
12
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update #10

Merged
Joyce merged 1 commits from implement-more-feeedback into main 2026-02-06 02:04:26 +00:00
Conversation 0 Commits 1 Files Changed 3 +32 -11
3 changed files with 32 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
frontend/src/components/AvailabilityHeatmapV2.tsx
View File

@@ -343,12 +343,18 @@ export const AvailabilityHeatmapV2 = ({
// Styling
let bgClass = ""; // Default transparent
if (!slot) bgClass = "bg-muted/10 pattern-diagonal-lines opacity-50";
else if (isFull) bgClass = "bg-emerald-500/90 hover:bg-emerald-600 shadow-sm";
else if (isPartial) bgClass = "bg-amber-400/80 hover:bg-amber-500 shadow-sm";
else if (isNone || isPartialHidden) bgClass = "bg-transparent hover:bg-muted/20";
if (tooSoon && slot) bgClass = cn(bgClass, "opacity-30 cursor-not-allowed pattern-diagonal-lines");
if (!slot) {
bgClass = "bg-muted/10 pattern-diagonal-lines opacity-50";
} else if (tooSoon) {
bgClass = "bg-muted/20 pattern-diagonal-lines cursor-not-allowed border border-border/10";
} else if (isFull) {
bgClass = "bg-emerald-500/90 hover:bg-emerald-600 shadow-sm";
} else if (isPartial) {
bgClass = "bg-amber-400/80 hover:bg-amber-500 shadow-sm";
} else if (isNone || isPartialHidden) {
bgClass = "bg-muted/50 hover:bg-muted/70 border border-border/20";
}
return (
<div key={date.toISOString()} className="p-1 h-[52px] border-r border-border/30 last:border-0">
@@ -364,7 +370,7 @@ export const AvailabilityHeatmapV2 = ({
{isFull && <Check className="w-4 h-4 text-white opacity-0 group-hover/cell:opacity-100 transition-opacity" />}
</div>
</PopoverTrigger>
<PopoverContent className="w-72 p-0 rounded-xl overflow-hidden shadow-xl border-border" side="right" align="start">
<PopoverContent className="w-72 p-0 rounded-xl overflow-hidden shadow-xl border-border" side="right" align={hour >= 12 ? "end" : "start"}>
<div className="p-4 bg-muted/30 border-b border-border/50">
<h4 className="font-semibold text-base flex items-center gap-2">
<CalendarIcon className="w-4 h-4 text-muted-foreground" />
@@ -439,11 +445,11 @@ export const AvailabilityHeatmapV2 = ({
</div>
)}
<div className="flex items-center gap-2">
<div className="w-3 h-3 rounded border border-slate-300 bg-slate-100 dark:bg-slate-800 dark:border-slate-700"></div>
<div className="w-3 h-3 rounded bg-muted/50 border border-border/20"></div>
<span className="text-muted-foreground">Busy / No Match</span>
</div>
<div className="flex items-center gap-2">
<div className="w-3 h-3 rounded bg-muted/30 pattern-diagonal-lines ring-1 ring-border/50"></div>
<div className="w-3 h-3 rounded bg-muted/20 pattern-diagonal-lines border border-border/10"></div>
<span className="text-muted-foreground">Past / Too Soon</span>
</div>
</div>

12
frontend/src/index.css
View File

@@ -233,3 +233,15 @@
0%, 100% { opacity: 1; }
50% { opacity: 0.7; }
}
.pattern-diagonal-lines {
background-image: repeating-linear-gradient(
45deg,
currentColor,
currentColor 1px,
transparent 1px,
transparent 10px
);
background-size: 10px 10px;
opacity: 0.1;
}

9
frontend/src/pages/Index.tsx
View File

@@ -392,13 +392,16 @@ const Index = ({ defaultTab = 'schedule' }: IndexProps) => {
)}
</div>
<div className="border-t border-border pt-4">
<div className="border-t border-border pt-4 mt-8">
<Label className="text-xs font-semibold text-muted-foreground uppercase tracking-wider mb-3 block">
Danger Zone
</Label>
<AlertDialog>
<AlertDialogTrigger asChild>
<Button
variant="destructive"
variant="outline"
size="sm"
className="w-full"
className="text-destructive hover:text-destructive-foreground hover:bg-destructive border-destructive/30"
>
Clear All Bookings
</Button>