feat: atoms date overrides modal custom classes (#16147)

* feat: atoms date override modal custom classes

* refactor: rename overridesModalClassName to overridesModalClassNames

packages/features/schedules/components/DateOverrideInputDialog.tsx

@@ -3,6 +3,7 @@ import { useForm } from "react-hook-form";
 
 import type { Dayjs } from "@calcom/dayjs";
 import dayjs from "@calcom/dayjs";
+import { classNames as cs } from "@calcom/lib";
 import { yyyymmdd } from "@calcom/lib/date-fns";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import type { WorkingHours } from "@calcom/types/schedule";
@@ -205,6 +206,7 @@ const DateOverrideInputDialog = ({
   excludedDates = [],
   userTimeFormat,
   weekStart = 0,
+  className,
   ...passThroughProps
 }: {
   workingHours: WorkingHours[];
@@ -214,13 +216,14 @@ const DateOverrideInputDialog = ({
   value?: TimeRange[];
   userTimeFormat: number | null;
   weekStart?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+  className?: string;
 }) => {
   const [open, setOpen] = useState(false);
   return (
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogTrigger asChild>{Trigger}</DialogTrigger>
 
-      <DialogContent enableOverflow={true} size="md" className="p-0">
+      <DialogContent enableOverflow={true} size="md" className={cs("p-0", className)}>
         <DateOverrideForm
           excludedDates={excludedDates}
           weekStart={weekStart}

packages/platform/atoms/availability/AvailabilitySettings.tsx

@@ -61,6 +61,7 @@ export type CustomClassNames = {
     timeRanges?: string;
     labelAndSwitchContainer?: string;
   };
+  overridesModalClassNames?: string;
 };
 
 export type Availability = Pick<Schedule, "days" | "startTime" | "endTime">;
@@ -152,11 +153,13 @@ const DateOverride = ({
   userTimeFormat,
   travelSchedules,
   weekStart,
+  overridesModalClassNames,
 }: {
   workingHours: WorkingHours[];
   userTimeFormat: number | null;
   travelSchedules?: RouterOutputs["viewer"]["getTravelSchedules"];
   weekStart: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+  overridesModalClassNames?: string;
 }) => {
   const { append, replace, fields } = useFieldArray<AvailabilityFormValues, "dateOverrides">({
     name: "dateOverrides",
@@ -186,6 +189,7 @@ const DateOverride = ({
           travelSchedules={travelSchedules}
         />
         <DateOverrideInputDialog
+          className={overridesModalClassNames}
           workingHours={workingHours}
           excludedDates={excludedDates}
           onChange={(ranges) => ranges.forEach((range) => append({ ranges: [range] }))}
@@ -525,6 +529,7 @@ export function AvailabilitySettings({
                     weekStart
                   ) as 0 | 1 | 2 | 3 | 4 | 5 | 6
                 }
+                overridesModalClassNames={customClassNames?.overridesModalClassNames}
               />
             )}
           </div>