diff options
Diffstat (limited to 'packages/aml-backoffice-ui/src/handlers/Calendar.tsx')
-rw-r--r-- | packages/aml-backoffice-ui/src/handlers/Calendar.tsx | 35 |
1 files changed, 19 insertions, 16 deletions
diff --git a/packages/aml-backoffice-ui/src/handlers/Calendar.tsx b/packages/aml-backoffice-ui/src/handlers/Calendar.tsx index 9da6e1757..e476bf6f6 100644 --- a/packages/aml-backoffice-ui/src/handlers/Calendar.tsx +++ b/packages/aml-backoffice-ui/src/handlers/Calendar.tsx @@ -89,28 +89,31 @@ export function Calendar({ value, onChange }: { value: AbsoluteTime | undefined, <div>S</div> <div>S</div> </div> - <div class="isolate mt-2 grid grid-cols-7 gap-px rounded-lg bg-gray-200 text-sm shadow ring-1 ring-gray-200"> - {daysInMonth.map(current => ( - <button type="button" - data-month={isSameMonth(current, showingDate)} - data-today={isSameDay(current, today)} - data-selected={isSameDay(current, selected)} - onClick={() => { - onChange(AbsoluteTime.fromStampMs(current.getTime())) - }} - class="text-gray-400 hover:bg-gray-700 focus:z-10 py-1.5 + <div class="isolate mt-2"> + <div class="grid grid-cols-7 gap-px rounded-lg bg-gray-200 text-sm shadow ring-1 ring-gray-200"> + {daysInMonth.map(current => ( + <button type="button" + data-month={isSameMonth(current, showingDate)} + data-today={isSameDay(current, today)} + data-selected={isSameDay(current, selected)} + onClick={() => { + onChange(AbsoluteTime.fromStampMs(current.getTime())) + }} + class="text-gray-400 hover:bg-gray-700 focus:z-10 py-1.5 data-[month=false]:bg-gray-100 data-[month=true]:bg-white data-[today=true]:font-semibold data-[month=true]:text-gray-900 data-[today=true]:bg-red-300 data-[today=true]:hover:bg-red-200 data-[month=true]:hover:bg-gray-200 data-[selected=true]:!bg-blue-400 data-[selected=true]:hover:!bg-blue-300 "> - <time dateTime={format(current, "yyyy-MM-dd")} - class="mx-auto flex h-7 w-7 items-center justify-center rounded-full"> - {format(current, "dd")} - </time> - </button> - ))} + <time dateTime={format(current, "yyyy-MM-dd")} + class="mx-auto flex h-7 w-7 py-4 px-5 sm:px-8 items-center justify-center rounded-full"> + {format(current, "dd")} + </time> + </button> + ))} + </div> + {daysInMonth.length < 40 ? <div class="w-7 h-7 m-1.5" /> : undefined} </div> </div> } |