feat: availability time picker styles

Author: supalarry

packages/features/schedules/components/Schedule.tsx

@@ -20,7 +20,6 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { weekdayNames } from "@calcom/lib/weekday";
 import useMeQuery from "@calcom/trpc/react/hooks/useMeQuery";
 import type { TimeRange } from "@calcom/types/schedule";
-
 import cn from "@calcom/ui/classNames";
 import { Button } from "@calcom/ui/components/button";
 import { Dropdown, DropdownMenuContent, DropdownMenuTrigger } from "@calcom/ui/components/dropdown";
@@ -37,6 +36,14 @@ export type ScheduleLabelsType = {
   deleteTime: string;
 };
 
+export type SelectInnerClassNames = {
+  control?: string;
+  singleValue?: string;
+  valueContainer?: string;
+  input?: string;
+  menu?: string;
+};
+
 export type FieldPathByValue<TFieldValues extends FieldValues, TValue> = {
   [Key in FieldPath<TFieldValues>]: FieldPathValue<TFieldValues, Key> extends TValue ? Key : never;
 }[FieldPath<TFieldValues>];
@@ -106,6 +113,7 @@ export const ScheduleDay = <TFieldValues extends FieldValues>({
               classNames={{
                 dayRanges: classNames?.dayRanges,
                 timeRangeField: classNames?.timeRangeField,
+                timePicker: classNames?.timePicker,
               }}
             />
             {!disabled && <div className="block">{CopyButton}</div>}
@@ -238,7 +246,7 @@ export const DayRanges = <TFieldValues extends FieldValues>({
   disabled?: boolean;
   labels?: ScheduleLabelsType;
   userTimeFormat: number | null;
-  classNames?: Pick<scheduleClassNames, "dayRanges" | "timeRangeField">;
+  classNames?: Pick<scheduleClassNames, "dayRanges" | "timeRangeField" | "timePicker">;
 }) => {
   const { t } = useLocale();
   const { getValues } = useFormContext();
@@ -261,6 +269,7 @@ export const DayRanges = <TFieldValues extends FieldValues>({
                 <TimeRangeField
                   className={classNames?.timeRangeField}
                   userTimeFormat={userTimeFormat}
+                  timePickerClassNames={classNames?.timePicker}
                   {...field}
                 />
               )}
@@ -336,11 +345,27 @@ const TimeRangeField = ({
   onChange,
   disabled,
   userTimeFormat,
+  timePickerClassNames,
 }: {
   className?: string;
   disabled?: boolean;
   userTimeFormat: number | null;
+  timePickerClassNames?: {
+    container?: string;
+    value?: string;
+    valueContainer?: string;
+    input?: string;
+    dropdown?: string;
+  };
 } & ControllerRenderProps) => {
+  const innerClassNames: SelectInnerClassNames = {
+    control: timePickerClassNames?.container,
+    singleValue: timePickerClassNames?.value,
+    valueContainer: timePickerClassNames?.valueContainer,
+    input: timePickerClassNames?.input,
+    menu: timePickerClassNames?.dropdown,
+  };
+
   // this is a controlled component anyway given it uses LazySelect, so keep it RHF agnostic.
   return (
     <div className={cn("flex flex-row gap-2 sm:gap-3", className)}>
@@ -350,6 +375,7 @@ const TimeRangeField = ({
         isDisabled={disabled}
         value={value.start}
         menuPlacement="bottom"
+        innerClassNames={innerClassNames}
         onChange={(option) => {
           const newStart = new Date(option?.value as number);
           if (newStart >= new Date(value.end)) {
@@ -368,6 +394,7 @@ const TimeRangeField = ({
         isDisabled={disabled}
         value={value.end}
         min={value.start}
+        innerClassNames={innerClassNames}
         menuPlacement="bottom"
         onChange={(option) => {
           onChange({ ...value, end: new Date(option?.value as number) });
@@ -389,6 +416,7 @@ const LazySelect = ({
   min?: ConfigType;
   max?: ConfigType;
   userTimeFormat: number | null;
+  innerClassNames?: SelectInnerClassNames;
 }) => {
   // Lazy-loaded options, otherwise adding a field has a noticeable redraw delay.
   const { options, filter } = useOptions(userTimeFormat);

packages/platform/atoms/availability/types.ts

@@ -28,6 +28,13 @@ export type scheduleClassNames = {
   timeRangeField?: string;
   labelAndSwitchContainer?: string;
   scheduleContainer?: string;
+  timePicker?: {
+    container?: string;
+    valueContainer?: string;
+    value?: string;
+    input?: string;
+    dropdown?: string;
+  };
 };
 
 export type AvailabilityFormValidationResult = {

packages/platform/examples/base/src/pages/availability.tsx

@@ -1,6 +1,6 @@
 import { Navbar } from "@/components/Navbar";
 import { Inter } from "next/font/google";
-import { useRef, useCallback, useState } from "react";
+import { useRef, useCallback } from "react";
 
 import type { AvailabilitySettingsFormRef } from "@calcom/atoms";
 import { AvailabilitySettings } from "@calcom/atoms";
@@ -57,6 +57,24 @@ export default function Availability(props: { calUsername: string; calEmail: str
             ctaClassName: "border p-4 rounded-md",
             editableHeadingClassName: "underline font-semibold",
             hiddenSwitchClassname: { thumb: "bg-red-500" },
+            scheduleClassNames: {
+              schedule: "bg-blue-50 border-2 border-blue-200 rounded-lg p-4",
+              scheduleDay: "bg-green-50 border border-green-300 rounded-md mb-2",
+              dayRanges: "bg-yellow-50 p-3 rounded border-l-4 border-yellow-400",
+              timeRangeField: "!text-2xl bg-red-50 border-2 border-red-300 rounded-xl px-4 py-2",
+              labelAndSwitchContainer: "bg-purple-50 border border-purple-200 rounded p-2",
+              scheduleContainer: "bg-gray-100 border-4 border-gray-400 rounded-2xl shadow-lg",
+              timePicker: {
+                container: "!bg-blue-900",
+                valueContainer: "!bg-pink-500",
+                value: "!bg-yellow-500",
+                input: "!bg-green-500",
+                dropdown: "!bg-cyan-500",
+              },
+            },
+            dateOverrideClassNames: {
+              container: "p-0",
+            },
           }}
           onFormStateChange={handleFormStateChange}
           onUpdateSuccess={() => {