maronato/cal
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor: event type settings improvements (#11615)

This commit is contained in:
Udit Takkar 2023-10-11 14:33:54 +05:30 committed by GitHub
parent 4f942e1a13
commit 226ac889c7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 97 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
apps/web/components/eventtype/EventAdvancedTab.tsx
View File

@ -130,7 +130,7 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
* a team event. Since we don't have logic to handle each attendee calendar (for now).
* This will fallback to each user selected destination calendar.
*/}
<div className="border-subtle space-y-6 rounded-md border p-6">
<div className="border-subtle space-y-6 rounded-lg border p-6">
{!!connectedCalendarsQuery.data?.connectedCalendars.length && !team && (
<div className="flex flex-col">
<div className="flex justify-between">
@ -182,9 +182,9 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
</div>
</div>
<BookerLayoutSelector fallbackToUserSettings isDark={selectedThemeIsDark} />
<BookerLayoutSelector fallbackToUserSettings isDark={selectedThemeIsDark} isOuterBorder={true} />
<div className="border-subtle space-y-6 rounded-md border p-6">
<div className="border-subtle space-y-6 rounded-lg border p-6">
<FormBuilder
title={t("booking_questions_title")}
description={t("booking_questions_description")}
@ -213,8 +213,9 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
defaultValue={eventType.requiresBookerEmailVerification}
render={({ field: { value, onChange } }) => (
<SettingsToggle
labelClassName="text-sm"
toggleSwitchAtTheEnd={true}
switchContainerClassName="border-subtle rounded-md border py-6 px-4 sm:px-6"
switchContainerClassName="border-subtle rounded-lg border py-6 px-4 sm:px-6"
title={t("requires_booker_email_verification")}
{...shouldLockDisableProps("requiresBookerEmailVerification")}
description={t("description_requires_booker_email_verification")}
@ -230,8 +231,9 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
defaultValue={eventType.hideCalendarNotes}
render={({ field: { value, onChange } }) => (
<SettingsToggle
labelClassName="text-sm"
toggleSwitchAtTheEnd={true}
switchContainerClassName="border-subtle rounded-md border py-6 px-4 sm:px-6"
switchContainerClassName="border-subtle rounded-lg border py-6 px-4 sm:px-6"
title={t("disable_notes")}
{...shouldLockDisableProps("hideCalendarNotes")}
description={t("disable_notes_description")}
@ -247,9 +249,10 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
render={({ field: { value, onChange } }) => (
<>
<SettingsToggle
labelClassName="text-sm"
toggleSwitchAtTheEnd={true}
switchContainerClassName={classNames(
"border-subtle rounded-md border py-6 px-4 sm:px-6",
"border-subtle rounded-lg border py-6 px-4 sm:px-6",
redirectUrlVisible && "rounded-b-none"
)}
childrenClassName="lg:ml-0"
@ -261,7 +264,7 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
setRedirectUrlVisible(e);
onChange(e ? value : "");
}}>
<div className="border-subtle rounded-b-md border border-t-0 p-6">
<div className="border-subtle rounded-b-lg border border-t-0 p-6">
<TextField
className="w-full"
label={t("redirect_success_booking")}
@ -287,20 +290,21 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
/>
<SettingsToggle
labelClassName="text-sm"
toggleSwitchAtTheEnd={true}
switchContainerClassName={classNames(
"border-subtle rounded-md border py-6 px-4 sm:px-6",
"border-subtle rounded-lg border py-6 px-4 sm:px-6",
hashedLinkVisible && "rounded-b-none"
)}
childrenClassName="lg:ml-0"
data-testid="hashedLinkCheck"
title={t("private_link")}
title={t("enable_private_url")}
Badge={
<a
target="_blank"
rel="noreferrer"
href="https://cal.com/docs/core-features/event-types/single-use-private-links">
<Info className="mb-2 ml-1.5 h-4 w-4 cursor-pointer" />
<Info className="ml-1.5 h-4 w-4 cursor-pointer" />
</a>
}
{...shouldLockDisableProps("hashedLinkCheck")}
@ -310,7 +314,7 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
formMethods.setValue("hashedLink", e ? hashedUrl : undefined);
setHashedLinkVisible(e);
}}>
<div className="border-subtle rounded-b-md border border-t-0 p-6">
<div className="border-subtle rounded-b-lg border border-t-0 p-6">
{!IS_VISUAL_REGRESSION_TESTING && (
<TextField
disabled
@ -353,9 +357,10 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
render={({ field: { value, onChange } }) => (
<>
<SettingsToggle
labelClassName="text-sm"
toggleSwitchAtTheEnd={true}
switchContainerClassName={classNames(
"border-subtle rounded-md border py-6 px-4 sm:px-6",
"border-subtle rounded-lg border py-6 px-4 sm:px-6",
value && "rounded-b-none"
)}
childrenClassName="lg:ml-0"
@ -379,13 +384,13 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
}
onChange(e);
}}>
<div className="border-subtle rounded-b-md border border-t-0 p-6">
<div className="border-subtle rounded-b-lg border border-t-0 p-6">
<Controller
name="seatsPerTimeSlot"
control={formMethods.control}
defaultValue={eventType.seatsPerTimeSlot}
render={({ field: { value, onChange } }) => (
<div className="lg:-ml-2">
<div>
<TextField
required
name="seatsPerTimeSlot"
@ -395,12 +400,13 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
disabled={seatsLocked.disabled}
defaultValue={value || 2}
min={1}
containerClassName="max-w-80"
addOnSuffix={<>{t("seats")}</>}
onChange={(e) => {
onChange(Math.abs(Number(e.target.value)));
}}
/>
<div className="mt-2">
<div className="mt-4">
<CheckboxField
description={t("show_attendees")}
disabled={seatsLocked.disabled}
@ -435,8 +441,9 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
render={({ field: { value, onChange } }) => (
<>
<SettingsToggle
labelClassName="text-sm"
toggleSwitchAtTheEnd={true}
switchContainerClassName="border-subtle rounded-md border py-6 px-4 sm:px-6"
switchContainerClassName="border-subtle rounded-lg border py-6 px-4 sm:px-6"
title={t("disable_attendees_confirmation_emails")}
description={t("disable_attendees_confirmation_emails_description")}
checked={value || false}
@ -459,8 +466,9 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
render={({ field: { value, onChange } }) => (
<>
<SettingsToggle
labelClassName="text-sm"
toggleSwitchAtTheEnd={true}
switchContainerClassName="border-subtle rounded-md border py-6 px-4 sm:px-6"
switchContainerClassName="border-subtle rounded-lg border py-6 px-4 sm:px-6"
title={t("disable_host_confirmation_emails")}
description={t("disable_host_confirmation_emails_description")}
checked={value || false}

23
apps/web/components/eventtype/EventLimitsTab.tsx
View File

@ -171,7 +171,7 @@ export const EventLimitsTab = ({ eventType }: Pick<EventTypeSetupProps, "eventTy
return (
<div>
<div className="border-subtle space-y-6 rounded-md border p-6">
<div className="border-subtle space-y-6 rounded-lg border p-6">
<div className="flex flex-col space-y-4 lg:flex-row lg:space-x-4 lg:space-y-0">
<div className="w-full">
<Label htmlFor="beforeBufferTime">
@ -303,6 +303,7 @@ export const EventLimitsTab = ({ eventType }: Pick<EventTypeSetupProps, "eventTy
return (
<SettingsToggle
toggleSwitchAtTheEnd={true}
labelClassName="text-sm"
title={t("limit_booking_frequency")}
{...bookingLimitsLocked}
description={t("limit_booking_frequency_description")}
@ -317,11 +318,11 @@ export const EventLimitsTab = ({ eventType }: Pick<EventTypeSetupProps, "eventTy
}
}}
switchContainerClassName={classNames(
"border-subtle mt-6 rounded-md border py-6 px-4 sm:px-6",
"border-subtle mt-6 rounded-lg border py-6 px-4 sm:px-6",
isChecked && "rounded-b-none"
)}
childrenClassName="lg:ml-0">
<div className="border-subtle rounded-b-md border border-t-0 p-6">
<div className="border-subtle rounded-b-lg border border-t-0 p-6">
<IntervalLimitsManager
disabled={bookingLimitsLocked.disabled}
propertyName="bookingLimits"
@ -340,9 +341,10 @@ export const EventLimitsTab = ({ eventType }: Pick<EventTypeSetupProps, "eventTy
const isChecked = Object.keys(value ?? {}).length > 0;
return (
<SettingsToggle
labelClassName="text-sm"
toggleSwitchAtTheEnd={true}
switchContainerClassName={classNames(
"border-subtle mt-6 rounded-md border py-6 px-4 sm:px-6",
"border-subtle mt-6 rounded-lg border py-6 px-4 sm:px-6",
isChecked && "rounded-b-none"
)}
childrenClassName="lg:ml-0"
@ -359,7 +361,7 @@ export const EventLimitsTab = ({ eventType }: Pick<EventTypeSetupProps, "eventTy
formMethods.setValue("durationLimits", {});
}
}}>
<div className="border-subtle rounded-b-md border border-t-0 p-6">
<div className="border-subtle rounded-b-lg border border-t-0 p-6">
<IntervalLimitsManager
propertyName="durationLimits"
defaultLimit={60}
@ -380,9 +382,10 @@ export const EventLimitsTab = ({ eventType }: Pick<EventTypeSetupProps, "eventTy
return (
<SettingsToggle
labelClassName="text-sm"
toggleSwitchAtTheEnd={true}
switchContainerClassName={classNames(
"border-subtle mt-6 rounded-md border py-6 px-4 sm:px-6",
"border-subtle mt-6 rounded-lg border py-6 px-4 sm:px-6",
isChecked && "rounded-b-none"
)}
childrenClassName="lg:ml-0"
@ -391,7 +394,7 @@ export const EventLimitsTab = ({ eventType }: Pick<EventTypeSetupProps, "eventTy
{...periodTypeLocked}
checked={isChecked}
onCheckedChange={(bool) => formMethods.setValue("periodType", bool ? "ROLLING" : "UNLIMITED")}>
<div className="border-subtle rounded-b-md border border-t-0 p-6">
<div className="border-subtle rounded-b-lg border border-t-0 p-6">
<RadioGroup.Root
defaultValue={watchPeriodType}
value={watchPeriodType}
@ -478,9 +481,10 @@ export const EventLimitsTab = ({ eventType }: Pick<EventTypeSetupProps, "eventTy
}}
/>
<SettingsToggle
labelClassName="text-sm"
toggleSwitchAtTheEnd={true}
switchContainerClassName={classNames(
"border-subtle mt-6 rounded-md border py-6 px-4 sm:px-6",
"border-subtle mt-6 rounded-lg border py-6 px-4 sm:px-6",
offsetToggle && "rounded-b-none"
)}
childrenClassName="lg:ml-0"
@ -494,10 +498,11 @@ export const EventLimitsTab = ({ eventType }: Pick<EventTypeSetupProps, "eventTy
formMethods.setValue("offsetStart", 0);
}
}}>
<div className="border-subtle rounded-b-md border border-t-0 p-6">
<div className="border-subtle rounded-b-lg border border-t-0 p-6">
<TextField
required
type="number"
containerClassName="max-w-80"
{...offsetStartLockedProps}
label={t("offset_start")}
{...formMethods.register("offsetStart")}

6
apps/web/components/eventtype/EventSetupTab.tsx
View File

@ -392,7 +392,7 @@ export const EventSetupTab = (
return (
<div>
<div className="space-y-4">
<div className="border-subtle space-y-6 rounded-md border p-6">
<div className="border-subtle space-y-6 rounded-lg border p-6">
<TextField
required
label={t("title")}
@ -431,7 +431,7 @@ export const EventSetupTab = (
})}
/>
</div>
<div className="border-subtle rounded-md border p-6">
<div className="border-subtle rounded-lg border p-6">
{multipleDuration ? (
<div className="space-y-6">
<div>
@ -527,7 +527,7 @@ export const EventSetupTab = (
)}
</div>
<div className="border-subtle rounded-md border p-6">
<div className="border-subtle rounded-lg border p-6">
<div>
<Skeleton as={Label} loadingClassName="w-16">
{t("location")}

4
apps/web/components/eventtype/EventWebhooksTab.tsx
View File

@ -124,7 +124,7 @@ export const EventWebhooksTab = ({ eventType }: Pick<EventTypeSetupProps, "event
{t("add_webhook_description", { appName: APP_NAME })}
</p>
<div className="border-subtle mt-8 rounded-md border">
<div className="border-subtle my-8 rounded-md border">
{webhooks.map((webhook, index) => {
return (
<WebhookListItem
@ -141,7 +141,7 @@ export const EventWebhooksTab = ({ eventType }: Pick<EventTypeSetupProps, "event
})}
</div>
<p className="text-default mt-8 text-sm font-normal">
<p className="text-default text-sm font-normal">
<Trans i18nKey="edit_or_manage_webhooks">
If you wish to edit or manage your web hooks, please head over to &nbsp;
<Link

5
apps/web/components/eventtype/RecurringEventController.tsx
View File

@ -53,9 +53,10 @@ export default function RecurringEventController({
title="Experimental: Recurring Events are currently experimental and causes some issues sometimes when checking for availability. We are working on fixing this."
/>
<SettingsToggle
labelClassName="text-sm"
toggleSwitchAtTheEnd={true}
switchContainerClassName={classNames(
"border-subtle rounded-md border py-6 px-4 sm:px-6",
"border-subtle rounded-lg border py-6 px-4 sm:px-6",
recurringEventState !== null && "rounded-b-none"
)}
childrenClassName="lg:ml-0"
@ -78,7 +79,7 @@ export default function RecurringEventController({
setRecurringEventState(newVal);
}
}}>
<div className="border-subtle rounded-b-md border border-t-0 p-6">
<div className="border-subtle rounded-b-lg border border-t-0 p-6">
{recurringEventState && (
<div data-testid="recurring-event-collapsible" className="text-sm">
<div className="flex items-center">

7
apps/web/components/eventtype/RequiresConfirmationController.tsx
View File

@ -67,9 +67,10 @@ export default function RequiresConfirmationController({
control={formMethods.control}
render={() => (
<SettingsToggle
labelClassName="text-sm"
toggleSwitchAtTheEnd={true}
switchContainerClassName={classNames(
"border-subtle rounded-md border py-6 px-4 sm:px-6",
"border-subtle rounded-lg border py-6 px-4 sm:px-6",
requiresConfirmation && "rounded-b-none"
)}
childrenClassName="lg:ml-0"
@ -83,7 +84,7 @@ export default function RequiresConfirmationController({
formMethods.setValue("requiresConfirmation", val);
onRequiresConfirmation(val);
}}>
<div className="border-subtle rounded-b-md border border-t-0 p-6">
<div className="border-subtle rounded-b-lg border border-t-0 p-6">
<RadioGroup.Root
defaultValue={
requiresConfirmation
@ -147,7 +148,7 @@ export default function RequiresConfirmationController({
val
);
}}
className="border-default !m-0 block w-16 rounded-r-none border-r-0 text-sm [appearance:textfield]"
className="border-default !m-0 block w-16 rounded-r-none border-r-0 text-sm [appearance:textfield] focus:z-10 focus:border-r"
defaultValue={metadata?.requiresConfirmationThreshold?.time || 30}
/>
<label

3
apps/web/public/static/locales/en/common.json
View File

@ -333,7 +333,7 @@
"bookerlayout_error_min_one_enabled": "At least one layout has to be enabled.",
"bookerlayout_error_default_not_enabled": "The layout you selected as the default view is not part of the enabled layouts.",
"bookerlayout_error_unknown_layout": "The layout you selected is not a valid layout.",
"bookerlayout_override_global_settings": "You can manage this for all your event types in <2>settings / appearance</2> or <6>override for this event only</6>.",
"bookerlayout_override_global_settings": "You can manage this for all your event types in Settings -> <2>Appearance</2> or <6>Override</6> for this event only.",
"unexpected_error_try_again": "An unexpected error occurred. Try again.",
"sunday_time_error": "Invalid time on Sunday",
"monday_time_error": "Invalid time on Monday",
@ -783,6 +783,7 @@
"disable_guests": "Disable Guests",
"disable_guests_description": "Disable adding additional guests while booking.",
"private_link": "Generate private link",
"enable_private_url": "Enable Private URL",
"private_link_label": "Private link",
"private_link_hint": "Your private link will regenerate after each use",
"copy_private_link": "Copy private link",

6
packages/features/form-builder/FormBuilder.tsx
View File

@ -107,12 +107,12 @@ export const FormBuilder = function FormBuilder({
return (
<div>
<div>
<div className="text-default text-sm font-semibold ltr:mr-1 rtl:ml-1">
<div className="text-default text-sm font-semibold leading-none ltr:mr-1 rtl:ml-1">
{title}
{LockedIcon}
</div>
<p className="text-subtle max-w-[280px] break-words py-1 text-sm sm:max-w-[500px]">{description}</p>
<ul ref={parent} className="border-subtle divide-subtle mt-2 divide-y rounded-md border">
<p className="text-subtle mt-0.5 max-w-[280px] break-words text-sm sm:max-w-[500px]">{description}</p>
<ul ref={parent} className="border-subtle divide-subtle mt-4 divide-y rounded-md border">
{fields.map((field, index) => {
const options = field.options
? field.options

51
packages/features/settings/BookerLayoutSelector.tsx
View File

@ -34,6 +34,7 @@ type BookerLayoutSelectorProps = {
isDark?: boolean;
isDisabled?: boolean;
isOuterBorder?: boolean;
};
const defaultFieldName = "metadata.bookerLayouts";
@ -45,6 +46,7 @@ export const BookerLayoutSelector = ({
fallbackToUserSettings,
isDark,
isDisabled = false,
isOuterBorder = false,
}: BookerLayoutSelectorProps) => {
const { control, getValues } = useFormContext();
const { t } = useLocale();
@ -55,10 +57,12 @@ export const BookerLayoutSelector = ({
if (flags["booker-layouts"] !== true) return null;
return (
<div>
<div className="border-subtle rounded-t-xl border p-6">
<Label className="mb-0 text-base font-semibold">{title ? title : t("layout")}</Label>
<p className="text-subtle max-w-full break-words py-1 text-sm">
<div className={classNames(isOuterBorder && "border-subtle rounded-lg border p-6")}>
<div className={classNames(isOuterBorder ? "pb-5" : "border-subtle rounded-t-xl border p-6")}>
<Label className={classNames("mb-1 font-semibold", isOuterBorder ? "text-sm" : "text-base")}>
{title ? title : t("layout")}
</Label>
<p className="text-subtle max-w-full break-words text-sm leading-tight">
{description ? description : t("bookerlayout_description")}
</p>
</div>
@ -75,12 +79,15 @@ export const BookerLayoutSelector = ({
settings={value}
onChange={onChange}
isDark={isDark}
isOuterBorder={isOuterBorder}
/>
<SectionBottomActions align="end">
<Button type="submit" disabled={isDisabled} color="primary">
{t("update")}
</Button>
</SectionBottomActions>
{!isOuterBorder && (
<SectionBottomActions align="end">
<Button type="submit" disabled={isDisabled} color="primary">
{t("update")}
</Button>
</SectionBottomActions>
)}
</>
)}
/>
@ -93,11 +100,18 @@ type BookerLayoutFieldsProps = {
onChange: (settings: BookerLayoutSettings) => void;
showUserSettings: boolean;
isDark?: boolean;
isOuterBorder?: boolean;
};
type BookerLayoutState = { [key in BookerLayouts]: boolean };
const BookerLayoutFields = ({ settings, onChange, showUserSettings, isDark }: BookerLayoutFieldsProps) => {
const BookerLayoutFields = ({
settings,
onChange,
showUserSettings,
isDark,
isOuterBorder,
}: BookerLayoutFieldsProps) => {
const { t } = useLocale();
const { isLoading: isUserLoading, data: user } = useMeQuery();
const [isOverridingSettings, setIsOverridingSettings] = useState(false);
@ -153,9 +167,8 @@ const BookerLayoutFields = ({ settings, onChange, showUserSettings, isDark }: Bo
// Sent default layout settings to form, otherwise it would still have 'null' as it's value.
if (user?.defaultBookerLayouts) onChange(user.defaultBookerLayouts);
};
return (
<div className="border-subtle space-y-5 border-x px-6 py-8">
<div className={classNames("space-y-5", !isOuterBorder && "border-subtle border-x px-6 py-8")}>
<div
className={classNames(
"flex flex-col gap-5 transition-opacity sm:flex-row sm:gap-3",
@ -191,7 +204,7 @@ const BookerLayoutFields = ({ settings, onChange, showUserSettings, isDark }: Bo
<Label>{t("bookerlayout_default_title")}</Label>
<RadioGroup.Root
key={defaultLayout}
className="border-default flex w-full gap-2 rounded-md border p-1"
className="border-subtle flex w-full gap-2 rounded-md border p-1"
defaultValue={defaultLayout}
onValueChange={(layout: BookerLayouts) => onDefaultLayoutChange(layout)}>
{bookerLayoutOptions.map((layout) => (
@ -209,18 +222,18 @@ const BookerLayoutFields = ({ settings, onChange, showUserSettings, isDark }: Bo
{disableFields && (
<p className="text-sm">
<Trans i18nKey="bookerlayout_override_global_settings">
You can manage this for all your event types in{" "}
You can manage this for all your event types in Settings {"-> "}
<Link href="/settings/my-account/appearance" className="underline">
settings / appearance
Appearance
</Link>{" "}
or{" "}
<Button
onClick={onOverrideSettings}
color="minimal"
className="p-0 font-normal underline hover:bg-transparent focus-visible:bg-transparent">
override for this event only
</Button>
.
className="h-fit p-0 font-normal underline hover:bg-transparent focus-visible:bg-transparent">
Override
</Button>{" "}
for this event only.
</Trans>
</p>
)}

4
packages/ui/components/arrow-button/ArrowButton.tsx
View File

@ -10,13 +10,13 @@ export function ArrowButton(props: ArrowButtonProps) {
<>
{props.arrowDirection === "up" ? (
<button
className="bg-default text-muted hover:text-emphasis border-default hover:border-emphasis invisible absolute left-[5px] -ml-4 -mt-4 mb-4 hidden h-6 w-6 scale-0 items-center justify-center rounded-md border p-1 transition-all group-hover:visible group-hover:scale-100 sm:ml-0 sm:flex lg:left-[12px]"
className="bg-default text-muted hover:text-emphasis border-default hover:border-emphasis invisible absolute left-0 -ml-4 -mt-4 mb-4 hidden h-6 w-6 scale-0 items-center justify-center rounded-md border p-1 transition-all group-hover:visible group-hover:scale-100 sm:ml-0 sm:flex lg:left-3"
onClick={props.onClick}>
<ArrowUp className="h-5 w-5" />
</button>
) : (
<button
className="bg-default text-muted border-default hover:text-emphasis hover:border-emphasis invisible absolute left-[5px] -ml-4 mt-8 hidden h-6 w-6 scale-0 items-center justify-center rounded-md border p-1 transition-all group-hover:visible group-hover:scale-100 sm:ml-0 sm:flex lg:left-[12px]"
className="bg-default text-muted border-default hover:text-emphasis hover:border-emphasis invisible absolute left-0 -ml-4 mt-8 hidden h-6 w-6 scale-0 items-center justify-center rounded-md border p-1 transition-all group-hover:visible group-hover:scale-100 sm:ml-0 sm:flex lg:left-3"
onClick={props.onClick}>
<ArrowDown className="h-5 w-5" />
</button>

5
packages/ui/components/form/inputs/Label.tsx
View File

@ -1,10 +1,11 @@
import { classNames } from "@calcom/lib";
export function Label(props: JSX.IntrinsicElements["label"]) {
const { className, ...restProps } = props;
return (
<label
{...props}
className={classNames("text-default text-emphasis mb-2 block text-sm font-medium", props.className)}>
className={classNames("text-default text-emphasis mb-2 block text-sm font-medium", className)}
{...restProps}>
{props.children}
</label>
);

5
packages/ui/components/form/switch/SettingsToggle.tsx
View File

@ -20,6 +20,7 @@ type Props = {
toggleSwitchAtTheEnd?: boolean;
childrenClassName?: string;
switchContainerClassName?: string;
labelClassName?: string;
};
function SettingsToggle({
@ -35,6 +36,7 @@ function SettingsToggle({
toggleSwitchAtTheEnd = false,
childrenClassName,
switchContainerClassName,
labelClassName,
...rest
}: Props) {
const [animateRef] = useAutoAnimate<HTMLDivElement>();
@ -47,7 +49,8 @@ function SettingsToggle({
<div className={classNames("flex justify-between space-x-3", switchContainerClassName)}>
<div>
<div className="flex items-center">
<Label className="text-emphasis text-base font-semibold leading-none">
<Label
className={classNames("mt-0.5 text-base font-semibold leading-none", labelClassName)}>
{title}
{LockedIcon}
</Label>