style(recurrence-picker): tighten spacing and use muted xs labels

src/components/recurrence-picker.tsx

@@ -83,18 +83,18 @@ export function RecurrencePicker({ value, onChange }: Props) {
 	};
 
 	return (
-		<div className="">
+		<div className="space-y-3">
-			<Label htmlFor="frequency" className="pt-4 pb-2 pl-1">
+			<div>
+				<Label htmlFor="frequency" className="text-xs text-muted-foreground">
 					Repeats
 				</Label>
-			<div className="space-y-2">
 				<Select
 					value={rec.freq}
 					onValueChange={(value) =>
 						update({ freq: value as Recurrence["freq"] })
 					}
 				>
-					<SelectTrigger id="frequency">
+					<SelectTrigger id="frequency" className="mt-1.5">
 						<SelectValue />
 					</SelectTrigger>
 					<SelectContent>
@@ -108,8 +108,8 @@ export function RecurrencePicker({ value, onChange }: Props) {
 
 			{rec.freq !== "NONE" && (
 				<>
-					<div className="space-y-2">
+					<div>
-						<Label htmlFor="interval">
+						<Label htmlFor="interval" className="text-xs text-muted-foreground">
 							Interval (every {rec.interval}{" "}
 							{rec.freq === "DAILY"
 								? "day"
@@ -126,22 +126,27 @@ export function RecurrencePicker({ value, onChange }: Props) {
 							onChange={(e) =>
 								update({ interval: Number.parseInt(e.target.value, 10) || 1 })
 							}
-							className="w-24"
+							className="mt-1.5 w-24"
 						/>
 					</div>
 
 					{rec.freq === "WEEKLY" && (
-						<div className="space-y-2">
+						<div>
-							<Label>Days of the week</Label>
+							<Label className="text-xs text-muted-foreground">
-							<div className="flex flex-wrap gap-4">
+								Days of the week
+							</Label>
+							<div className="flex flex-wrap gap-3 mt-1.5">
 								{["MO", "TU", "WE", "TH", "FR", "SA", "SU"].map((day) => (
-									<div key={day} className="flex items-center space-x-2">
+									<div key={day} className="flex items-center gap-1.5">
 										<Checkbox
 											id={day}
 											checked={rec.byDay?.includes(day) || false}
 											onCheckedChange={() => toggleDay(day)}
 										/>
-										<Label htmlFor={day} className="text-sm font-normal">
+										<Label
+											htmlFor={day}
+											className="text-xs font-normal cursor-pointer"
+										>
 											{dayLabels[day as keyof typeof dayLabels]}
 										</Label>
 									</div>
@@ -150,9 +155,11 @@ export function RecurrencePicker({ value, onChange }: Props) {
 						</div>
 					)}
 
-					<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+					<div className="grid grid-cols-2 gap-3">
-						<div className="space-y-2">
+						<div>
-							<Label htmlFor="count">End after (occurrences)</Label>
+							<Label htmlFor="count" className="text-xs text-muted-foreground">
+								End after (occurrences)
+							</Label>
 							<Input
 								id="count"
 								type="number"
@@ -165,15 +172,19 @@ export function RecurrencePicker({ value, onChange }: Props) {
 											: undefined,
 									})
 								}
+								className="mt-1.5"
 							/>
 						</div>
-						<div className="space-y-2">
+						<div>
-							<Label htmlFor="until">End by date</Label>
+							<Label htmlFor="until" className="text-xs text-muted-foreground">
+								End by date
+							</Label>
 							<Input
 								id="until"
 								type="date"
 								value={rec.until || ""}
 								onChange={(e) => update({ until: e.target.value || undefined })}
+								className="mt-1.5"
 							/>
 						</div>
 					</div>