refactor: event type settings (#11539)

Co-authored-by: Peer Richelsen <peer@cal.com>
Co-authored-by: Peer Richelsen <peeroke@gmail.com>

packages/features/calendars/DestinationCalendarSelector.tsx

@@ -6,7 +6,7 @@ import { components } from "react-select";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import type { DestinationCalendar } from "@calcom/prisma/client";
 import { trpc } from "@calcom/trpc/react";
-import { Select } from "@calcom/ui";
+import { Select, Badge } from "@calcom/ui";
 import { Check } from "@calcom/ui/components/icon";
 
 interface Props {
@@ -133,9 +133,9 @@ const DestinationCalendarSelector = ({
             `${t("create_events_on")}`
           ) : (
             <span className="text-default min-w-0 overflow-hidden truncate whitespace-nowrap">
-              {t("default_calendar_selected")}{" "}
+              <Badge variant="blue">Default</Badge>{" "}
               {queryDestinationCalendar.name &&
-                `| ${queryDestinationCalendar.name} (${queryDestinationCalendar?.integrationTitle} - ${queryDestinationCalendar.primaryEmail})`}
+                `${queryDestinationCalendar.name} (${queryDestinationCalendar?.integrationTitle} - ${queryDestinationCalendar.primaryEmail})`}
             </span>
           )
         }

packages/features/form-builder/FormBuilder.tsx

@@ -112,7 +112,7 @@ export const FormBuilder = function FormBuilder({
           {LockedIcon}
         </div>
         <p className="text-subtle max-w-[280px] break-words py-1 text-sm sm:max-w-[500px]">{description}</p>
-        <ul className="border-default divide-subtle mt-2 divide-y rounded-md border">
+        <ul className="border-subtle divide-subtle mt-2 divide-y rounded-md border">
           {fields.map((field, index) => {
             const options = field.options
               ? field.options
@@ -155,7 +155,7 @@ export const FormBuilder = function FormBuilder({
                     {index >= 1 && (
                       <button
                         type="button"
-                        className="bg-default text-muted hover:text-emphasis disabled:hover:text-muted border-default hover:border-emphasis invisible absolute -left-[12px] -ml-4 -mt-4 mb-4 hidden h-6 w-6 scale-0 items-center justify-center rounded-md border p-1 transition-all hover:shadow disabled:hover:border-inherit disabled:hover:shadow-none group-hover:visible group-hover:scale-100 sm:ml-0 sm:flex"
+                        className="bg-default text-muted hover:text-emphasis disabled:hover:text-muted border-subtle hover:border-emphasis invisible absolute -left-[12px] -ml-4 -mt-4 mb-4 hidden h-6 w-6 scale-0 items-center justify-center rounded-md border p-1 transition-all hover:shadow disabled:hover:border-inherit disabled:hover:shadow-none group-hover:visible group-hover:scale-100 sm:ml-0 sm:flex"
                         onClick={() => swap(index, index - 1)}>
                         <ArrowUp className="h-5 w-5" />
                       </button>
@@ -163,7 +163,7 @@ export const FormBuilder = function FormBuilder({
                     {index < fields.length - 1 && (
                       <button
                         type="button"
-                        className="bg-default text-muted hover:border-emphasis border-default hover:text-emphasis disabled:hover:text-muted invisible absolute -left-[12px] -ml-4 mt-8 hidden h-6 w-6 scale-0 items-center justify-center rounded-md border p-1 transition-all hover:shadow disabled:hover:border-inherit disabled:hover:shadow-none group-hover:visible group-hover:scale-100 sm:ml-0 sm:flex"
+                        className="bg-default text-muted hover:border-emphasis border-subtle hover:text-emphasis disabled:hover:text-muted invisible absolute -left-[12px] -ml-4 mt-8 hidden h-6 w-6 scale-0 items-center justify-center rounded-md border p-1 transition-all hover:shadow disabled:hover:border-inherit disabled:hover:shadow-none group-hover:visible group-hover:scale-100 sm:ml-0 sm:flex"
                         onClick={() => swap(index, index + 1)}>
                         <ArrowDown className="h-5 w-5" />
                       </button>
@@ -628,7 +628,7 @@ function VariantFields({
 
       <ul
         className={classNames(
-          !isSimpleVariant ? "border-default divide-subtle mt-2 divide-y rounded-md border" : ""
+          !isSimpleVariant ? "border-subtle divide-subtle mt-2 divide-y rounded-md border" : ""
         )}>
         {variantFields.map((f, index) => {
           const rhfVariantFieldPrefix = `variantsConfig.variants.${variantName}.fields.${index}` as const;

packages/features/webhooks/components/WebhookListItem.tsx

@@ -15,7 +15,7 @@ import {
   Switch,
   Tooltip,
 } from "@calcom/ui";
-import { AlertCircle, Edit, MoreHorizontal, Trash } from "@calcom/ui/components/icon";
+import { Edit, MoreHorizontal, Trash, Zap } from "@calcom/ui/components/icon";
 
 type WebhookProps = {
   id: string;
@@ -87,7 +87,7 @@ export default function WebhookListItem(props: {
                 key={trigger}
                 className="mt-2.5 basis-1/5 ltr:mr-2 rtl:ml-2"
                 variant="gray"
-                startIcon={AlertCircle}>
+                startIcon={Zap}>
                 {t(`${trigger.toLowerCase()}`)}
               </Badge>
             ))}

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

@@ -24,8 +24,19 @@ export const Select = <
   menuPlacement,
   variant = "default",
   ...props
-}: SelectProps<Option, IsMulti, Group>) => {
-  const { classNames, ...restProps } = props;
+}: SelectProps<Option, IsMulti, Group> & {
+  innerClassNames?: {
+    input?: string;
+    option?: string;
+    control?: string;
+    singleValue?: string;
+    valueContainer?: string;
+    multiValue?: string;
+    menu?: string;
+    menuList?: string;
+  };
+}) => {
+  const { classNames, innerClassNames, ...restProps } = props;
   const reactSelectProps = React.useMemo(() => {
     return getReactSelectProps<Option, IsMulti, Group>({
       components: components || {},
@@ -39,14 +50,14 @@ export const Select = <
     <ReactSelect
       {...reactSelectProps}
       classNames={{
-        input: () => cx("text-emphasis", props.classNames?.input),
+        input: () => cx("text-emphasis", innerClassNames?.input),
         option: (state) =>
           cx(
             "bg-default flex cursor-pointer justify-between py-2.5 px-3 rounded-none text-default ",
             state.isFocused && "bg-subtle",
             state.isDisabled && "bg-muted",
             state.isSelected && "bg-emphasis text-default",
-            props.classNames?.option
+            innerClassNames?.option
           ),
         placeholder: (state) => cx("text-muted", state.isFocused && variant !== "checkbox" && "hidden"),
         dropdownIndicator: () => "text-default",
@@ -59,25 +70,25 @@ export const Select = <
                 : state.hasValue
                 ? "p-1 h-fit"
                 : "px-3 py-2 h-fit"
-              : "py-2 px-3 h-fit",
+              : "py-2 px-3",
             props.isDisabled && "bg-subtle",
-            props.classNames?.control
+            innerClassNames?.control
           ),
-        singleValue: () => cx("text-emphasis placeholder:text-muted", props.classNames?.singleValue),
+        singleValue: () => cx("text-emphasis placeholder:text-muted", innerClassNames?.singleValue),
         valueContainer: () =>
-          cx("text-emphasis placeholder:text-muted flex gap-1", props.classNames?.valueContainer),
+          cx("text-emphasis placeholder:text-muted flex gap-1", innerClassNames?.valueContainer),
         multiValue: () =>
           cx(
             "bg-subtle text-default rounded-md py-1.5 px-2 flex items-center text-sm leading-none",
-            props.classNames?.multiValue
+            innerClassNames?.multiValue
           ),
         menu: () =>
           cx(
             "rounded-md bg-default text-sm leading-4 text-default mt-1 border border-subtle",
-            props.classNames?.menu
+            innerClassNames?.menu
           ),
         groupHeading: () => "leading-none text-xs uppercase text-default pl-2.5 pt-4 pb-2",
-        menuList: () => cx("scroll-bar scrollbar-track-w-20 rounded-md", props.classNames?.menuList),
+        menuList: () => cx("scroll-bar scrollbar-track-w-20 rounded-md", innerClassNames?.menuList),
         indicatorsContainer: (state) =>
           cx(
             state.selectProps.menuIsOpen

packages/ui/components/form/switch/SettingsToggle.tsx

@@ -1,6 +1,8 @@
 import { useAutoAnimate } from "@formkit/auto-animate/react";
 import type { ReactNode } from "react";
 
+import { classNames } from "@calcom/lib";
+
 import { Label } from "..";
 import Switch from "./Switch";
 
@@ -11,9 +13,13 @@ type Props = {
   checked: boolean;
   disabled?: boolean;
   LockedIcon?: React.ReactNode;
+  Badge?: React.ReactNode;
   onCheckedChange?: (checked: boolean) => void;
   "data-testid"?: string;
   tooltip?: string;
+  toggleSwitchAtTheEnd?: boolean;
+  childrenClassName?: string;
+  switchContainerClassName?: string;
 };
 
 function SettingsToggle({
@@ -21,10 +27,14 @@ function SettingsToggle({
   onCheckedChange,
   description,
   LockedIcon,
+  Badge,
   title,
   children,
   disabled,
   tooltip,
+  toggleSwitchAtTheEnd = false,
+  childrenClassName,
+  switchContainerClassName,
   ...rest
 }: Props) {
   const [animateRef] = useAutoAnimate<HTMLDivElement>();
@@ -33,27 +43,52 @@ function SettingsToggle({
     <>
       <div className="flex w-full flex-col space-y-4 lg:flex-row lg:space-x-4 lg:space-y-0">
         <fieldset className="block w-full flex-col sm:flex">
-          <div className="flex space-x-3">
-            <Switch
-              data-testid={rest["data-testid"]}
-              fitToHeight={true}
-              checked={checked}
-              onCheckedChange={onCheckedChange}
-              disabled={disabled}
-              tooltip={tooltip}
-            />
-
-            <div>
-              <Label className="text-emphasis text-sm font-semibold leading-none">
-                {title}
-                {LockedIcon}
-              </Label>
-              {description && <p className="text-default -mt-1.5 text-sm leading-normal">{description}</p>}
+          {toggleSwitchAtTheEnd ? (
+            <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">
+                    {title}
+                    {LockedIcon}
+                  </Label>
+                  {Badge}
+                </div>
+                {description && <p className="text-default -mt-1.5 text-sm leading-normal">{description}</p>}
+              </div>
+              <div className="my-auto h-full">
+                <Switch
+                  data-testid={rest["data-testid"]}
+                  fitToHeight={true}
+                  checked={checked}
+                  onCheckedChange={onCheckedChange}
+                  disabled={disabled}
+                  tooltip={tooltip}
+                />
+              </div>
             </div>
-          </div>
+          ) : (
+            <div className="flex space-x-3">
+              <Switch
+                data-testid={rest["data-testid"]}
+                fitToHeight={true}
+                checked={checked}
+                onCheckedChange={onCheckedChange}
+                disabled={disabled}
+                tooltip={tooltip}
+              />
+
+              <div>
+                <Label className="text-emphasis text-sm font-semibold leading-none">
+                  {title}
+                  {LockedIcon}
+                </Label>
+                {description && <p className="text-default -mt-1.5 text-sm leading-normal">{description}</p>}
+              </div>
+            </div>
+          )}
           {children && (
-            <div className="lg:ml-14" ref={animateRef}>
-              {checked && <div className="mt-4">{children}</div>}
+            <div className={classNames("lg:ml-14", childrenClassName)} ref={animateRef}>
+              {checked && <div className={classNames(!toggleSwitchAtTheEnd && "mt-4")}>{children}</div>}
             </div>
           )}
         </fieldset>