feat: calendar settings headers styles

Author: supalarry

packages/platform/atoms/calendar-settings/wrappers/CalendarSettingsPlatformWrapper.tsx

@@ -1,12 +1,19 @@
+import type { DestinationHeaderClassnames } from "destination-calendar/DestinationCalendar";
+
 import { DestinationCalendarSettingsPlatformWrapper } from "../../destination-calendar/index";
 import { SelectedCalendarsSettingsPlatformWrapper } from "../../selected-calendars/index";
-import type { CalendarRedirectUrls } from "../../selected-calendars/wrappers/SelectedCalendarsSettingsPlatformWrapper";
+import type {
+  CalendarRedirectUrls,
+  SelectedCalendarsHeaderClassnames,
+} from "../../selected-calendars/wrappers/SelectedCalendarsSettingsPlatformWrapper";
 
 type CalendarSettingsPlatformWrapperProps = {
   classNames?: {
     calendarSettingsCustomClassnames?: string;
     destinationCalendarSettingsCustomClassnames?: string;
     selectedCalendarSettingsCustomClassnames?: string;
+    selectedCalendarSettingsHeaderClassNames?: SelectedCalendarsHeaderClassnames;
+    destinationCalendarSettingsHeaderClassNames?: DestinationHeaderClassnames;
   };
   calendarRedirectUrls?: CalendarRedirectUrls;
   allowDelete?: boolean;
@@ -24,13 +31,15 @@ export const CalendarSettingsPlatformWrapper = ({
       <DestinationCalendarSettingsPlatformWrapper
         statusLoader={<></>}
         classNames={classNames?.destinationCalendarSettingsCustomClassnames}
+        headerClassNames={classNames?.destinationCalendarSettingsHeaderClassNames}
         isDryRun={isDryRun}
       />
       <SelectedCalendarsSettingsPlatformWrapper
         classNames={classNames?.selectedCalendarSettingsCustomClassnames}
         calendarRedirectUrls={calendarRedirectUrls}
         allowDelete={allowDelete}
         isDryRun={isDryRun}
+        headerClassNames={classNames?.selectedCalendarSettingsHeaderClassNames}
       />
     </div>
   );

packages/platform/atoms/destination-calendar/DestinationCalendar.tsx

@@ -5,12 +5,19 @@ import { cn } from "../src/lib/utils";
 import type { DestinationCalendarProps } from "./DestinationCalendarSelector";
 import { DestinationCalendarSelector } from "./DestinationCalendarSelector";
 
-export const DestinationCalendarSettings = (props: DestinationCalendarProps & { classNames?: string }) => {
+export type DestinationHeaderClassnames = {
+  title?: string;
+  description?: string;
+};
+
+export const DestinationCalendarSettings = (
+  props: DestinationCalendarProps & { classNames?: string; headerClassNames?: DestinationHeaderClassnames }
+) => {
   const { t } = useLocale();
 
   return (
     <div className={cn("border-subtle mb-6 mt-8 rounded-lg border", props?.classNames)}>
-      <DestinationCalendarSettingsHeading />
+      <DestinationCalendarSettingsHeading classNames={props.headerClassNames} />
       <div className="border-t">
         <div className="border-subtle flex w-full flex-col space-y-3 border-y-0 p-6">
           <div>
@@ -23,15 +30,17 @@ export const DestinationCalendarSettings = (props: DestinationCalendarProps & {
   );
 };
 
-const DestinationCalendarSettingsHeading = () => {
+const DestinationCalendarSettingsHeading = ({ classNames }: { classNames?: DestinationHeaderClassnames }) => {
   const { t } = useLocale();
 
   return (
     <div className="p-6">
-      <h2 className="text-emphasis mb-1 text-base font-bold leading-5 tracking-wide">
+      <h2 className={cn("text-emphasis mb-1 text-base font-bold leading-5 tracking-wide", classNames?.title)}>
         {t("add_to_calendar")}
       </h2>
-      <p className="text-subtle text-sm leading-tight">{t("add_to_calendar_description")}</p>
+      <p className={cn("text-subtle text-sm leading-tight", classNames?.description)}>
+        {t("add_to_calendar_description")}
+      </p>
     </div>
   );
 };

packages/platform/atoms/destination-calendar/wrappers/DestinationCalendarSettingsPlatformWrapper.tsx

@@ -1,15 +1,18 @@
 import { useUpdateDestinationCalendars } from "../../hooks/calendars/useUpdateDestinationCalendars";
 import { useConnectedCalendars } from "../../hooks/useConnectedCalendars";
 import { AtomsWrapper } from "../../src/components/atoms-wrapper";
+import type { DestinationHeaderClassnames } from "../DestinationCalendar";
 import { DestinationCalendarSettings } from "../DestinationCalendar";
 
 export const DestinationCalendarSettingsPlatformWrapper = ({
   statusLoader,
   classNames = "mx-5",
+  headerClassNames,
   isDryRun = false,
 }: {
   statusLoader?: JSX.Element;
   classNames?: string;
+  headerClassNames?: DestinationHeaderClassnames;
   isDryRun?: boolean;
 }) => {
   const calendars = useConnectedCalendars({});
@@ -35,6 +38,7 @@ export const DestinationCalendarSettingsPlatformWrapper = ({
     <AtomsWrapper>
       <DestinationCalendarSettings
         classNames={classNames}
+        headerClassNames={headerClassNames}
         connectedCalendars={calendars.data.connectedCalendars}
         destinationCalendar={calendars.data.destinationCalendar}
         value={calendars.data.destinationCalendar.externalId}

packages/platform/atoms/selected-calendars/wrappers/SelectedCalendarsSettingsPlatformWrapper.tsx

@@ -4,6 +4,7 @@ import type { ICalendarSwitchProps } from "@calcom/features/calendars/CalendarSw
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import type { CALENDARS } from "@calcom/platform-constants";
 import { QueryCell } from "@calcom/trpc/components/QueryCell";
+import cn from "@calcom/ui/classNames";
 import { Alert } from "@calcom/ui/components/alert";
 import { AppListCard } from "@calcom/ui/components/app-list-card";
 import type { ButtonProps } from "@calcom/ui/components/button";
@@ -31,6 +32,7 @@ export type CalendarRedirectUrls = {
 
 type SelectedCalendarsSettingsPlatformWrapperProps = {
   classNames?: string;
+  headerClassNames?: SelectedCalendarsHeaderClassnames;
   calendarRedirectUrls?: CalendarRedirectUrls;
   allowDelete?: boolean;
   isDryRun?: boolean;
@@ -41,6 +43,7 @@ export const SelectedCalendarsSettingsPlatformWrapper = ({
   calendarRedirectUrls,
   allowDelete,
   isDryRun,
+  headerClassNames,
 }: SelectedCalendarsSettingsPlatformWrapperProps) => {
   const { t } = useLocale();
   const query = useConnectedCalendars({});
@@ -57,6 +60,7 @@ export const SelectedCalendarsSettingsPlatformWrapper = ({
               return (
                 <SelectedCalendarsSettings classNames={classNames}>
                   <SelectedCalendarsSettingsHeading
+                    classNames={headerClassNames}
                     calendarRedirectUrls={calendarRedirectUrls}
                     isDryRun={isDryRun}
                   />
@@ -68,6 +72,7 @@ export const SelectedCalendarsSettingsPlatformWrapper = ({
             return (
               <SelectedCalendarsSettings classNames={classNames}>
                 <SelectedCalendarsSettingsHeading
+                  classNames={headerClassNames}
                   calendarRedirectUrls={calendarRedirectUrls}
                   isDryRun={isDryRun}
                 />
@@ -156,21 +161,32 @@ export const SelectedCalendarsSettingsPlatformWrapper = ({
   );
 };
 
+export type SelectedCalendarsHeaderClassnames = {
+  title?: string;
+  description?: string;
+};
+
 const SelectedCalendarsSettingsHeading = ({
   calendarRedirectUrls,
   isDryRun,
+  classNames,
 }: {
   calendarRedirectUrls?: CalendarRedirectUrls;
   isDryRun?: boolean;
+  classNames?: SelectedCalendarsHeaderClassnames;
 }) => {
   const { t } = useLocale();
 
   return (
     <div className="border-subtle border-b p-6">
       <div className="flex items-center justify-between">
         <div>
-          <h4 className="text-emphasis text-base font-semibold leading-5">{t("check_for_conflicts")}</h4>
-          <p className="text-default text-sm leading-tight">{t("select_calendars")}</p>
+          <h4 className={cn("text-emphasis text-base font-semibold leading-5", classNames?.title)}>
+            {t("check_for_conflicts")}
+          </h4>
+          <p className={cn("text-default text-sm leading-tight", classNames?.description)}>
+            {t("select_calendars")}
+          </p>
         </div>
         <div className="flex flex-col xl:flex-row xl:space-x-5">
           <div className="flex items-center">