From 83f0ba7ba4eea48eeb992ef46d72af2591ee46a8 Mon Sep 17 00:00:00 2001
From: Peer Richelsen <peeroke@gmail.com>
Date: Fri, 9 Sep 2022 12:53:02 +0200
Subject: [PATCH] added new combined buttons on all pages (#4328)

Co-authored-by: sean-brydon <55134778+sean-brydon@users.noreply.github.com>
---
 .../availability/ScheduleListItem.tsx         |   1 +
 apps/web/pages/v2/event-types/index.tsx       | 177 +++++++++---------
 apps/web/public/static/locales/en/common.json |   3 +-
 .../routing_forms/components/FormActions.tsx  |   5 +-
 .../pages/forms/[...appPages].tsx             | 131 +++++++------
 .../components/v2/WorkflowListPage.tsx        |  57 ++----
 .../schedules/components/Schedule.tsx         |  21 ++-
 .../schedules/components/ScheduleListItem.tsx |   2 +-
 packages/ui/v2/core/Button.tsx                |   2 +-
 packages/ui/v2/core/Switch.tsx                |   8 +-
 packages/ui/v2/core/Tooltip.tsx               |   2 +-
 .../ui/v2/core/form/BooleanToggleGroup.tsx    |   4 +-
 12 files changed, 197 insertions(+), 216 deletions(-)

diff --git a/apps/web/components/availability/ScheduleListItem.tsx b/apps/web/components/availability/ScheduleListItem.tsx
index 0797cdd8a1..b4e20d80e2 100644
--- a/apps/web/components/availability/ScheduleListItem.tsx
+++ b/apps/web/components/availability/ScheduleListItem.tsx
@@ -53,6 +53,7 @@ export function ScheduleListItem({
             </a>
           </Link>
         </div>
+
         <Dropdown>
           <DropdownMenuTrigger className="group mr-5 h-10 w-10 border border-transparent p-0 text-neutral-500 hover:border-gray-200">
             <Icon.FiMoreHorizontal className="h-5 w-5 group-hover:text-gray-800" />
diff --git a/apps/web/pages/v2/event-types/index.tsx b/apps/web/pages/v2/event-types/index.tsx
index 0b98f0dd7a..8ebb800199 100644
--- a/apps/web/pages/v2/event-types/index.tsx
+++ b/apps/web/pages/v2/event-types/index.tsx
@@ -10,7 +10,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { inferQueryOutput, trpc } from "@calcom/trpc/react";
 import { Icon } from "@calcom/ui";
 import { Alert } from "@calcom/ui/Alert";
-import { Dialog, EmptyScreen, Badge, Button, Tooltip, Switch, showToast } from "@calcom/ui/v2";
+import { Dialog, EmptyScreen, Badge, Button, Tooltip, Switch, showToast, ButtonGroup } from "@calcom/ui/v2";
 import ConfirmationDialogContent from "@calcom/ui/v2/core/ConfirmationDialogContent";
 import Dropdown, {
   DropdownItem,
@@ -222,7 +222,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
                 )}>
                 <div
                   className={classNames(
-                    "group flex w-full items-center justify-between px-4 py-4 pr-0 hover:bg-neutral-50 sm:px-6",
+                    "group flex w-full items-center justify-between px-4 py-4 pr-0 sm:px-6",
                     type.$disabled && "hover:bg-white"
                   )}>
                   {types.length > 1 && !type.$disabled && (
@@ -267,7 +267,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
                           </Badge>
                         )}
                         <Tooltip content={t("show_eventtype_on_profile") as string}>
-                          <div className="self-center pr-2">
+                          <div className="self-center rounded-md p-2 hover:bg-gray-200">
                             <Switch
                               name="Hidden"
                               checked={!type.hidden}
@@ -278,92 +278,95 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
                           </div>
                         </Tooltip>
 
-                        <VerticalDivider className="mt-2.5" />
-
-                        <Tooltip content={t("preview") as string}>
-                          <Button
-                            color="minimalSecondary"
-                            target="_blank"
-                            size="icon"
-                            href={calLink}
-                            StartIcon={Icon.FiExternalLink}
-                            disabled={type.$disabled}
-                          />
-                        </Tooltip>
-
-                        <Tooltip content={t("copy_link") as string}>
-                          <Button
-                            color="minimalSecondary"
-                            size="icon"
-                            StartIcon={Icon.FiLink}
-                            disabled={type.$disabled}
-                            onClick={() => {
-                              showToast(t("link_copied"), "success");
-                              navigator.clipboard.writeText(calLink);
-                            }}
-                          />
-                        </Tooltip>
-                      </div>
-                      <Dropdown>
-                        <DropdownMenuTrigger asChild data-testid={"event-type-options-" + type.id}>
-                          <Button
-                            type="button"
-                            size="icon"
-                            color="minimalSecondary"
-                            StartIcon={Icon.FiMoreHorizontal}
-                          />
-                        </DropdownMenuTrigger>
-                        <DropdownMenuContent>
-                          <DropdownMenuItem>
-                            <DropdownItem
-                              type="button"
-                              href={"/event-types/" + type.id}
+                        <ButtonGroup combined>
+                          <Tooltip content={t("preview") as string}>
+                            <Button
+                              color="secondary"
+                              target="_blank"
+                              size="icon"
+                              href={calLink}
+                              StartIcon={Icon.FiExternalLink}
                               disabled={type.$disabled}
-                              StartIcon={Icon.FiEdit2}>
-                              {t("edit") as string}
-                            </DropdownItem>
-                          </DropdownMenuItem>
-                          <DropdownMenuItem className="outline-none">
-                            <DropdownItem
-                              type="button"
-                              data-testid={"event-type-duplicate-" + type.id}
+                              combined
+                            />
+                          </Tooltip>
+
+                          <Tooltip content={t("copy_link") as string}>
+                            <Button
+                              color="secondary"
+                              size="icon"
+                              StartIcon={Icon.FiLink}
                               disabled={type.$disabled}
-                              StartIcon={Icon.FiCopy}
-                              onClick={() => openModal(group, type)}>
-                              {t("duplicate") as string}
-                            </DropdownItem>
-                          </DropdownMenuItem>
-                          <DropdownMenuItem className="outline-none">
-                            <EmbedButton
-                              as={DropdownItem}
-                              type="button"
-                              StartIcon={Icon.FiCode}
-                              className={classNames(
-                                "w-full rounded-none",
-                                type.$disabled && " pointer-events-none cursor-not-allowed opacity-30"
+                              onClick={() => {
+                                showToast(t("link_copied"), "success");
+                                navigator.clipboard.writeText(calLink);
+                              }}
+                              combined
+                            />
+                          </Tooltip>
+                          <Dropdown>
+                            <DropdownMenuTrigger asChild data-testid={"event-type-options-" + type.id}>
+                              <Button
+                                type="button"
+                                size="icon"
+                                color="secondary"
+                                combined
+                                StartIcon={Icon.FiMoreHorizontal}
+                              />
+                            </DropdownMenuTrigger>
+                            <DropdownMenuContent>
+                              <DropdownMenuItem>
+                                <DropdownItem
+                                  type="button"
+                                  href={"/event-types/" + type.id}
+                                  disabled={type.$disabled}
+                                  StartIcon={Icon.FiEdit2}>
+                                  {t("edit") as string}
+                                </DropdownItem>
+                              </DropdownMenuItem>
+                              <DropdownMenuItem className="outline-none">
+                                <DropdownItem
+                                  type="button"
+                                  data-testid={"event-type-duplicate-" + type.id}
+                                  disabled={type.$disabled}
+                                  StartIcon={Icon.FiCopy}
+                                  onClick={() => openModal(group, type)}>
+                                  {t("duplicate") as string}
+                                </DropdownItem>
+                              </DropdownMenuItem>
+                              <DropdownMenuItem className="outline-none">
+                                <EmbedButton
+                                  as={DropdownItem}
+                                  type="button"
+                                  StartIcon={Icon.FiCode}
+                                  className={classNames(
+                                    "w-full rounded-none",
+                                    type.$disabled && " pointer-events-none cursor-not-allowed opacity-30"
+                                  )}
+                                  embedUrl={encodeURIComponent(embedLink)}>
+                                  {t("embed")}
+                                </EmbedButton>
+                              </DropdownMenuItem>
+                              <DropdownMenuSeparator className="h-px bg-gray-200" />
+                              {/* readonly is only set when we are on a team - if we are on a user event type null will be the value. */}
+                              {(group.metadata?.readOnly === false || group.metadata.readOnly === null) && (
+                                <DropdownMenuItem>
+                                  <DropdownItem
+                                    onClick={() => {
+                                      setDeleteDialogOpen(true);
+                                      setDeleteDialogTypeId(type.id);
+                                    }}
+                                    StartIcon={Icon.FiTrash}
+                                    disabled={type.$disabled}
+                                    className="w-full rounded-none">
+                                    {t("delete") as string}
+                                  </DropdownItem>
+                                </DropdownMenuItem>
                               )}
-                              embedUrl={encodeURIComponent(embedLink)}>
-                              {t("embed")}
-                            </EmbedButton>
-                          </DropdownMenuItem>
-                          <DropdownMenuSeparator className="h-px bg-gray-200" />
-                          {/* readonly is only set when we are on a team - if we are on a user event type null will be the value. */}
-                          {(group.metadata?.readOnly === false || group.metadata.readOnly === null) && (
-                            <DropdownMenuItem>
-                              <DropdownItem
-                                onClick={() => {
-                                  setDeleteDialogOpen(true);
-                                  setDeleteDialogTypeId(type.id);
-                                }}
-                                StartIcon={Icon.FiTrash}
-                                disabled={type.$disabled}
-                                className="w-full rounded-none">
-                                {t("delete") as string}
-                              </DropdownItem>
-                            </DropdownMenuItem>
-                          )}
-                        </DropdownMenuContent>
-                      </Dropdown>
+                            </DropdownMenuContent>
+                          </Dropdown>
+                        </ButtonGroup>
+                      </div>
                     </div>
                   </div>
                 </div>
@@ -373,7 +376,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
                       <Button
                         type="button"
                         size="icon"
-                        color="minimal"
+                        color="secondary"
                         className={classNames(type.$disabled && " opacity-30")}
                         StartIcon={Icon.FiMoreHorizontal}
                       />
diff --git a/apps/web/public/static/locales/en/common.json b/apps/web/public/static/locales/en/common.json
index e3bcdac62b..061b784807 100644
--- a/apps/web/public/static/locales/en/common.json
+++ b/apps/web/public/static/locales/en/common.json
@@ -1181,5 +1181,6 @@
   "connect_calendar_later": "I'll connect my calendar later",
   "set_my_availability_later": "I'll set my availability later",
   "problem_saving_user_profile": "There was a problem saving your data. Please try again or reach out to customer support.",
-  "token_invalid_expired": "Token is either invalid or expired."
+  "token_invalid_expired": "Token is either invalid or expired.",
+  "routing_forms_description": "You can see all forms and routes you have created here."
 }
diff --git a/packages/app-store/ee/routing_forms/components/FormActions.tsx b/packages/app-store/ee/routing_forms/components/FormActions.tsx
index 78780751e3..7bc1c4348f 100644
--- a/packages/app-store/ee/routing_forms/components/FormActions.tsx
+++ b/packages/app-store/ee/routing_forms/components/FormActions.tsx
@@ -136,7 +136,8 @@ export const FormActionsDropdown = ({ form, children }: { form: RoutingForm; chi
           <Button
             type="button"
             size="icon"
-            color="minimal"
+            color="secondary"
+            combined
             className={classNames(disabled && " opacity-30")}
             StartIcon={Icon.FiMoreHorizontal}
           />
@@ -344,7 +345,7 @@ export const FormAction = forwardRef(function FormAction<T extends typeof Button
           return <></>;
         }
         return (
-          <div {...restProps}>
+          <div {...restProps} className="mx-2 self-center rounded-md p-2 hover:bg-gray-200">
             <Switch
               checked={!routingForm.disabled}
               label={label}
diff --git a/packages/app-store/ee/routing_forms/pages/forms/[...appPages].tsx b/packages/app-store/ee/routing_forms/pages/forms/[...appPages].tsx
index b741d66962..4dec176794 100644
--- a/packages/app-store/ee/routing_forms/pages/forms/[...appPages].tsx
+++ b/packages/app-store/ee/routing_forms/pages/forms/[...appPages].tsx
@@ -2,7 +2,7 @@
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { AppGetServerSidePropsContext, AppPrisma, AppUser } from "@calcom/types/AppGetServerSideProps";
 import { Icon } from "@calcom/ui/Icon";
-import { DropdownMenuSeparator, Tooltip } from "@calcom/ui/v2";
+import { ButtonGroup, DropdownMenuSeparator, Tooltip } from "@calcom/ui/v2";
 import { EmptyScreen } from "@calcom/ui/v2";
 import { Badge } from "@calcom/ui/v2";
 import { List, ListLinkItem } from "@calcom/ui/v2/core/List";
@@ -27,10 +27,7 @@ export default function RoutingForms({
     );
   }
   return (
-    <ShellMain
-      heading="Routing Forms"
-      CTA={<NewFormButton />}
-      subtitle="You can see all routing forms and create one here.">
+    <ShellMain heading="Routing Forms" CTA={<NewFormButton />} subtitle={t("routing_forms_description")}>
       <FormActionsProvider appUrl={appUrl}>
         <div className="-mx-4 md:-mx-8">
           <div className="mb-10 w-full px-4 pb-2 sm:px-6 md:px-8">
@@ -63,74 +60,72 @@ export default function RoutingForms({
                         subHeading={description}
                         actions={
                           <>
-                            <FormAction
-                              className="self-center border-r-2 border-gray-300 pr-5 "
-                              action="toggle"
-                              routingForm={form}
-                            />
-                            <Tooltip content={t("preview")}>
+                            <FormAction className="self-center" action="toggle" routingForm={form} />
+                            <ButtonGroup combined>
+                              <Tooltip content={t("preview")}>
+                                <FormAction
+                                  action="preview"
+                                  routingForm={form}
+                                  target="_blank"
+                                  StartIcon={Icon.FiExternalLink}
+                                  color="secondary"
+                                  combined
+                                  size="icon"
+                                  disabled={disabled}
+                                />
+                              </Tooltip>
                               <FormAction
-                                action="preview"
-                                className="ml-3"
                                 routingForm={form}
-                                target="_blank"
-                                StartIcon={Icon.FiExternalLink}
-                                color="minimal"
+                                action="copyLink"
+                                color="secondary"
+                                combined
                                 size="icon"
+                                StartIcon={Icon.FiLink}
                                 disabled={disabled}
+                                tooltip={t("copy_link")}
                               />
-                            </Tooltip>
-                            <FormAction
-                              routingForm={form}
-                              action="copyLink"
-                              color="minimal"
-                              size="icon"
-                              StartIcon={Icon.FiLink}
-                              disabled={disabled}
-                              tooltip={t("copy_link")}
-                            />
-
-                            <FormActionsDropdown form={form}>
-                              <FormAction
-                                action="edit"
-                                routingForm={form}
-                                color="minimal"
-                                StartIcon={Icon.FiEdit}>
-                                {t("edit")}
-                              </FormAction>
-                              <FormAction
-                                action="download"
-                                routingForm={form}
-                                color="minimal"
-                                StartIcon={Icon.FiDownload}>
-                                {t("download_responses")}
-                              </FormAction>
-                              <FormAction
-                                action="embed"
-                                routingForm={form}
-                                color="minimal"
-                                className="w-full"
-                                StartIcon={Icon.FiCode}>
-                                {t("embed")}
-                              </FormAction>
-                              <FormAction
-                                action="duplicate"
-                                routingForm={form}
-                                color="minimal"
-                                className="w-full"
-                                StartIcon={Icon.FiCopy}>
-                                {t("duplicate")}
-                              </FormAction>
-                              <DropdownMenuSeparator className="h-px bg-gray-200" />
-                              <FormAction
-                                action="_delete"
-                                routingForm={form}
-                                color="destructive"
-                                className="w-full"
-                                StartIcon={Icon.FiTrash}>
-                                {t("delete")}
-                              </FormAction>
-                            </FormActionsDropdown>
+                              <FormActionsDropdown form={form}>
+                                <FormAction
+                                  action="edit"
+                                  routingForm={form}
+                                  color="minimal"
+                                  StartIcon={Icon.FiEdit}>
+                                  {t("edit")}
+                                </FormAction>
+                                <FormAction
+                                  action="download"
+                                  routingForm={form}
+                                  color="minimal"
+                                  StartIcon={Icon.FiDownload}>
+                                  {t("download_responses")}
+                                </FormAction>
+                                <FormAction
+                                  action="embed"
+                                  routingForm={form}
+                                  color="minimal"
+                                  className="w-full"
+                                  StartIcon={Icon.FiCode}>
+                                  {t("embed")}
+                                </FormAction>
+                                <FormAction
+                                  action="duplicate"
+                                  routingForm={form}
+                                  color="minimal"
+                                  className="w-full"
+                                  StartIcon={Icon.FiCopy}>
+                                  {t("duplicate")}
+                                </FormAction>
+                                <DropdownMenuSeparator className="h-px bg-gray-200" />
+                                <FormAction
+                                  action="_delete"
+                                  routingForm={form}
+                                  color="destructive"
+                                  className="w-full"
+                                  StartIcon={Icon.FiTrash}>
+                                  {t("delete")}
+                                </FormAction>
+                              </FormActionsDropdown>
+                            </ButtonGroup>
                           </>
                         }>
                         <div className="flex flex-wrap gap-1">
diff --git a/packages/features/ee/workflows/components/v2/WorkflowListPage.tsx b/packages/features/ee/workflows/components/v2/WorkflowListPage.tsx
index 3600fce111..376610402e 100644
--- a/packages/features/ee/workflows/components/v2/WorkflowListPage.tsx
+++ b/packages/features/ee/workflows/components/v2/WorkflowListPage.tsx
@@ -11,7 +11,7 @@ import { trpc } from "@calcom/trpc/react";
 import { Tooltip } from "@calcom/ui";
 import Dropdown, { DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@calcom/ui/Dropdown";
 import { Icon } from "@calcom/ui/Icon";
-import { Button } from "@calcom/ui/v2";
+import { Button, ButtonGroup } from "@calcom/ui/v2";
 
 import { getActionIcon } from "../../lib/getActionIcon";
 import { DeleteDialog } from "./DeleteDialog";
@@ -134,47 +134,26 @@ export default function WorkflowListPage({ workflows }: Props) {
                     </a>
                   </Link>
                   <div className="flex flex-shrink-0">
-                    <div className="flex justify-between space-x-2 rtl:space-x-reverse">
+                    <ButtonGroup combined>
                       <Button
                         type="button"
                         color="secondary"
-                        className="hidden sm:block"
-                        onClick={async () => await router.replace("/workflows/" + workflow.id)}>
-                        {t("edit")}
-                      </Button>
-                      <Dropdown>
-                        <DropdownMenuTrigger asChild>
-                          <Button
-                            type="button"
-                            color="secondary"
-                            size="icon"
-                            StartIcon={Icon.FiMoreHorizontal}
-                          />
-                        </DropdownMenuTrigger>
-                        <DropdownMenuContent>
-                          <DropdownMenuItem className="block text-sm sm:hidden">
-                            <Button
-                              type="button"
-                              color="minimal"
-                              onClick={async () => await router.replace("/workflows/" + workflow.id)}
-                              StartIcon={Icon.FiEdit}>
-                              {t("edit")}
-                            </Button>
-                          </DropdownMenuItem>
-                          <DropdownMenuItem>
-                            <Button
-                              onClick={() => {
-                                setDeleteDialogOpen(true);
-                                setwWorkflowToDeleteId(workflow.id);
-                              }}
-                              color="destructive"
-                              StartIcon={Icon.FiTrash2}>
-                              {t("delete")}
-                            </Button>
-                          </DropdownMenuItem>
-                        </DropdownMenuContent>
-                      </Dropdown>
-                    </div>
+                        size="icon"
+                        combined
+                        StartIcon={Icon.FiEdit2}
+                        onClick={async () => await router.replace("/workflows/" + workflow.id)}
+                      />
+                      <Button
+                        onClick={() => {
+                          setDeleteDialogOpen(true);
+                          setwWorkflowToDeleteId(workflow.id);
+                        }}
+                        color="secondary"
+                        combined
+                        size="icon"
+                        StartIcon={Icon.FiTrash2}
+                      />
+                    </ButtonGroup>
                   </div>
                 </div>
               </li>
diff --git a/packages/features/schedules/components/Schedule.tsx b/packages/features/schedules/components/Schedule.tsx
index f273ca24b6..bdb80059b7 100644
--- a/packages/features/schedules/components/Schedule.tsx
+++ b/packages/features/schedules/components/Schedule.tsx
@@ -38,17 +38,18 @@ const Schedule = () => {
         return (
           <div className="mb-1 flex w-full flex-col py-1 sm:flex-row" key={weekday}>
             {/* Label & switch container */}
-            <div className="flex justify-between">
+            <div className="flex h-11 items-center justify-between">
               <div>
-                <label className="flex flex-row items-center">
-                  <Switch
-                    defaultChecked={initialValue["schedule"][num].length > 0}
-                    checked={!!initialValue["schedule"][num].length}
-                    onCheckedChange={(isChecked) => {
-                      form.setValue(name, isChecked ? [DEFAULT_DAY_RANGE] : []);
-                    }}
-                    className="relative mx-2 my-[6px] h-6 w-10 rounded-full bg-gray-200"
-                  />
+                <label className="flex flex-row items-center space-x-2">
+                  <div>
+                    <Switch
+                      defaultChecked={initialValue["schedule"][num].length > 0}
+                      checked={!!initialValue["schedule"][num].length}
+                      onCheckedChange={(isChecked) => {
+                        form.setValue(name, isChecked ? [DEFAULT_DAY_RANGE] : []);
+                      }}
+                    />
+                  </div>
                   <span className="inline-block min-w-[88px] text-sm capitalize">{weekday}</span>
                 </label>
               </div>
diff --git a/packages/features/schedules/components/ScheduleListItem.tsx b/packages/features/schedules/components/ScheduleListItem.tsx
index fe09993109..94099b07ee 100644
--- a/packages/features/schedules/components/ScheduleListItem.tsx
+++ b/packages/features/schedules/components/ScheduleListItem.tsx
@@ -62,7 +62,7 @@ export function ScheduleListItem({
         </div>
         <Dropdown>
           <DropdownMenuTrigger asChild className="mr-5">
-            <Button type="button" size="icon" color="minimalSecondary" StartIcon={Icon.FiMoreHorizontal} />
+            <Button type="button" size="icon" color="secondary" StartIcon={Icon.FiMoreHorizontal} />
           </DropdownMenuTrigger>
           <DropdownMenuContent>
             <DropdownMenuItem>
diff --git a/packages/ui/v2/core/Button.tsx b/packages/ui/v2/core/Button.tsx
index 4c1d8c1d6c..3f28cf44bc 100644
--- a/packages/ui/v2/core/Button.tsx
+++ b/packages/ui/v2/core/Button.tsx
@@ -89,7 +89,7 @@ export const Button = forwardRef<HTMLAnchorElement | HTMLButtonElement, ButtonPr
         // different styles depending on size
         size === "base" && "h-9 px-4 py-2.5  ",
         size === "lg" && "h-[36px] px-4 py-2.5 ",
-        size === "icon" && "flex justify-center h-[36px] w-[36px] ",
+        size === "icon" && "flex justify-center min-h-[36px] min-w-[36px] ",
         combined ? "" : "rounded-md",
         // different styles depending on color
         // set not-allowed cursor if disabled
diff --git a/packages/ui/v2/core/Switch.tsx b/packages/ui/v2/core/Switch.tsx
index 6685221337..7949292ca7 100644
--- a/packages/ui/v2/core/Switch.tsx
+++ b/packages/ui/v2/core/Switch.tsx
@@ -21,7 +21,7 @@ const Switch = (
       <PrimitiveSwitch.Root
         className={classNames(
           props.checked ? "bg-gray-900" : "bg-gray-200 hover:bg-gray-300",
-          "focus:ring-brand-800 h-6 w-10 rounded-full shadow-none",
+          "focus:ring-brand-800 h-5 w-[34px] rounded-full shadow-none",
           props.className
         )}
         {...primitiveProps}>
@@ -30,9 +30,9 @@ const Switch = (
           // Since we dont support global dark mode - we have to style dark mode components specifically on the instance for now
           // TODO: Remove once we support global dark mode
           className={classNames(
-            "block h-[18px] w-[18px] rounded-full bg-white",
-            "translate-x-[4px] transition delay-100 will-change-transform",
-            "[&[data-state='checked']]:translate-x-[18px]",
+            "block h-[14px] w-[14px] rounded-full bg-white",
+            "translate-x-[4px] transition will-change-transform",
+            "[&[data-state='checked']]:translate-x-[17px]",
             props.checked && "shadow-inner",
             props.thumbProps?.className
           )}
diff --git a/packages/ui/v2/core/Tooltip.tsx b/packages/ui/v2/core/Tooltip.tsx
index 254126199d..4faeb351d4 100644
--- a/packages/ui/v2/core/Tooltip.tsx
+++ b/packages/ui/v2/core/Tooltip.tsx
@@ -28,7 +28,7 @@ export function Tooltip({
       <TooltipPrimitive.Trigger asChild>{children}</TooltipPrimitive.Trigger>
       <TooltipPrimitive.Content
         className={classNames(
-          side === "top" && "-mt-7 -ml-4",
+          side === "top" && "-mt-7",
           side === "right" && "ml-2",
           "relative z-40 rounded-md bg-gray-900 px-2 py-1 text-xs font-semibold text-white shadow-lg"
         )}
diff --git a/packages/ui/v2/core/form/BooleanToggleGroup.tsx b/packages/ui/v2/core/form/BooleanToggleGroup.tsx
index 18c0ce298a..7cc0ea3b65 100644
--- a/packages/ui/v2/core/form/BooleanToggleGroup.tsx
+++ b/packages/ui/v2/core/form/BooleanToggleGroup.tsx
@@ -37,7 +37,7 @@ export const BooleanToggleGroup = function BooleanToggleGroup({
     <ToggleGroupPrimitive
       value={yesNoValue}
       type="single"
-      className="rounded-sm"
+      className="space-x-2 rounded-sm"
       onValueChange={(yesNoValue: "yes" | "no") => {
         setYesNoValue(yesNoValue);
         onValueChange(boolean(yesNoValue));
@@ -73,7 +73,7 @@ export const BooleanToggleGroupField = function BooleanToggleGroupField(
     <div className={classNames(containerClassName)}>
       <div className={className}>
         {!!label && (
-          <Label htmlFor={id} {...labelProps} className={classNames(props.error && "text-red-900")}>
+          <Label htmlFor={id} {...labelProps} className={classNames(props.error && "text-red-900", "mt-4")}>
             {label}
           </Label>
         )}