fix: styles for the schedule component, make it mobile-friendly (#15178)

* fix styles for the schedule component, make it mobile-friendly * CR changes * no need that condition
calcom · May 24, 2024 · 58e6f18 · 58e6f18
1 parent ffe6a46
commit 58e6f18
Showing 1 changed file with 16 additions and 15 deletions.
diff --git a/packages/features/schedules/components/Schedule.tsx b/packages/features/schedules/components/Schedule.tsx
@@ -74,7 +74,7 @@ export const ScheduleDay = <TFieldValues extends FieldValues>({
   return (
     <div
       className={classNames(
-        "mb-4 flex w-full flex-col gap-4 last:mb-0 sm:flex-row sm:px-0",
+        "flex w-full flex-col gap-4 last:mb-0 sm:flex-row sm:gap-6 sm:px-0",
         className?.scheduleDay
       )}
       data-testid={weekday}>
@@ -102,8 +102,9 @@ export const ScheduleDay = <TFieldValues extends FieldValues>({
         </div>
       </div>
       <>
-        {watchDayRange ? (
-          <div className="flex sm:ml-2">
+        {!watchDayRange && <SkeletonText className="ml-1 mt-2.5 h-6 w-48" />}
+        {watchDayRange.length > 0 && (
+          <div className="flex sm:gap-2">
             <DayRanges
               userTimeFormat={userTimeFormat}
               labels={labels}
@@ -115,10 +116,8 @@ export const ScheduleDay = <TFieldValues extends FieldValues>({
                 timeRangeField: className?.timeRangeField,
               }}
             />
-            {!!watchDayRange.length && !disabled && <div className="block">{CopyButton}</div>}
+            {!disabled && <div className="block">{CopyButton}</div>}
           </div>
-        ) : (
-          <SkeletonText className="ml-1 mt-2.5 h-6 w-48" />
         )}
       </>
     </div>
@@ -215,7 +214,7 @@ export const ScheduleComponent = <
   const { i18n } = useLocale();
 
   return (
-    <div className={classNames("p-4", className?.schedule)}>
+    <div className={classNames("flex flex-col gap-4 p-2 sm:p-4", className?.schedule)}>
       {/* First iterate for each day */}
       {weekdayNames(i18n.language, weekStart, "long").map((weekday, num) => {
         const weekdayIndex = (num + weekStart) % 7;
@@ -271,11 +270,13 @@ export const DayRanges = <TFieldValues extends FieldValues>({
     name,
   });
 
+  if (!fields.length) return null;
+
   return (
-    <div className={classNames("", className?.dayRanges)}>
+    <div className={classNames("flex flex-col gap-2", className?.dayRanges)}>
       {fields.map((field, index: number) => (
         <Fragment key={field.id}>
-          <div className="mb-2 flex last:mb-0">
+          <div className="flex gap-1 last:mb-0 sm:gap-2">
             <Controller
               name={`${name}.${index}`}
               render={({ field }) => (
@@ -291,7 +292,7 @@ export const DayRanges = <TFieldValues extends FieldValues>({
                 disabled={disabled}
                 data-testid="add-time-availability"
                 tooltip={labels?.addTime ?? t("add_time_availability")}
-                className="text-default mx-2"
+                className="text-default"
                 type="button"
                 color="minimal"
                 variant="icon"
@@ -314,7 +315,7 @@ export const DayRanges = <TFieldValues extends FieldValues>({
               />
             )}
             {index !== 0 && (
-              <RemoveTimeButton index={index} remove={remove} className="text-default mx-2 border-none" />
+              <RemoveTimeButton index={index} remove={remove} className="text-default border-none" />
             )}
           </div>
         </Fragment>
@@ -364,10 +365,10 @@ const TimeRangeField = ({
 } & ControllerRenderProps) => {
   // this is a controlled component anyway given it uses LazySelect, so keep it RHF agnostic.
   return (
-    <div className={classNames("flex flex-row gap-1", className)}>
+    <div className={classNames("flex flex-row gap-2 sm:gap-3", className)}>
       <LazySelect
         userTimeFormat={userTimeFormat}
-        className="flex w-[100px]"
+        className="block w-[90px] sm:w-[100px]"
         isDisabled={disabled}
         value={value.start}
         menuPlacement="bottom"
@@ -376,10 +377,10 @@ const TimeRangeField = ({
           onChange({ ...value, start: new Date(option?.value as number) });
         }}
       />
-      <span className="text-default mx-2 w-2 self-center"> - </span>
+      <span className="text-default w-2 self-center"> - </span>
       <LazySelect
         userTimeFormat={userTimeFormat}
-        className="inline-block w-[100px] rounded-md"
+        className="block w-[90px] rounded-md sm:w-[100px]"
         isDisabled={disabled}
         value={value.end}
         min={value.start}