fix: toggle alligment (#4361)

calcom · Sep 10, 2022 · c215f7d · c215f7d
1 parent 3ce687c
commit c215f7d
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 7 deletions.
diff --git a/apps/web/components/v2/eventtype/EventAdvancedTab.tsx b/apps/web/components/v2/eventtype/EventAdvancedTab.tsx
@@ -123,6 +123,7 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupInfered
  <div className="flex space-x-3 ">
  <Switch
  checked={customInputs.length > 0}
+ fitToHeight={true}
  onCheckedChange={(e) => {
  if (e && customInputs.length === 0) {
  // 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>
  <p className="-mt-2 text-sm leading-normal text-gray-600">{t("additional_input_description")}</p>
  </div>
@@ -178,8 +179,9 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupInfered
  checked={value}
  onCheckedChange={(e) => onChange(e)}
  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">
  {t("requires_confirmation")}
  </Label>
@@ -199,11 +201,12 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupInfered
  <div className="flex space-x-3 ">
  <Switch
  name="disableGuests"
+ fitToHeight={true}
  checked={value}
  onCheckedChange={(e) => onChange(e)}
  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>
  <p className="-mt-2 text-sm leading-normal text-gray-600">{t("disable_guests_description")}</p>
  </div>
@@ -218,8 +221,13 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupInfered
  defaultValue={eventType.hideCalendarNotes}
  render={({ field: { value, onChange } }) => (
  <div className="flex space-x-3 ">
- <Switch name="hideCalendarNotes" checked={value} onCheckedChange={(e) => onChange(e)} />
- <div className="relative top-4 flex flex-col">
+ <Switch
+ 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>
  <p className="-mt-2 text-sm leading-normal text-gray-600">{t("disable_notes_description")}</p>
  </div>
@@ -236,13 +244,14 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupInfered
  <div className="flex space-x-3 ">
  <Switch
  name="hashedLinkCheck"
+ fitToHeight={true}
  defaultChecked={!!value}
  onCheckedChange={(e) => {
  setHashedLinkVisible(e);
  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>
  <p className="-mt-2 text-sm leading-normal text-gray-600">{t("private_link_description")}</p>
  </div>

diff --git a/packages/ui/v2/core/Switch.tsx b/packages/ui/v2/core/Switch.tsx
@@ -11,13 +11,14 @@ const Switch = (
  thumbProps?: {
  className?: string;
  };
+ fitToHeight?: boolean;
  }
 ) => {
  const { label, ...primitiveProps } = props;
  const id = useId();
 
  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
  className={classNames(
  props.checked ? "bg-gray-900" : "bg-gray-200 hover:bg-gray-300",