From eb86064995d4211035fc5906b2cb7f9d83547304 Mon Sep 17 00:00:00 2001
From: Rajiv Sahal <sahalrajiv-extc@atharvacoe.ac.in>
Date: Mon, 17 Feb 2025 20:28:47 +0530
Subject: [PATCH] feat: atoms adjustments with ui v3 styles (#19320)

---
 packages/platform/atoms/connect/OAuthConnect.tsx     |  4 ++--
 .../platform/atoms/connect/apple/AppleConnect.tsx    |  7 +++++--
 .../platform/atoms/connect/stripe/StripeConnect.tsx  |  1 +
 .../SelectedCalendarsSettingsPlatformWrapper.tsx     | 12 ++++++------
 packages/ui/components/form/inputs/TextField.tsx     |  2 +-
 5 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/packages/platform/atoms/connect/OAuthConnect.tsx b/packages/platform/atoms/connect/OAuthConnect.tsx
index 84c4e9a484..a20262db45 100644
--- a/packages/platform/atoms/connect/OAuthConnect.tsx
+++ b/packages/platform/atoms/connect/OAuthConnect.tsx
@@ -76,7 +76,7 @@ export const OAuthConnect: FC<
           tooltipSide={tooltipSide}
           tooltipOffset={10}
           tooltipClassName="p-0 text-inherit bg-inherit"
-          className={cn("", !isDisabled && "cursor-pointer", className)}
+          className={cn("", !isDisabled && "cursor-pointer", "border-none md:rounded-md", className)}
           onTouchEnd={() => {
             connect();
             onSuccess?.();
@@ -99,9 +99,9 @@ export const OAuthConnect: FC<
         disabled={isDisabled}
         className={cn(
           "",
-          isChecking && "animate-pulse",
           isDisabled && "cursor-not-allowed",
           !isDisabled && "cursor-pointer",
+          "border-none md:rounded-md",
           className
         )}
         onTouchEnd={() => {
diff --git a/packages/platform/atoms/connect/apple/AppleConnect.tsx b/packages/platform/atoms/connect/apple/AppleConnect.tsx
index cba44f3ef6..0dcb6b0680 100644
--- a/packages/platform/atoms/connect/apple/AppleConnect.tsx
+++ b/packages/platform/atoms/connect/apple/AppleConnect.tsx
@@ -94,7 +94,7 @@ export const AppleConnect: FC<Partial<Omit<OAuthConnectProps, "redir">>> = ({
                 tooltipSide={tooltipSide}
                 tooltipOffset={10}
                 tooltipClassName="p-0 text-inherit bg-inherit"
-                className={cn("", !isDisabled && "cursor-pointer", className)}
+                className={cn("", !isDisabled && "cursor-pointer", "border-none md:rounded-md", className)}
                 onClick={() => setIsDialogOpen(true)}>
                 {displayedLabel}
               </Button>
@@ -108,6 +108,7 @@ export const AppleConnect: FC<Partial<Omit<OAuthConnectProps, "redir">>> = ({
                   "",
                   isDisabled && "cursor-not-allowed",
                   !isDisabled && "cursor-pointer",
+                  "border-none md:rounded-md",
                   className
                 )}
                 onClick={() => setIsDialogOpen(true)}>
@@ -116,7 +117,7 @@ export const AppleConnect: FC<Partial<Omit<OAuthConnectProps, "redir">>> = ({
             )}
           </>
         </DialogTrigger>
-        <DialogContent>
+        <DialogContent className="bg-default text-default">
           <DialogHeader>
             <DialogTitle>Connect to Apple Server</DialogTitle>
             <DialogDescription>
@@ -158,12 +159,14 @@ export const AppleConnect: FC<Partial<Omit<OAuthConnectProps, "redir">>> = ({
                 disabled={isSaving}
                 type="button"
                 color="secondary"
+                className="md:rounded-md"
                 onClick={() => setIsDialogOpen(false)}>
                 Cancel
               </Button>
               <Button
                 disabled={isSaving}
                 type="submit"
+                className="border-none md:rounded-md"
                 loading={form.formState.isSubmitting}
                 data-testid="apple-calendar-login-button">
                 Save
diff --git a/packages/platform/atoms/connect/stripe/StripeConnect.tsx b/packages/platform/atoms/connect/stripe/StripeConnect.tsx
index fb9b321fd6..06b8a747e9 100644
--- a/packages/platform/atoms/connect/stripe/StripeConnect.tsx
+++ b/packages/platform/atoms/connect/stripe/StripeConnect.tsx
@@ -77,6 +77,7 @@ export const StripeConnect: FC<Partial<StripeConnectProps>> = ({
         disabled={isClickable ? false : isDisabled}
         className={cn(
           "",
+          "md:rounded-md",
           className,
           isChecking && "animate-pulse",
           isDisabled && "cursor-not-allowed",
diff --git a/packages/platform/atoms/selected-calendars/wrappers/SelectedCalendarsSettingsPlatformWrapper.tsx b/packages/platform/atoms/selected-calendars/wrappers/SelectedCalendarsSettingsPlatformWrapper.tsx
index e802008707..e81461b35b 100644
--- a/packages/platform/atoms/selected-calendars/wrappers/SelectedCalendarsSettingsPlatformWrapper.tsx
+++ b/packages/platform/atoms/selected-calendars/wrappers/SelectedCalendarsSettingsPlatformWrapper.tsx
@@ -15,6 +15,7 @@ import {
   Dropdown,
   DropdownMenuContent,
   DropdownMenuTrigger,
+  Switch,
 } from "@calcom/ui";
 
 import { AppleConnect } from "../../connect/apple/AppleConnect";
@@ -24,7 +25,6 @@ import { useRemoveSelectedCalendar } from "../../hooks/calendars/useRemoveSelect
 import { useConnectedCalendars } from "../../hooks/useConnectedCalendars";
 import { Connect } from "../../index";
 import { AtomsWrapper } from "../../src/components/atoms-wrapper";
-import { Switch } from "../../src/components/ui/switch";
 import { useToast } from "../../src/components/ui/use-toast";
 import { SelectedCalendarsSettings } from "../SelectedCalendarsSettings";
 
@@ -289,11 +289,11 @@ const PlatformAdditionalCalendarSelector = ({
   return (
     <Dropdown modal={false}>
       <DropdownMenuTrigger asChild>
-        <Button StartIcon="plus" color="secondary">
+        <Button StartIcon="plus" color="secondary" className="md:rounded-md">
           {t("add")}
         </Button>
       </DropdownMenuTrigger>
-      <DropdownMenuContent>
+      <DropdownMenuContent className="w-auto">
         <div>
           <div>
             <Connect.GoogleCalendar
@@ -304,7 +304,7 @@ const PlatformAdditionalCalendarSelector = ({
               label={t("add_calendar_label", { calendar: "Google" })}
               loadingLabel={t("add_calendar_label", { calendar: "Google" })}
               alreadyConnectedLabel={t("add_calendar_label", { calendar: "Google" })}
-              className="hover:bg-subtle hover:text-default cursor-pointer border-none bg-inherit text-inherit"
+              className="hover:bg-subtle hover:text-default cursor-pointer border-none bg-inherit text-inherit md:rounded-md"
             />
           </div>
           <div>
@@ -316,7 +316,7 @@ const PlatformAdditionalCalendarSelector = ({
               label={t("add_calendar_label", { calendar: "Outlook" })}
               loadingLabel={t("add_calendar_label", { calendar: "Outlook" })}
               alreadyConnectedLabel={t("add_calendar_label", { calendar: "Outlook" })}
-              className="hover:bg-subtle hover:text-default cursor-pointer border-none bg-inherit text-inherit"
+              className="hover:bg-subtle hover:text-default cursor-pointer border-none bg-inherit text-inherit md:rounded-md"
             />
           </div>
           <div>
@@ -328,7 +328,7 @@ const PlatformAdditionalCalendarSelector = ({
               label={t("add_calendar_label", { calendar: "Apple" })}
               loadingLabel={t("add_calendar_label", { calendar: "Apple" })}
               alreadyConnectedLabel={t("add_calendar_label", { calendar: "Apple" })}
-              className="hover:bg-subtle hover:text-default cursor-pointer border-none bg-inherit text-inherit"
+              className="hover:bg-subtle hover:text-default cursor-pointer border-none bg-inherit text-inherit md:rounded-md"
             />
           </div>
         </div>
diff --git a/packages/ui/components/form/inputs/TextField.tsx b/packages/ui/components/form/inputs/TextField.tsx
index a90ed5142d..f9da182278 100644
--- a/packages/ui/components/form/inputs/TextField.tsx
+++ b/packages/ui/components/form/inputs/TextField.tsx
@@ -14,7 +14,7 @@ import type { InputFieldProps, InputProps } from "./types";
 export const inputStyles = cva(
   [
     // Base styles
-    "block rounded-[10px] border",
+    "rounded-[10px] border",
     "leading-none font-normal",
 
     // Colors