From ad99adde9df2e22dbb35d1eb9722940edc1e974e Mon Sep 17 00:00:00 2001
From: Ryukemeister <sahalrajiv-extc@atharvacoe.ac.in>
Date: Wed, 4 Oct 2023 12:46:06 +0530
Subject: [PATCH] add default styles

---
 packages/atoms/connect/ConnectButton.tsx | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/packages/atoms/connect/ConnectButton.tsx b/packages/atoms/connect/ConnectButton.tsx
index 228cf98c43..a1c3f8d87b 100644
--- a/packages/atoms/connect/ConnectButton.tsx
+++ b/packages/atoms/connect/ConnectButton.tsx
@@ -1,17 +1,22 @@
 import { useState } from "react";
 
+import { classNames } from "@calcom/lib";
+
 import type { AtomsGlobalConfigProps } from "../types";
 import type { ConnectButtonProps } from "../types";
 
 // TODO: add default styling
-// also a cssClassAssembler function for custom styling
 
 // we accept two props: buttonText & onButtonClick
 // buttonText is for displaying buttonText
 // onButtonClick is a a method to handle onClick for button
 // it accepts another object which contains a callback in case of any error
 
-export function ConnectButton({ buttonText, onButtonClick }: ConnectButtonProps & AtomsGlobalConfigProps) {
+export function ConnectButton({
+  buttonText,
+  onButtonClick,
+  stylesClassname,
+}: ConnectButtonProps & AtomsGlobalConfigProps) {
   const [isProcessing, setIsProcessing] = useState<boolean>(false);
   const [errMsg, setErrMsg] = useState<string>("");
 
@@ -31,7 +36,15 @@ export function ConnectButton({ buttonText, onButtonClick }: ConnectButtonProps
 
   return (
     <div>
-      <button className="" onClick={(event) => handleSubmit(event)} disabled={!isProcessing} type="button">
+      <button
+        className={classNames(
+          stylesClassname
+            ? `bg-default dark:bg-muted rounded-md ${stylesClassname}`
+            : `bg-default dark:bg-muted text-default dark:text-muted rounded-md`
+        )}
+        onClick={(event) => handleSubmit(event)}
+        disabled={!isProcessing}
+        type="button">
         {buttonText || "Install App"}
       </button>
       {!!errMsg && <span>{errMsg}</span>}