commonscomputer/cal.diy
4
0
Fork 0
Code Issues Pull Requests Actions 2.0k Packages Projects Releases Wiki Activity

feat: Datepicker transitions (#15313)

Browse Source 
* fix: Kbar component styles

Fix Kbar styles on active state

* refactor: Add transition to event type list item

The commit refactors the event type list item component by adding a transition effect to improve the user experience.

* refactor: Add transition effect to DatePicker component

Add transition effect to improve the user experience in the DatePicker component.

---------

Co-authored-by: Udit Takkar <53316345+Udit-takkar@users.noreply.github.com>
This commit is contained in:
Hichem Fantar
2024-06-08 14:05:49 +00:00
committed by GitHub
co-authored by Udit Takkar
parent b310eb1a7e
commit 5c95268d1a
1 changed files with 4 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/features/calendars/DatePicker.tsx
+4 -4
View File
@@ -80,7 +80,7 @@ export const Day = ({
type="button"
style={disabled ? { ...disabledDateButtonEmbedStyles } : { ...enabledDateButtonEmbedStyles }}
className={classNames(
"disabled:text-bookinglighter absolute bottom-0 left-0 right-0 top-0 mx-auto w-full rounded-md border-2 border-transparent text-center text-sm font-medium disabled:cursor-default disabled:border-transparent disabled:font-light ",
"disabled:text-bookinglighter absolute bottom-0 left-0 right-0 top-0 mx-auto w-full rounded-md border-2 border-transparent text-center text-sm font-medium transition disabled:cursor-default disabled:border-transparent disabled:font-light ",
active
? "bg-brand-default text-brand"
: !disabled
@@ -254,7 +254,7 @@ const Days = ({
<div key={`e-${idx}`} />
) : props.isPending ? (
<button
className="bg-muted text-muted absolute bottom-0 left-0 right-0 top-0 mx-auto flex w-full items-center justify-center rounded-sm border-transparent text-center font-medium opacity-50"
className="bg-muted text-muted absolute bottom-0 left-0 right-0 top-0 mx-auto flex w-full items-center justify-center rounded-sm border-transparent text-center font-medium opacity-50 transition"
key={`e-${idx}`}
disabled>
<SkeletonText className="h-4 w-5" />
@@ -342,7 +342,7 @@ const DatePicker = ({
<div className="flex">
<Button
className={classNames(
`group p-1 opacity-70 hover:opacity-100 rtl:rotate-180`,
`group p-1 opacity-70 transition hover:opacity-100 rtl:rotate-180`,
!browsingDate.isAfter(dayjs()) &&
`disabled:text-bookinglighter hover:bg-background hover:opacity-70`,
customClassNames?.datePickerToggle
@@ -356,7 +356,7 @@ const DatePicker = ({
/>
<Button
className={classNames(
`group p-1 opacity-70 hover:opacity-100 rtl:rotate-180`,
`group p-1 opacity-70 transition hover:opacity-100 rtl:rotate-180`,
`${customClassNames?.datePickerToggle}`
)}
onClick={() => changeMonth(+1)}