From a26787a0261e898ad4945ed0e14e27060418262d Mon Sep 17 00:00:00 2001
From: Dmytro Stanchiev <git@dmytros.dev>
Date: Wed, 8 Apr 2026 00:56:49 -0400
Subject: [PATCH] feat(event-dialog): redesign with glass-strong styling,
 icon-decorated inputs, and Cancel button

- Apply glass-strong to DialogContent
- Add LucideMapPin and CalendarIcon/Clock icons to input fields
- Replace native checkbox with Checkbox + Label component
- Unify allDay date inputs into single relative-positioned blocks
- Add Cancel button to DialogFooter
- Rename Save to Create for new events
---
 src/components/event-dialog.tsx | 178 ++++++++++++++++++++------------
 1 file changed, 111 insertions(+), 67 deletions(-)

diff --git a/src/components/event-dialog.tsx b/src/components/event-dialog.tsx
index 4126a5c..5f3e3ce 100644
--- a/src/components/event-dialog.tsx
+++ b/src/components/event-dialog.tsx
@@ -1,5 +1,9 @@
+"use client";
+
+import { CalendarIcon, Clock, LucideMapPin } from "lucide-react";
 import { RecurrencePicker } from "@/components/recurrence-picker";
 import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
 import {
 	Dialog,
 	DialogContent,
@@ -9,6 +13,7 @@ import {
 	DialogTitle,
 } from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
 
 interface EventDialogProps {
 	open: boolean;
@@ -64,83 +69,122 @@ export const EventDialog = ({
 
 	return (
 		<Dialog open={open} onOpenChange={handleOpenChange}>
-			<DialogContent>
+			<DialogContent className="glass-strong max-w-md">
 				<DialogHeader>
-					<DialogTitle>{editingId ? "Edit Event" : "Add Event"}</DialogTitle>
+					<DialogTitle className="text-base">
+						{editingId ? "Edit Event" : "New Event"}
+					</DialogTitle>
 					<DialogDescription className="sr-only">
 						Fill in the event details below. Title and start date are required.
 					</DialogDescription>
 				</DialogHeader>
-				<Input
-					id="event-title"
-					name="title"
-					placeholder="Title"
-					value={title}
-					onChange={(e) => setTitle(e.target.value)}
-				/>
-				<textarea
-					id="event-description"
-					name="description"
-					className="border rounded p-2 w-full"
-					placeholder="Description"
-					value={description}
-					onChange={(e) => setDescription(e.target.value)}
-				/>
-				<Input
-					id="event-location"
-					name="location"
-					placeholder="Location"
-					value={location}
-					onChange={(e) => setLocation(e.target.value)}
-				/>
-				<Input
-					id="event-url"
-					name="url"
-					placeholder="URL"
-					value={url}
-					onChange={(e) => setUrl(e.target.value)}
-				/>
-				<RecurrencePicker value={recurrenceRule} onChange={setRecurrenceRule} />
 
-				<label className="flex items-center gap-2 mt-2" htmlFor="event-all-day">
-					<input
-						id="event-all-day"
-						name="allDay"
-						type="checkbox"
-						checked={allDay}
-						onChange={(e) => setAllDay(e.target.checked)}
+				<div className="space-y-3">
+					<Input
+						id="event-title"
+						name="title"
+						placeholder="Event title"
+						value={title}
+						onChange={(e) => setTitle(e.target.value)}
+						className="font-medium"
 					/>
-					All day event
-				</label>
-				{!allDay ? (
-					<>
+
+					<textarea
+						id="event-description"
+						name="description"
+						className="flex field-sizing-content min-h-[60px] max-h-40 w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm placeholder:text-muted-foreground/50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring resize-none"
+						placeholder="Add a description..."
+						value={description}
+						onChange={(e) => setDescription(e.target.value)}
+					/>
+
+					<div className="grid grid-cols-2 gap-3">
+						<div className="relative">
+							<LucideMapPin className="absolute left-3 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground/50" />
+							<Input
+								id="event-location"
+								name="location"
+								placeholder="Location"
+								value={location}
+								onChange={(e) => setLocation(e.target.value)}
+								className="pl-8"
+							/>
+						</div>
 						<Input
-							type="datetime-local"
-							value={start}
-							onChange={(e) => setStart(e.target.value)}
+							id="event-url"
+							name="url"
+							placeholder="URL"
+							value={url}
+							onChange={(e) => setUrl(e.target.value)}
 						/>
-						<Input
-							type="datetime-local"
-							value={end}
-							onChange={(e) => setEnd(e.target.value)}
+					</div>
+
+					<RecurrencePicker
+						value={recurrenceRule}
+						onChange={setRecurrenceRule}
+					/>
+
+					<div className="flex items-center gap-2 py-1">
+						<Checkbox
+							id="event-all-day"
+							checked={allDay}
+							onCheckedChange={(checked) => setAllDay(checked === true)}
 						/>
-					</>
-				) : (
-					<>
-						<Input
-							type="date"
-							value={start ? start.split("T")[0] : ""}
-							onChange={(e) => setStart(e.target.value)}
-						/>
-						<Input
-							type="date"
-							value={end ? end.split("T")[0] : ""}
-							onChange={(e) => setEnd(e.target.value)}
-						/>
-					</>
-				)}
-				<DialogFooter>
-					<Button onClick={onSave}>{editingId ? "Update" : "Save"}</Button>
+						<Label
+							htmlFor="event-all-day"
+							className="text-sm font-normal cursor-pointer"
+						>
+							All day
+						</Label>
+					</div>
+
+					<div className="space-y-2">
+						<div className="relative">
+							<CalendarIcon className="absolute left-3 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground/50 pointer-events-none" />
+							{!allDay ? (
+								<Input
+									type="datetime-local"
+									value={start}
+									onChange={(e) => setStart(e.target.value)}
+									className="pl-8"
+									placeholder="Start"
+								/>
+							) : (
+								<Input
+									type="date"
+									value={start ? start.split("T")[0] : ""}
+									onChange={(e) => setStart(e.target.value)}
+									className="pl-8"
+								/>
+							)}
+						</div>
+						<div className="relative">
+							<Clock className="absolute left-3 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground/50 pointer-events-none" />
+							{!allDay ? (
+								<Input
+									type="datetime-local"
+									value={end}
+									onChange={(e) => setEnd(e.target.value)}
+									className="pl-8"
+									placeholder="End"
+								/>
+							) : (
+								<Input
+									type="date"
+									value={end ? end.split("T")[0] : ""}
+									onChange={(e) => setEnd(e.target.value)}
+									className="pl-8"
+								/>
+							)}
+						</div>
+					</div>
+				</div>
+
+				<DialogFooter className="gap-2 sm:gap-0">
+					<Button variant="ghost" onClick={() => handleOpenChange(false)}>
+						Cancel
+					</Button>
+					<Button onClick={onSave}>{editingId ? "Update" : "Create"}</Button>
 				</DialogFooter>
 			</DialogContent>
 		</Dialog>