[CAL-713] /availability single - layout issues. Check spacing, margin, alignment with spec'd design (#6724)
Co-authored-by: gitstart-calcom <gitstart@users.noreply.github.com>pull/6692/head^2^2
GitStart-Cal.com
GitHub
parent
34db46869e
commit
828fcbe1d9
|
|
@ -51,7 +51,7 @@ const DateOverride = ({ workingHours }: { workingHours: WorkingHours[] }) => {
|
|||
});
|
||||
const { t } = useLocale();
|
||||
return (
|
||||
<div className="px-4 py-5 sm:p-6">
|
||||
<div className="p-6">
|
||||
<h3 className="font-medium leading-6 text-gray-900">
|
||||
{t("date_overrides")}{" "}
|
||||
<Tooltip content={t("date_overrides_info")}>
|
||||
|
|
@ -60,8 +60,8 @@ const DateOverride = ({ workingHours }: { workingHours: WorkingHours[] }) => {
|
|||
</span>
|
||||
</Tooltip>
|
||||
</h3>
|
||||
<p className="mb-4 text-sm text-gray-500 ltr:mr-4 rtl:ml-4">{t("date_overrides_subtitle")}</p>
|
||||
<div className="mt-1 space-y-2">
|
||||
<p className="mb-4 text-sm text-gray-500">{t("date_overrides_subtitle")}</p>
|
||||
<div className="space-y-2">
|
||||
<DateOverrideList
|
||||
excludedDates={fields.map((field) => yyyymmdd(field.ranges[0].start))}
|
||||
remove={remove}
|
||||
|
|
@ -148,7 +148,7 @@ export default function Availability({ schedule }: { schedule: number }) {
|
|||
)
|
||||
}
|
||||
CTA={
|
||||
<div className="flex items-center justify-end">
|
||||
<div className="mr-10 flex items-center justify-end xl:mr-36">
|
||||
<div className="flex items-center rounded-md px-2 sm:hover:bg-gray-100">
|
||||
<Skeleton
|
||||
as={Label}
|
||||
|
|
@ -185,25 +185,29 @@ export default function Availability({ schedule }: { schedule: number }) {
|
|||
...values,
|
||||
});
|
||||
}}
|
||||
className="flex flex-col pb-16 pt-4 sm:mx-0 md:pt-0 xl:flex-row xl:space-x-6">
|
||||
<div className="flex-1 divide-y divide-gray-200 rounded-md border">
|
||||
<div className=" py-5 sm:p-6">
|
||||
{typeof me.data?.weekStart === "string" && (
|
||||
<Schedule
|
||||
control={control}
|
||||
name="schedule"
|
||||
weekStart={
|
||||
["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"].indexOf(
|
||||
me.data?.weekStart
|
||||
) as 0 | 1 | 2 | 3 | 4 | 5 | 6
|
||||
}
|
||||
/>
|
||||
)}
|
||||
className="flex flex-col sm:mx-0 xl:flex-row xl:space-x-6">
|
||||
<div className="mx-10 flex-1 flex-row xl:mr-0 xl:ml-36">
|
||||
<div className="mb-6 rounded-md border">
|
||||
<div>
|
||||
{typeof me.data?.weekStart === "string" && (
|
||||
<Schedule
|
||||
control={control}
|
||||
name="schedule"
|
||||
weekStart={
|
||||
["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"].indexOf(
|
||||
me.data?.weekStart
|
||||
) as 0 | 1 | 2 | 3 | 4 | 5 | 6
|
||||
}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="my-6 rounded-md border">
|
||||
{data?.workingHours && <DateOverride workingHours={data.workingHours} />}
|
||||
</div>
|
||||
{data?.workingHours && <DateOverride workingHours={data.workingHours} />}
|
||||
</div>
|
||||
<div className="min-w-40 col-span-3 space-y-2 lg:col-span-1">
|
||||
<div className="xl:max-w-80 mt-4 w-full pr-4 sm:p-0">
|
||||
<div className="min-w-40 col-span-3 ml-10 space-y-2 lg:col-span-1 xl:ml-36">
|
||||
<div className="xl:max-w-80 w-full pr-4 sm:ml-0 sm:mr-36 sm:p-0">
|
||||
<div>
|
||||
<label htmlFor="timeZone" className="block text-sm font-medium text-gray-700">
|
||||
{t("timezone")}
|
||||
|
|
@ -223,7 +227,7 @@ export default function Availability({ schedule }: { schedule: number }) {
|
|||
}
|
||||
/>
|
||||
</div>
|
||||
<hr className="my-8" />
|
||||
<hr className="my-6 mr-8" />
|
||||
<div className="rounded-md">
|
||||
<h3 className="text-sm font-medium text-gray-900">{t("something_doesnt_look_right")}</h3>
|
||||
<div className="mt-3 flex">
|
||||
|
|
|
|||
|
|
@ -51,9 +51,9 @@ const ScheduleDay = <TFieldValues extends FieldValues>({
|
|||
const watchDayRange = watch(name);
|
||||
|
||||
return (
|
||||
<div className="mb-1 flex w-full flex-col px-5 py-1 sm:flex-row sm:px-0">
|
||||
<div className="mb-4 flex w-full flex-col last:mb-0 sm:flex-row sm:px-0">
|
||||
{/* Label & switch container */}
|
||||
<div className="flex h-11 items-center justify-between sm:w-32">
|
||||
<div className="flex h-[36px] items-center justify-between sm:w-32">
|
||||
<div>
|
||||
<label className="flex flex-row items-center space-x-2 rtl:space-x-reverse">
|
||||
<div>
|
||||
|
|
@ -67,9 +67,7 @@ const ScheduleDay = <TFieldValues extends FieldValues>({
|
|||
/>
|
||||
</div>
|
||||
<span className="inline-block min-w-[88px] text-sm capitalize">{weekday}</span>
|
||||
{watchDayRange && !!watchDayRange.length && (
|
||||
<div className="mt-1 mb-1 sm:hidden">{CopyButton}</div>
|
||||
)}
|
||||
{watchDayRange && !!watchDayRange.length && <div className="sm:hidden">{CopyButton}</div>}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -77,7 +75,7 @@ const ScheduleDay = <TFieldValues extends FieldValues>({
|
|||
{watchDayRange ? (
|
||||
<div className="flex sm:ml-2">
|
||||
<DayRanges control={control} name={name} />
|
||||
{!!watchDayRange.length && <div className="mt-1 hidden sm:block">{CopyButton}</div>}
|
||||
{!!watchDayRange.length && <div className="hidden sm:block">{CopyButton}</div>}
|
||||
</div>
|
||||
) : (
|
||||
<SkeletonText className="mt-2.5 ml-1 h-6 w-48" />
|
||||
|
|
@ -142,7 +140,7 @@ const Schedule = <
|
|||
const { i18n } = useLocale();
|
||||
|
||||
return (
|
||||
<div className="divide-y sm:divide-none">
|
||||
<div className="divide-y p-4 sm:divide-none">
|
||||
{/* First iterate for each day */}
|
||||
{weekdayNames(i18n.language, weekStart, "long").map((weekday, num) => {
|
||||
const weekdayIndex = (num + weekStart) % 7;
|
||||
|
|
@ -179,7 +177,7 @@ export const DayRanges = <TFieldValues extends FieldValues>({
|
|||
<div>
|
||||
{fields.map((field, index: number) => (
|
||||
<Fragment key={field.id}>
|
||||
<div className="mb-2 flex first:mt-1">
|
||||
<div className="mb-2 flex last:mb-0">
|
||||
<Controller name={`${name}.${index}`} render={({ field }) => <TimeRangeField {...field} />} />
|
||||
{index === 0 && (
|
||||
<Button
|
||||
|
|
@ -230,7 +228,7 @@ const TimeRangeField = ({ className, value, onChange }: { className?: string } &
|
|||
return (
|
||||
<div className={className}>
|
||||
<LazySelect
|
||||
className="inline-block h-9 w-[100px]"
|
||||
className="inline-block w-[100px]"
|
||||
value={value.start}
|
||||
max={value.end}
|
||||
onChange={(option) => {
|
||||
|
|
|
|||
|
|
@ -783,7 +783,12 @@ export function ShellMain(props: LayoutProps) {
|
|||
|
||||
return (
|
||||
<>
|
||||
<div className={classNames("flex items-center", props.smallHeading ? "md:mb-7" : "md:mb-8")}>
|
||||
<div
|
||||
className={classNames(
|
||||
"mb-6 flex items-center sm:mt-0",
|
||||
props.smallHeading ? "lg:mb-7" : "lg:mb-8",
|
||||
props.backPath === "/availability" && "ml-2.5 xl:ml-[7rem]"
|
||||
)}>
|
||||
{!!props.backPath && (
|
||||
<Button
|
||||
variant="icon"
|
||||
|
|
|
|||
|
|
@ -80,7 +80,7 @@ export const ControlComponent = <
|
|||
{...props}
|
||||
className={classNames(
|
||||
className,
|
||||
"dark:bg-darkgray-100 dark:border-darkgray-300 border-gray-300 bg-white text-sm leading-4 placeholder:text-sm placeholder:font-normal focus-within:border-0 focus-within:ring-2 focus-within:ring-neutral-800 hover:border-neutral-400 dark:focus-within:ring-white"
|
||||
"dark:bg-darkgray-100 dark:border-darkgray-300 !min-h-9 h-9 border-gray-300 bg-white text-sm leading-4 placeholder:text-sm placeholder:font-normal focus-within:border-0 focus-within:ring-2 focus-within:ring-neutral-800 hover:border-neutral-400 dark:focus-within:ring-white"
|
||||
)}
|
||||
/>
|
||||
);
|
||||
|
|
|
|||
Loading…
Reference in New Issue