Merge branch 'main' of https://github.com/calcom/cal.com

apps/web/components/eventtype/EventSetupTab.tsx

@@ -34,6 +34,16 @@ const getLocationFromType = (
   }
 };
 
+const getDefaultLocationValue = (options: EventTypeSetupProps["locationOptions"], type: string) => {
+  for (const locationType of options) {
+    for (const location of locationType.options) {
+      if (location.value === type && location.disabled === false) {
+        return location;
+      }
+    }
+  }
+};
+
 export const EventSetupTab = (
   props: Pick<EventTypeSetupProps, "eventType" | "locationOptions" | "team" | "teamMembers">
 ) => {
@@ -138,7 +148,8 @@ export const EventSetupTab = (
       return true;
     });
 
-    const defaultValue = locationOptions.find((item) => item.label === "video")?.options;
+    const defaultValue = getDefaultLocationValue(locationOptions, "integrations:daily");
+
     return (
       <div className="w-full">
         {validLocations.length === 0 && (

apps/web/pages/availability/[schedule].tsx

@@ -51,7 +51,7 @@ const DateOverride = ({ workingHours }: { workingHours: WorkingHours[] }) => {
   });
   const { t } = useLocale();
   return (
-    <div className="px-4 py-5 sm:p-6">
+    <div className="p-6">
       <h3 className="font-medium leading-6 text-gray-900">
         {t("date_overrides")}{" "}
         <Tooltip content={t("date_overrides_info")}>
@@ -60,8 +60,8 @@ const DateOverride = ({ workingHours }: { workingHours: WorkingHours[] }) => {
           </span>
         </Tooltip>
       </h3>
-      <p className="mb-4 text-sm text-gray-500 ltr:mr-4 rtl:ml-4">{t("date_overrides_subtitle")}</p>
-      <div className="mt-1 space-y-2">
+      <p className="mb-4 text-sm text-gray-500">{t("date_overrides_subtitle")}</p>
+      <div className="space-y-2">
         <DateOverrideList
           excludedDates={fields.map((field) => yyyymmdd(field.ranges[0].start))}
           remove={remove}
@@ -148,7 +148,7 @@ export default function Availability({ schedule }: { schedule: number }) {
         )
       }
       CTA={
-        <div className="flex items-center justify-end">
+        <div className="mr-10 flex items-center justify-end xl:mr-36">
           <div className="flex items-center rounded-md px-2 sm:hover:bg-gray-100">
             <Skeleton
               as={Label}
@@ -185,25 +185,29 @@ export default function Availability({ schedule }: { schedule: number }) {
               ...values,
             });
           }}
-          className="flex flex-col pb-16 pt-4 sm:mx-0 md:pt-0 xl:flex-row xl:space-x-6">
-          <div className="flex-1 divide-y divide-gray-200 rounded-md border">
-            <div className=" py-5 sm:p-6">
-              {typeof me.data?.weekStart === "string" && (
-                <Schedule
-                  control={control}
-                  name="schedule"
-                  weekStart={
-                    ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"].indexOf(
-                      me.data?.weekStart
-                    ) as 0 | 1 | 2 | 3 | 4 | 5 | 6
-                  }
-                />
-              )}
+          className="flex flex-col sm:mx-0 xl:flex-row xl:space-x-6">
+          <div className="mx-10 flex-1 flex-row xl:mr-0 xl:ml-36">
+            <div className="mb-6 rounded-md border">
+              <div>
+                {typeof me.data?.weekStart === "string" && (
+                  <Schedule
+                    control={control}
+                    name="schedule"
+                    weekStart={
+                      ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"].indexOf(
+                        me.data?.weekStart
+                      ) as 0 | 1 | 2 | 3 | 4 | 5 | 6
+                    }
+                  />
+                )}
+              </div>
+            </div>
+            <div className="my-6 rounded-md border">
+              {data?.workingHours && <DateOverride workingHours={data.workingHours} />}
             </div>
-            {data?.workingHours && <DateOverride workingHours={data.workingHours} />}
           </div>
-          <div className="min-w-40 col-span-3 space-y-2 lg:col-span-1">
-            <div className="xl:max-w-80 mt-4 w-full pr-4 sm:p-0">
+          <div className="min-w-40 col-span-3 ml-10 space-y-2 lg:col-span-1 xl:ml-36">
+            <div className="xl:max-w-80 w-full pr-4 sm:ml-0 sm:mr-36 sm:p-0">
               <div>
                 <label htmlFor="timeZone" className="block text-sm font-medium text-gray-700">
                   {t("timezone")}
@@ -223,7 +227,7 @@ export default function Availability({ schedule }: { schedule: number }) {
                   }
                 />
               </div>
-              <hr className="my-8" />
+              <hr className="my-6 mr-8" />
               <div className="rounded-md">
                 <h3 className="text-sm font-medium text-gray-900">{t("something_doesnt_look_right")}</h3>
                 <div className="mt-3 flex">

packages/features/schedules/components/Schedule.tsx

@@ -51,9 +51,9 @@ const ScheduleDay = <TFieldValues extends FieldValues>({
   const watchDayRange = watch(name);
 
   return (
-    <div className="mb-1 flex w-full flex-col px-5 py-1 sm:flex-row sm:px-0">
+    <div className="mb-4 flex w-full flex-col last:mb-0 sm:flex-row sm:px-0">
       {/* Label & switch container */}
-      <div className="flex h-11 items-center justify-between sm:w-32">
+      <div className="flex h-[36px] items-center justify-between sm:w-32">
         <div>
           <label className="flex flex-row items-center space-x-2 rtl:space-x-reverse">
             <div>
@@ -67,9 +67,7 @@ const ScheduleDay = <TFieldValues extends FieldValues>({
               />
             </div>
             <span className="inline-block min-w-[88px] text-sm capitalize">{weekday}</span>
-            {watchDayRange && !!watchDayRange.length && (
-              <div className="mt-1 mb-1 sm:hidden">{CopyButton}</div>
-            )}
+            {watchDayRange && !!watchDayRange.length && <div className="sm:hidden">{CopyButton}</div>}
           </label>
         </div>
       </div>
@@ -77,7 +75,7 @@ const ScheduleDay = <TFieldValues extends FieldValues>({
         {watchDayRange ? (
           <div className="flex sm:ml-2">
             <DayRanges control={control} name={name} />
-            {!!watchDayRange.length && <div className="mt-1 hidden sm:block">{CopyButton}</div>}
+            {!!watchDayRange.length && <div className="hidden sm:block">{CopyButton}</div>}
           </div>
         ) : (
           <SkeletonText className="mt-2.5 ml-1 h-6 w-48" />
@@ -142,7 +140,7 @@ const Schedule = <
   const { i18n } = useLocale();
 
   return (
-    <div className="divide-y sm:divide-none">
+    <div className="divide-y p-4 sm:divide-none">
       {/* First iterate for each day */}
       {weekdayNames(i18n.language, weekStart, "long").map((weekday, num) => {
         const weekdayIndex = (num + weekStart) % 7;
@@ -179,7 +177,7 @@ export const DayRanges = <TFieldValues extends FieldValues>({
     <div>
       {fields.map((field, index: number) => (
         <Fragment key={field.id}>
-          <div className="mb-2 flex first:mt-1">
+          <div className="mb-2 flex last:mb-0">
             <Controller name={`${name}.${index}`} render={({ field }) => <TimeRangeField {...field} />} />
             {index === 0 && (
               <Button
@@ -230,7 +228,7 @@ const TimeRangeField = ({ className, value, onChange }: { className?: string } &
   return (
     <div className={className}>
       <LazySelect
-        className="inline-block h-9 w-[100px]"
+        className="inline-block w-[100px]"
         value={value.start}
         max={value.end}
         onChange={(option) => {

packages/features/shell/Shell.tsx

@@ -783,7 +783,12 @@ export function ShellMain(props: LayoutProps) {
 
   return (
     <>
-      <div className={classNames("flex items-center", props.smallHeading ? "md:mb-7" : "md:mb-8")}>
+      <div
+        className={classNames(
+          "mb-6 flex items-center sm:mt-0",
+          props.smallHeading ? "lg:mb-7" : "lg:mb-8",
+          props.backPath === "/availability" && "ml-2.5 xl:ml-[7rem]"
+        )}>
         {!!props.backPath && (
           <Button
             variant="icon"

packages/ui/components/form/select/components.tsx

@@ -80,7 +80,7 @@ export const ControlComponent = <
     {...props}
     className={classNames(
       className,
-      "dark:bg-darkgray-100 dark:border-darkgray-300 border-gray-300 bg-white text-sm leading-4 placeholder:text-sm placeholder:font-normal focus-within:border-0 focus-within:ring-2 focus-within:ring-neutral-800 hover:border-neutral-400 dark:focus-within:ring-white"
+      "dark:bg-darkgray-100 dark:border-darkgray-300 !min-h-9 h-9 border-gray-300 bg-white text-sm leading-4 placeholder:text-sm placeholder:font-normal focus-within:border-0 focus-within:ring-2 focus-within:ring-neutral-800 hover:border-neutral-400 dark:focus-within:ring-white"
     )}
   />
 );