fixed scroll description size, fixed dark mode toggle switch, fixed date height and positioning, fixed date picker container with negative margin (#7656)
Peer Richelsen
GitHub
parent
aebfc7362e
commit
ba0e443c52
|
|
@ -64,13 +64,13 @@ const AvailableTimes: FC<AvailableTimesProps> = ({
|
|||
return (
|
||||
<div ref={slotPickerRef}>
|
||||
{!!date ? (
|
||||
<div className="dark:bg-darkgray-100 mt-8 flex h-full w-full flex-col px-4 text-center sm:mt-0 sm:p-5 md:-mb-5 md:min-w-[200px] lg:min-w-[300px]">
|
||||
<div className="mb-6 flex items-center text-left text-base">
|
||||
<div className="dark:bg-darkgray-100 mt-8 flex h-full w-full flex-col rounded-md px-4 text-center sm:mt-0 sm:p-4 md:-mb-5 md:min-w-[200px] md:p-4 lg:min-w-[300px]">
|
||||
<div className="mb-4 flex items-center text-left text-base">
|
||||
<div className="mr-4">
|
||||
<span className="text-bookingdarker dark:text-darkgray-800 font-semibold text-gray-900">
|
||||
{nameOfDay(i18n.language, Number(date.format("d")), "short")}
|
||||
</span>
|
||||
<span className="text-bookinglight font-medium">
|
||||
<span className="text-bookinglight">
|
||||
, {date.toDate().toLocaleString(i18n.language, { month: "short" })} {date.format(" D ")}
|
||||
</span>
|
||||
</div>
|
||||
|
|
@ -85,7 +85,9 @@ const AvailableTimes: FC<AvailableTimesProps> = ({
|
|||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div ref={ref} className="flex-grow overflow-y-auto sm:block md:h-[364px]">
|
||||
<div
|
||||
ref={ref}
|
||||
className="scroll-bar scrollbar-track-w-20 relative -mb-4 flex-grow overflow-y-auto sm:block md:h-[364px]">
|
||||
{slots.length > 0 &&
|
||||
slots.map((slot) => {
|
||||
type BookingURL = {
|
||||
|
|
|
|||
|
|
@ -83,20 +83,20 @@ const BookingDescription: FC<Props> = (props) => {
|
|||
size="sm"
|
||||
truncateAfter={3}
|
||||
/>
|
||||
<h2 className="mt-2 break-words text-sm font-medium text-gray-600 dark:text-gray-300">
|
||||
<h2 className="mt-1 mb-2 break-words text-sm font-medium text-gray-600 dark:text-gray-300">
|
||||
{profile.name}
|
||||
</h2>
|
||||
<h1 className="font-cal dark:text-darkgray-900 mb-6 break-words text-2xl font-semibold text-gray-900">
|
||||
<h1 className="font-cal dark:text-darkgray-900 mb-6 break-words text-2xl font-semibold leading-none text-gray-900">
|
||||
{eventType.title}
|
||||
</h1>
|
||||
<div className="dark:text-darkgray-600 flex flex-col space-y-4 text-sm font-medium text-gray-600">
|
||||
{eventType?.description && (
|
||||
<div
|
||||
className={classNames(
|
||||
"flex",
|
||||
"scroll-bar scrollbar-track-w-20 -mx-5 flex max-h-[180px] overflow-y-scroll px-5 ",
|
||||
isBookingPage && "dark:text-darkgray-600 text-sm font-medium text-gray-600"
|
||||
)}>
|
||||
<div className="scroll-bar scrollbar-track-w-20 max-h-[200px] max-w-full flex-shrink overflow-scroll break-words [&_a]:text-blue-500 [&_a]:underline [&_a]:hover:text-blue-600">
|
||||
<div className="max-w-full flex-shrink break-words [&_a]:text-blue-500 [&_a]:underline [&_a]:hover:text-blue-600">
|
||||
<EventTypeDescriptionSafeHTML eventType={eventType} />
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -164,7 +164,7 @@ export const SlotPicker = ({
|
|||
<DatePicker
|
||||
isLoading={isLoading}
|
||||
className={classNames(
|
||||
"mt-8 px-4 pb-4 sm:mt-0 md:min-w-[300px] md:px-5 lg:min-w-[455px]",
|
||||
"mt-8 px-4 pb-4 sm:mt-0 md:min-w-[300px] md:px-4 lg:min-w-[455px]",
|
||||
selectedDate ? "sm:dark:border-darkgray-200 border-gray-200 sm:border-r sm:p-4 sm:pr-6" : "sm:p-4"
|
||||
)}
|
||||
includedDates={Object.keys(monthSlots).filter((k) => monthSlots[k].length > 0)}
|
||||
|
|
|
|||
|
|
@ -168,7 +168,7 @@ const AvailabilityPage = ({ profile, eventType, ...restProps }: Props) => {
|
|||
<div
|
||||
className={classNames(
|
||||
"sm:dark:border-darkgray-200 flex flex-col border-gray-200 p-5 sm:border-r",
|
||||
"min-w-full md:w-[230px] md:min-w-[230px]",
|
||||
"min-w-full md:w-[280px] md:min-w-[280px]",
|
||||
recurringEventCount && "xl:w-[380px] xl:min-w-[380px]"
|
||||
)}>
|
||||
<BookingDescription profile={profile} eventType={eventType} rescheduleUid={rescheduleUid}>
|
||||
|
|
|
|||
|
|
@ -198,36 +198,41 @@ const DatePicker = ({
|
|||
|
||||
return (
|
||||
<div className={className}>
|
||||
<div className="mb-4 flex justify-between text-xl font-light">
|
||||
<span className="w-1/2 dark:text-white">
|
||||
<div className="mb-4 flex items-center justify-between text-xl font-light">
|
||||
<span className="w-1/2 text-base dark:text-white">
|
||||
{browsingDate ? (
|
||||
<>
|
||||
<strong className="text-bookingdarker text-base font-semibold dark:text-white">{month}</strong>{" "}
|
||||
<span className="text-bookinglight text-sm font-medium">{browsingDate.format("YYYY")}</span>
|
||||
<strong className="text-bookingdarker font-semibold dark:text-white">{month}</strong>{" "}
|
||||
<span className="text-bookinglight">{browsingDate.format("YYYY")}</span>
|
||||
</>
|
||||
) : (
|
||||
<SkeletonText className="h-8 w-24" />
|
||||
)}
|
||||
</span>
|
||||
<div className="text-black dark:text-white">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => changeMonth(-1)}
|
||||
className={classNames(
|
||||
"group p-1 opacity-50 hover:opacity-100 ltr:mr-2 rtl:ml-2",
|
||||
!browsingDate.isAfter(dayjs()) && "disabled:text-bookinglighter hover:opacity-50"
|
||||
)}
|
||||
disabled={!browsingDate.isAfter(dayjs())}
|
||||
data-testid="decrementMonth">
|
||||
<ChevronLeftIcon className="h-5 w-5" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="group p-1 opacity-50 hover:opacity-100"
|
||||
onClick={() => changeMonth(+1)}
|
||||
data-testid="incrementMonth">
|
||||
<ChevronRightIcon className="h-5 w-5" />
|
||||
</button>
|
||||
<div className="flex">
|
||||
<Button
|
||||
className={classNames(
|
||||
"group p-1 opacity-50 hover:opacity-100",
|
||||
!browsingDate.isAfter(dayjs()) &&
|
||||
"disabled:text-bookinglighter hover:bg-background hover:opacity-50"
|
||||
)}
|
||||
onClick={() => changeMonth(-1)}
|
||||
disabled={!browsingDate.isAfter(dayjs())}
|
||||
data-testid="decrementMonth"
|
||||
color="minimal"
|
||||
variant="icon"
|
||||
StartIcon={ChevronLeftIcon}
|
||||
/>
|
||||
<Button
|
||||
className="group p-1 opacity-50 hover:opacity-100"
|
||||
onClick={() => changeMonth(+1)}
|
||||
data-testid="incrementMonth"
|
||||
color="minimal"
|
||||
variant="icon"
|
||||
StartIcon={ChevronRightIcon}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="border-bookinglightest mb-2 grid grid-cols-7 gap-4 border-t border-b text-center dark:border-neutral-900 md:mb-0 md:border-0">
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@ export const ToggleGroup = ({ options, onValueChange, isFullWidth, ...props }: T
|
|||
{...props}
|
||||
onValueChange={setValue}
|
||||
className={classNames(
|
||||
"dark:border-darkgray-200 relative inline-flex rounded-md border border-gray-200 p-1",
|
||||
"dark:border-darkgray-200 min-h-9 dark:bg-darkgray-50 relative inline-flex gap-0.5 rounded-md border border-gray-200 p-1",
|
||||
props.className,
|
||||
isFullWidth && "w-full"
|
||||
)}>
|
||||
|
|
@ -41,10 +41,10 @@ export const ToggleGroup = ({ options, onValueChange, isFullWidth, ...props }: T
|
|||
key={option.value}
|
||||
value={option.value}
|
||||
className={classNames(
|
||||
"relative rounded-[4px] px-3 py-1 text-sm",
|
||||
"relative rounded-[4px] px-3 py-1 text-sm leading-tight",
|
||||
option.disabled
|
||||
? "dark:text-darkgray-900 text-gray-400 hover:cursor-not-allowed"
|
||||
: "dark:text-darkgray-800 [&[aria-checked='false']]:hover:font-medium",
|
||||
: "dark:text-darkgray-800 dark:[&[aria-checked='false']]:hover:bg-darkgray-100 [&[aria-checked='false']]:hover:bg-gray-100",
|
||||
isFullWidth && "w-full"
|
||||
)}
|
||||
ref={(node) => {
|
||||
|
|
|
|||
Loading…
Reference in New Issue