public-offering
/
cal.pub0.org
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: toggle alligment (#4361)

pull/4357/head^2
Udit Takkar 2022-09-10 23:04:38 +05:30 committed by GitHub
parent 3ce687c0a4
commit c215f7de03
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 17 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
apps/web/components/v2/eventtype/EventAdvancedTab.tsx
View File

@ -123,6 +123,7 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupInfered
<div className="flex space-x-3 "> <div className="flex space-x-3 ">
<Switch <Switch
checked={customInputs.length > 0} checked={customInputs.length > 0}
fitToHeight={true}
onCheckedChange={(e) => { onCheckedChange={(e) => {
if (e && customInputs.length === 0) { if (e && customInputs.length === 0) {
// Push a placeholders // Push a placeholders
@ -134,7 +135,7 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupInfered
} }
}} }}
/> />
<div className="relative top-2 flex flex-col"> <div className="flex flex-col">
<Label className="text-sm font-semibold leading-none text-black">{t("additional_inputs")}</Label> <Label className="text-sm font-semibold leading-none text-black">{t("additional_inputs")}</Label>
<p className="-mt-2 text-sm leading-normal text-gray-600">{t("additional_input_description")}</p> <p className="-mt-2 text-sm leading-normal text-gray-600">{t("additional_input_description")}</p>
</div> </div>
@ -178,8 +179,9 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupInfered
checked={value} checked={value}
onCheckedChange={(e) => onChange(e)} onCheckedChange={(e) => onChange(e)}
disabled={seatsEnabled} disabled={seatsEnabled}
fitToHeight={true}
/> />
<div className="relative top-4 flex flex-col"> <div className="flex flex-col">
<Label className="text-sm font-semibold leading-none text-black"> <Label className="text-sm font-semibold leading-none text-black">
{t("requires_confirmation")} {t("requires_confirmation")}
</Label> </Label>
@ -199,11 +201,12 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupInfered
<div className="flex space-x-3 "> <div className="flex space-x-3 ">
<Switch <Switch
name="disableGuests" name="disableGuests"
fitToHeight={true}
checked={value} checked={value}
onCheckedChange={(e) => onChange(e)} onCheckedChange={(e) => onChange(e)}
disabled={seatsEnabled} disabled={seatsEnabled}
/> />
<div className="relative top-2 flex flex-col"> <div className="flex flex-col">
<Label className="text-sm font-semibold leading-none text-black">{t("disable_guests")}</Label> <Label className="text-sm font-semibold leading-none text-black">{t("disable_guests")}</Label>
<p className="-mt-2 text-sm leading-normal text-gray-600">{t("disable_guests_description")}</p> <p className="-mt-2 text-sm leading-normal text-gray-600">{t("disable_guests_description")}</p>
</div> </div>
@ -218,8 +221,13 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupInfered
defaultValue={eventType.hideCalendarNotes} defaultValue={eventType.hideCalendarNotes}
render={({ field: { value, onChange } }) => ( render={({ field: { value, onChange } }) => (
<div className="flex space-x-3 "> <div className="flex space-x-3 ">
<Switch name="hideCalendarNotes" checked={value} onCheckedChange={(e) => onChange(e)} /> <Switch
<div className="relative top-4 flex flex-col"> name="hideCalendarNotes"
fitToHeight={true}
checked={value}
onCheckedChange={(e) => onChange(e)}
/>
<div className="flex flex-col">
<Label className="text-sm font-semibold leading-none text-black">{t("disable_notes")}</Label> <Label className="text-sm font-semibold leading-none text-black">{t("disable_notes")}</Label>
<p className="-mt-2 text-sm leading-normal text-gray-600">{t("disable_notes_description")}</p> <p className="-mt-2 text-sm leading-normal text-gray-600">{t("disable_notes_description")}</p>
</div> </div>
@ -236,13 +244,14 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupInfered
<div className="flex space-x-3 "> <div className="flex space-x-3 ">
<Switch <Switch
name="hashedLinkCheck" name="hashedLinkCheck"
fitToHeight={true}
defaultChecked={!!value} defaultChecked={!!value}
onCheckedChange={(e) => { onCheckedChange={(e) => {
setHashedLinkVisible(e); setHashedLinkVisible(e);
onChange(e ? hashedUrl : undefined); onChange(e ? hashedUrl : undefined);
}} }}
/> />
<div className="relative top-2 flex flex-col"> <div className="flex flex-col">
<Label className="text-sm font-semibold leading-none text-black">{t("private_link")}</Label> <Label className="text-sm font-semibold leading-none text-black">{t("private_link")}</Label>
<p className="-mt-2 text-sm leading-normal text-gray-600">{t("private_link_description")}</p> <p className="-mt-2 text-sm leading-normal text-gray-600">{t("private_link_description")}</p>
</div> </div>

3
packages/ui/v2/core/Switch.tsx
View File

@ -11,13 +11,14 @@ const Switch = (
thumbProps?: { thumbProps?: {
className?: string; className?: string;
}; };
fitToHeight?: boolean;
} }
) => { ) => {
const { label, ...primitiveProps } = props; const { label, ...primitiveProps } = props;
const id = useId(); const id = useId();
return ( return (
<div className="flex h-auto w-auto flex-row items-center"> <div className={classNames("flex h-auto w-auto flex-row items-center", props.fitToHeight && "h-fit")}>
<PrimitiveSwitch.Root <PrimitiveSwitch.Root
className={classNames( className={classNames(
props.checked ? "bg-gray-900" : "bg-gray-200 hover:bg-gray-300", props.checked ? "bg-gray-900" : "bg-gray-200 hover:bg-gray-300",