fixed scroll description size, fixed dark mode toggle switch, fixed date height and positioning, fixed date picker container with negative margin (#7656)

apps/web/components/booking/AvailableTimes.tsx

@@ -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="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-6 flex items-center text-left text-base">
+          <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 = {

apps/web/components/booking/BookingDescription.tsx

@@ -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>

apps/web/components/booking/SlotPicker.tsx

@@ -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)}

apps/web/components/booking/pages/AvailabilityPage.tsx

@@ -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}>

packages/features/calendars/DatePicker.tsx

@@ -198,36 +198,41 @@ const DatePicker = ({
 
   return (
     <div className={className}>
-      <div className="mb-4 flex justify-between text-xl font-light">
+      <div className="mb-4 flex items-center justify-between text-xl font-light">
-        <span className="w-1/2 dark:text-white">
+        <span className="w-1/2 text-base dark:text-white">
           {browsingDate ? (
             <>
-              <strong className="text-bookingdarker text-base font-semibold dark:text-white">{month}</strong>{" "}
+              <strong className="text-bookingdarker font-semibold dark:text-white">{month}</strong>{" "}
-              <span className="text-bookinglight text-sm font-medium">{browsingDate.format("YYYY")}</span>
+              <span className="text-bookinglight">{browsingDate.format("YYYY")}</span>
             </>
           ) : (
             <SkeletonText className="h-8 w-24" />
           )}
         </span>
         <div className="text-black dark:text-white">
-          <button
+          <div className="flex">
-            type="button"
+            <Button
-            onClick={() => changeMonth(-1)}
+              className={classNames(
-            className={classNames(
+                "group p-1 opacity-50 hover:opacity-100",
-              "group p-1 opacity-50 hover:opacity-100 ltr:mr-2 rtl:ml-2",
+                !browsingDate.isAfter(dayjs()) &&
-              !browsingDate.isAfter(dayjs()) && "disabled:text-bookinglighter hover:opacity-50"
+                  "disabled:text-bookinglighter hover:bg-background hover:opacity-50"
-            )}
+              )}
-            disabled={!browsingDate.isAfter(dayjs())}
+              onClick={() => changeMonth(-1)}
-            data-testid="decrementMonth">
+              disabled={!browsingDate.isAfter(dayjs())}
-            <ChevronLeftIcon className="h-5 w-5" />
+              data-testid="decrementMonth"
-          </button>
+              color="minimal"
-          <button
+              variant="icon"
-            type="button"
+              StartIcon={ChevronLeftIcon}
-            className="group p-1 opacity-50 hover:opacity-100"
+            />
-            onClick={() => changeMonth(+1)}
+            <Button
-            data-testid="incrementMonth">
+              className="group p-1 opacity-50 hover:opacity-100"
-            <ChevronRightIcon className="h-5 w-5" />
+              onClick={() => changeMonth(+1)}
-          </button>
+              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">

packages/ui/components/form/toggleGroup/ToggleGroup.tsx

@@ -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) => {