From cd94800f879eb7c86f3d09de0bfbc142516b488a Mon Sep 17 00:00:00 2001
From: Srujan Gurram <srujangs8@gmail.com>
Date: Thu, 2 Jan 2025 11:30:23 +0530
Subject: [PATCH] Improve login element UX and button styles

---
 .changeset/lovely-spoons-care.md |  5 +++++
 src/components/login-element.tsx | 23 ++++++++++++++++++-----
 2 files changed, 23 insertions(+), 5 deletions(-)
 create mode 100644 .changeset/lovely-spoons-care.md

diff --git a/.changeset/lovely-spoons-care.md b/.changeset/lovely-spoons-care.md
new file mode 100644
index 0000000..02bcbe5
--- /dev/null
+++ b/.changeset/lovely-spoons-care.md
@@ -0,0 +1,5 @@
+---
+"@everipedia/iq-login": patch
+---
+
+Adds better ux copies and button styles in login element
diff --git a/src/components/login-element.tsx b/src/components/login-element.tsx
index 5ed7dd4..e79efc6 100644
--- a/src/components/login-element.tsx
+++ b/src/components/login-element.tsx
@@ -11,9 +11,9 @@ interface LoginProps {
 
 export const Login = ({
 	title = "Sign In / Connect",
-	description = "Connect your wallet to access your account",
-	connectText = "Step 1: Connect your wallet",
-	signTokenText = "Step 2: Authenticate your wallet",
+	description = "Get started with your preferred login method",
+	connectText = "Choose your login method",
+	signTokenText = "Verify your wallet",
 	handleRedirect,
 }: LoginProps) => {
 	const { connect, connectors } = useConnect();
@@ -59,9 +59,9 @@ export const Login = ({
 									key={connector.uid}
 									suppressHydrationWarning
 									onClick={() => connect({ connector })}
-									className="w-full px-4 py-2 bg-primary text-primary-foreground rounded-md hover:bg-primary/90 disabled:opacity-50 transition-colors"
+									className="w-full px-4 py-2 border border-primary text-primary hover:bg-primary/10 rounded-md transition-colors"
 								>
-									Connect with {connector.name}
+									{getConnectorLabel(connector.name)}
 								</button>
 							))
 						)}
@@ -82,3 +82,16 @@ export const Login = ({
 		</div>
 	);
 };
+
+const getConnectorLabel = (connectorName: string) => {
+	switch (connectorName) {
+		case "Web3Auth":
+			return "Login with Email / Socials";
+		case "Injected":
+			return "Login with Browser Wallet";
+		case "MetaMask":
+			return "Login with MetaMask";
+		default:
+			return `Login with ${connectorName}`;
+	}
+};