Skip to content

Commit da58f1b

Browse files
HyteqHyteq
Hyteq
authored and
Hyteq
committed
feat: show current day highlight on calendar
1 parent 5ee36e1 commit da58f1b

2 files changed

Lines changed: 22 additions & 21 deletions

File tree

‎apps/dashboard/components/date-range-picker.tsx‎

Lines changed: 19 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -118,40 +118,40 @@ export function DateRangePicker({
118118
<Popover open={isOpen} onOpenChange={setIsOpen}>
119119
<PopoverTrigger asChild>
120120
<Button
121-
variant="ghost"
121+
variant="outline"
122122
size="sm"
123123
disabled={disabled}
124124
className={cn(
125-
"h-6 text-xs gap-1 whitespace-nowrap px-2 justify-start text-left font-normal",
125+
"h-8 text-sm gap-2 whitespace-nowrap px-3 justify-start text-left font-normal border shadow-xs transition-[color,box-shadow]",
126126
!hasSelection && "text-muted-foreground"
127127
)}
128128
>
129-
<CalendarIcon size={16} className="h-3 w-3 shrink-0" />
130-
<span className="truncate text-xs font-medium">
129+
<CalendarIcon size={16} className="h-4 w-4 shrink-0" />
130+
<span className="truncate text-sm font-medium">
131131
{getDisplayText()}
132132
</span>
133133
</Button>
134134
</PopoverTrigger>
135-
<PopoverContent className="w-auto p-0" align="end">
135+
<PopoverContent className="w-auto p-0 border shadow-md rounded" align="end">
136136
{/* Header showing current selection */}
137-
<div className="p-3 border-b">
138-
<div className="text-xs text-muted-foreground">
137+
<div className="p-4 border-b bg-muted/20">
138+
<div className="text-sm text-muted-foreground">
139139
{tempRange?.from && tempRange?.to ? (
140140
<span className="text-foreground font-medium">
141141
{format(tempRange.from, "MMM d")} - {format(tempRange.to, "MMM d, yyyy")}
142142
</span>
143143
) : tempRange?.from ? (
144144
<span>
145-
<span className="text-foreground">{format(tempRange.from, "MMM d")}</span>
145+
<span className="text-foreground font-medium">{format(tempRange.from, "MMM d")}</span>
146146
<span className="text-muted-foreground"> → Select end date</span>
147147
</span>
148148
) : (
149-
"Select start date"
149+
<span className="font-medium">Select start date</span>
150150
)}
151151
</div>
152152
</div>
153153

154-
<div className="p-3">
154+
<div className="p-4">
155155
<Calendar
156156
initialFocus
157157
mode="range"
@@ -168,29 +168,29 @@ export function DateRangePicker({
168168
</div>
169169

170170
{/* Quick presets */}
171-
<div className="border-t p-3">
172-
<div className="text-xs font-medium text-muted-foreground mb-2">Quick select:</div>
171+
<div className="border-t p-4 bg-muted/20">
172+
<div className="text-sm font-medium text-muted-foreground mb-3">Quick select:</div>
173173
<div className="flex gap-2 flex-wrap">
174174
<Button
175175
variant="ghost"
176176
size="sm"
177-
className="h-7 text-xs"
177+
className="h-8 text-sm transition-[color,box-shadow]"
178178
onClick={() => handlePreset(7)}
179179
>
180180
Last 7 days
181181
</Button>
182182
<Button
183183
variant="ghost"
184184
size="sm"
185-
className="h-7 text-xs"
185+
className="h-8 text-sm transition-[color,box-shadow]"
186186
onClick={() => handlePreset(30)}
187187
>
188188
Last 30 days
189189
</Button>
190190
<Button
191191
variant="ghost"
192192
size="sm"
193-
className="h-7 text-xs"
193+
className="h-8 text-sm transition-[color,box-shadow]"
194194
onClick={() => handlePreset(90)}
195195
>
196196
Last 90 days
@@ -199,12 +199,12 @@ export function DateRangePicker({
199199
</div>
200200

201201
{/* Actions */}
202-
<div className="border-t p-3 flex justify-between items-center bg-muted/20">
202+
<div className="border-t p-4 flex justify-between items-center bg-muted/20">
203203
<Button
204204
variant="ghost"
205205
size="sm"
206206
onClick={handleClear}
207-
className="text-muted-foreground hover:text-foreground h-8 cursor-pointer"
207+
className="text-muted-foreground hover:text-foreground h-8 transition-[color,box-shadow]"
208208
>
209209
Clear
210210
</Button>
@@ -214,15 +214,15 @@ export function DateRangePicker({
214214
variant="ghost"
215215
size="sm"
216216
onClick={handleCancel}
217-
className="h-8 cursor-pointer"
217+
className="h-8 transition-[color,box-shadow]"
218218
>
219219
Cancel
220220
</Button>
221221
<Button
222222
size="sm"
223223
onClick={handleApply}
224224
disabled={!hasValidTempSelection}
225-
className="h-8 bg-primary hover:bg-primary/90 cursor-pointer"
225+
className="h-8 shadow-xs transition-[color,box-shadow]"
226226
>
227227
Apply
228228
</Button>

‎apps/dashboard/components/ui/calendar.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -107,7 +107,7 @@ function Calendar({
107107
range_middle: cn("rounded-none", defaultClassNames.range_middle),
108108
range_end: cn("rounded-r-md bg-accent", defaultClassNames.range_end),
109109
today: cn(
110-
"bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none",
110+
"bg-accent text-accent-foreground rounded data-[selected=true]:rounded-none border-2 border-ring shadow-xs transition-[color,box-shadow]",
111111
defaultClassNames.today
112112
),
113113
outside: cn(
@@ -197,8 +197,9 @@ function CalendarDayButton({
197197
data-range-start={modifiers.range_start}
198198
data-range-end={modifiers.range_end}
199199
data-range-middle={modifiers.range_middle}
200+
data-today={modifiers.today}
200201
className={cn(
201-
"data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-accent-foreground flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md [&>span]:text-xs [&>span]:opacity-70",
202+
"data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-accent-foreground flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md data-[today=true]:ring-2 data-[today=true]:ring-primary/50 data-[today=true]:ring-offset-1 [&>span]:text-xs [&>span]:opacity-70",
202203
defaultClassNames.day,
203204
className
204205
)}

0 commit comments

Comments
 (0)