move resend to top

Author: vrtnd

src/containers/Subscribtion/Home.tsx

@@ -227,6 +227,16 @@ export function SubscribeHome({ returnUrl, isTrial }: { returnUrl?: string; isTr
 					</div>
 				)}
 
+				{isAuthenticated && !user?.verified && !isWalletUser && user?.email && (
+					<div className="mx-auto w-full max-w-3xl">
+						<EmailVerificationWarning
+							email={user.email}
+							onResendVerification={handleResendVerification}
+							isLoading={loaders.resendVerification}
+						/>
+					</div>
+				)}
+
 				{isAuthenticated && isSubscribed ? null : (
 					<div
 						className="relative -bottom-15 z-0 mx-auto -mb-[45px] h-[64px] w-[90%] rounded-[50%]"
@@ -327,15 +337,6 @@ export function SubscribeHome({ returnUrl, isTrial }: { returnUrl?: string; isTr
 									subscription={subscription}
 									onEmailChange={() => setShowEmailForm(true)}
 								/>
-								{!user?.verified && !isWalletUser && user?.email && (
-									<div className="mt-4">
-										<EmailVerificationWarning
-											email={user.email}
-											onResendVerification={handleResendVerification}
-											isLoading={loaders.resendVerification}
-										/>
-									</div>
-								)}
 							</div>
 						)}
 					</div>

src/containers/Subscribtion/components/EmailVerificationWarning.tsx

@@ -8,39 +8,32 @@ interface EmailVerificationWarningProps {
 
 export const EmailVerificationWarning = ({ email, onResendVerification, isLoading }: EmailVerificationWarningProps) => {
 	return (
-		<div className="relative overflow-hidden rounded-xl border border-amber-500/20 bg-[#2a2417] p-5 shadow-md">
-			<div className="relative flex items-start gap-4">
-				<div className="shrink-0 rounded-lg bg-amber-400/10 p-2 text-amber-400">
-					<Icon name="alert-triangle" height={20} width={20} />
-				</div>
-
-				<div className="grow">
-					<h3 className="mb-2 text-lg font-semibold text-amber-100">Verify Your Email Address</h3>
-					<p className="mb-4 text-sm text-[#e0d5bc]">
-						Please verify your email address to access all Pro features and API capabilities. We've sent a verification
-						link to <span className="font-medium text-amber-100">{email}</span>.
+		<div className="relative overflow-hidden rounded-lg border border-amber-500/20 bg-amber-500/5 px-3 py-2.5 sm:px-4 sm:py-3">
+			<div className="relative flex items-center justify-between gap-3">
+				<div className="flex items-center gap-2.5">
+					<Icon name="alert-triangle" height={16} width={16} className="shrink-0 text-amber-400" />
+					<p className="text-xs text-amber-100 sm:text-sm">
+						Verify your email <span className="font-medium">{email}</span> to subscribe
 					</p>
-
-					<div className="flex flex-wrap gap-3">
-						<button
-							className="flex items-center gap-2 rounded-lg bg-amber-500 px-4 py-2 text-sm font-medium text-white shadow-md transition-colors hover:bg-amber-600"
-							onClick={onResendVerification}
-							disabled={isLoading}
-						>
-							{isLoading ? (
-								<>
-									<span className="h-4 w-4 animate-spin rounded-full border-2 border-white/30 border-t-white"></span>
-									Sending...
-								</>
-							) : (
-								<>
-									<Icon name="mail" height={14} width={14} />
-									Resend Verification Email
-								</>
-							)}
-						</button>
-					</div>
 				</div>
+
+				<button
+					className="flex shrink-0 items-center gap-1.5 rounded-md bg-amber-500/20 px-2.5 py-1.5 text-xs font-medium text-amber-100 transition-colors hover:bg-amber-500/30 disabled:opacity-50 sm:gap-2 sm:px-3"
+					onClick={onResendVerification}
+					disabled={isLoading}
+				>
+					{isLoading ? (
+						<>
+							<span className="h-3 w-3 animate-spin rounded-full border-2 border-amber-100/30 border-t-amber-100"></span>
+							Sending...
+						</>
+					) : (
+						<>
+							<Icon name="mail" height={12} width={12} />
+							<span className="hidden sm:inline">Resend</span>
+						</>
+					)}
+				</button>
 			</div>
 		</div>
 	)