fix: atoms tooltip (#17073)

* add tooltip classname prop for styling

* fix incorrect styling

* update props for connect buttons

packages/platform/atoms/connect/OAuthConnect.tsx

@@ -75,6 +75,7 @@ export const OAuthConnect: FC<
           tooltip={tooltip ? tooltip : <ConnectedCalendarsTooltip calendarInstance={calendar} />}
           tooltipSide={tooltipSide}
           tooltipOffset={10}
+          tooltipClassName="p-0 text-inherit bg-inherit"
           className={cn("", !isDisabled && "cursor-pointer", className)}
           onClick={() => {
             connect();

packages/platform/atoms/connect/apple/AppleConnect.tsx

@@ -93,6 +93,7 @@ export const AppleConnect: FC<Partial<Omit<OAuthConnectProps, "redir">>> = ({
                 tooltip={tooltip ? tooltip : <ConnectedCalendarsTooltip calendarInstance="apple" />}
                 tooltipSide={tooltipSide}
                 tooltipOffset={10}
+                tooltipClassName="p-0 text-inherit bg-inherit"
                 className={cn("", !isDisabled && "cursor-pointer", className)}
                 onClick={() => setIsDialogOpen(true)}>
                 {displayedLabel}

packages/ui/components/button/Button.tsx

@@ -25,6 +25,7 @@ export type ButtonBaseProps = {
   tooltip?: string | React.ReactNode;
   tooltipSide?: "top" | "right" | "bottom" | "left";
   tooltipOffset?: number;
+  tooltipClassName?: string;
   disabled?: boolean;
   flex?: boolean;
 } & Omit<InferredVariantProps, "color"> & {
@@ -127,6 +128,7 @@ export const Button = forwardRef<HTMLAnchorElement | HTMLButtonElement, ButtonPr
     type = "button",
     tooltipSide = "top",
     tooltipOffset = 4,
+    tooltipClassName,
     StartIcon,
     CustomStartIcon,
     EndIcon,
@@ -228,7 +230,8 @@ export const Button = forwardRef<HTMLAnchorElement | HTMLButtonElement, ButtonPr
       data-testid="wrapper"
       tooltip={props.tooltip}
       tooltipSide={tooltipSide}
-      tooltipOffset={tooltipOffset}>
+      tooltipOffset={tooltipOffset}
+      tooltipClassName={tooltipClassName}>
       {element}
     </Wrapper>
   );
@@ -239,18 +242,25 @@ const Wrapper = ({
   tooltip,
   tooltipSide,
   tooltipOffset,
+  tooltipClassName,
 }: {
   tooltip?: string | React.ReactNode;
   children: React.ReactNode;
   tooltipSide?: "top" | "right" | "bottom" | "left";
   tooltipOffset?: number;
+  tooltipClassName?: string;
 }) => {
   if (!tooltip) {
     return <>{children}</>;
   }
 
   return (
-    <Tooltip data-testid="tooltip" content={tooltip} side={tooltipSide} sideOffset={tooltipOffset}>
+    <Tooltip
+      data-testid="tooltip"
+      className={tooltipClassName}
+      content={tooltip}
+      side={tooltipSide}
+      sideOffset={tooltipOffset}>
       {children}
     </Tooltip>
   );

packages/ui/components/tooltip/Tooltip.tsx

@@ -32,8 +32,7 @@ export function Tooltip({
         "calcom-tooltip",
         side === "top" && "-mt-7",
         side === "right" && "ml-2",
-        "relative z-50 rounded-md text-xs font-semibold shadow-lg",
-        !isPlatform && "bg-inverted text-inverted px-2 py-1",
+        "bg-inverted text-inverted relative z-50 rounded-md px-2 py-1 text-xs font-semibold shadow-lg",
         props.className && `${props.className}`
       )}
       side={side}