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

fix: improve availability working hours layout spacing and editable heading icon gap (#25525)

Browse Source 
* fix: improve availability working hours layout spacing and editable heading icon gap

* refactor: wrap DateOverride in styled container in AvailabilitySettings
This commit is contained in:
Kartik Labhshetwar
2025-12-02 13:20:14 +00:00
committed by GitHub
parent a843a38e67
commit dbef7644d4
2 changed files with 35 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/platform/atoms/availability/AvailabilitySettings.tsx
+34 -28
View File
@@ -278,13 +278,11 @@ const SmallScreenSideBar = ({ open, children }: { open: boolean; children: JSX.E
return (
<div
className={classNames(
open
? "fadeIn fixed inset-0 z-50 bg-neutral-800/70 transition-opacity sm:hidden"
: ""
open ? "fadeIn fixed inset-0 z-50 bg-neutral-800/70 transition-opacity sm:hidden" : ""
)}>
<div
className={classNames(
"bg-default fixed right-0 z-20 flex h-screen w-80 flex-col stack-y-2 overflow-x-hidden rounded-md px-2 pb-3 transition-transform",
"bg-default stack-y-2 fixed right-0 z-20 flex h-screen w-80 flex-col overflow-x-hidden rounded-md px-2 pb-3 transition-transform",
open ? "translate-x-0 opacity-100" : "translate-x-full opacity-0"
)}>
{open ? children : null}
@@ -435,7 +433,7 @@ export const AvailabilitySettings = forwardRef<AvailabilitySettingsFormRef, Avai
<Skeleton
as={Label}
htmlFor="hiddenSwitch"
className="mt-2 cursor-pointer self-center pe-2"
className="pe-2 mt-2 cursor-pointer self-center"
loadingClassName="me-4"
waitForTranslation={!isPlatform}>
{t("set_to_default")}
@@ -498,7 +496,7 @@ export const AvailabilitySettings = forwardRef<AvailabilitySettingsFormRef, Avai
)}>
<div
className={classNames(
"bg-default fixed right-0 z-20 flex h-screen w-80 flex-col stack-y-2 overflow-x-hidden rounded-md px-2 pb-3 transition-transform",
"bg-default stack-y-2 fixed right-0 z-20 flex h-screen w-80 flex-col overflow-x-hidden rounded-md px-2 pb-3 transition-transform",
openSidebar ? "translate-x-0 opacity-100" : "translate-x-full opacity-0"
)}>
<div className="flex flex-row items-center pt-16">
@@ -561,7 +559,7 @@ export const AvailabilitySettings = forwardRef<AvailabilitySettingsFormRef, Avai
)}
</div>
<div className="min-w-40 col-span-3 stack-y-2 px-2 py-4 lg:col-span-1">
<div className="min-w-40 stack-y-2 col-span-3 px-2 py-4 lg:col-span-1">
<div className="xl:max-w-80 w-full pr-4 sm:ml-0 sm:mr-36 sm:p-0">
<div>
<Skeleton
@@ -593,8 +591,8 @@ export const AvailabilitySettings = forwardRef<AvailabilitySettingsFormRef, Avai
</div>
{!isPlatform && (
<>
<hr className="border-subtle my-7" />
<div className="rounded-md md:block">
<hr className="border-subtle my-8" />
<div className="border-subtle rounded-md border p-4 md:block">
<Skeleton
as="h3"
className="mb-0 inline-block text-sm font-medium"
@@ -681,25 +679,33 @@ export const AvailabilitySettings = forwardRef<AvailabilitySettingsFormRef, Avai
</div>
</div>
{enableOverrides && (
<BookerStoreProvider>
<DateOverride
isDryRun={isDryRun}
workingHours={schedule.workingHours}
userTimeFormat={timeFormat}
handleSubmit={handleSubmit}
travelSchedules={travelSchedules}
weekStart={
["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"].indexOf(
weekStart
) as 0 | 1 | 2 | 3 | 4 | 5 | 6
}
overridesModalClassNames={customClassNames?.overridesModalClassNames}
classNames={customClassNames?.dateOverrideClassNames}
/>
</BookerStoreProvider>
<div className="border-subtle rounded-md border">
<BookerStoreProvider>
<DateOverride
isDryRun={isDryRun}
workingHours={schedule.workingHours}
userTimeFormat={timeFormat}
handleSubmit={handleSubmit}
travelSchedules={travelSchedules}
weekStart={
[
"Sunday",
"Monday",
"Tuesday",
"Wednesday",
"Thursday",
"Friday",
"Saturday",
].indexOf(weekStart) as 0 | 1 | 2 | 3 | 4 | 5 | 6
}
overridesModalClassNames={customClassNames?.overridesModalClassNames}
classNames={customClassNames?.dateOverrideClassNames}
/>
</BookerStoreProvider>
</div>
)}
</div>
<div className="min-w-40 col-span-3 hidden stack-y-2 md:block lg:col-span-1">
<div className="min-w-40 stack-y-2 col-span-3 hidden md:block lg:col-span-1">
<div className="xl:max-w-80 w-full pr-4 sm:ml-0 sm:mr-36 sm:p-0">
<div>
<Skeleton
@@ -729,8 +735,8 @@ export const AvailabilitySettings = forwardRef<AvailabilitySettingsFormRef, Avai
<></>
) : (
<>
<hr className="border-subtle my-6 mr-8" />
<div className="rounded-md">
<hr className="border-subtle my-8 mr-8" />
<div className="border-subtle rounded-md border p-4">
<Skeleton
as="h3"
className="mb-0 inline-block text-sm font-medium"
packages/ui/components/editable-heading/EditableHeading.tsx
+1 -1
View File
@@ -47,7 +47,7 @@ export const EditableHeading = function EditableHeading({
onChange={(e) => onChange && onChange(e.target.value)}
/>
{!isEditing && isReady && !disabled && (
<Icon name="pencil" className="text-subtle group-hover:text-subtle -mt-px ml-1 inline h-3 w-3" />
<Icon name="pencil" className="text-subtle group-hover:text-subtle -mt-px ml-3 inline h-3 w-3" />
)}
</label>
</div>