fix: logging in from video page (#1082)

* fix logging in from share page

* Update AuthOverlay.tsx

* Update OtpForm.tsx

* improve bg color

* Update OtpForm.tsx

Author: ameer2468

apps/web/app/(org)/login/form.tsx

@@ -157,7 +157,7 @@ export function LoginForm() {
 				</motion.p>
 			</motion.div>
 			<MotionLink layout="position" className="flex mx-auto size-fit" href="/">
-				<MotionLogoBadge layout="position" className="w-[72px] h-[72px]" />
+				<MotionLogoBadge layout="position" className="size-12" />
 			</MotionLink>
 			<motion.div
 				layout="position"
@@ -459,18 +459,16 @@ const NormalLogin = ({
 				className="flex flex-col gap-3 justify-center items-center"
 			>
 				{!oauthError && (
-					<>
-						<MotionButton
-							variant="gray"
-							type="button"
-							className="flex gap-2 justify-center items-center w-full text-sm"
-							onClick={handleGoogleSignIn}
-							disabled={loading}
-						>
-							<Image src="/google.svg" alt="Google" width={16} height={16} />
-							Login with Google
-						</MotionButton>
-					</>
+					<MotionButton
+						variant="gray"
+						type="button"
+						className="flex gap-2 justify-center items-center w-full text-sm"
+						onClick={handleGoogleSignIn}
+						disabled={loading}
+					>
+						<Image src="/google.svg" alt="Google" width={16} height={16} />
+						Login with Google
+					</MotionButton>
 				)}
 
 				{oauthError && (
@@ -481,8 +479,7 @@ const NormalLogin = ({
 						/>
 						<p className="text-xs leading-5 text-gray-50">
 							It looks like you've previously used this email to sign up via
-							email login. Please enter your email below to receive a sign in
-							link.
+							email login. Please enter your email.
 						</p>
 					</div>
 				)}

apps/web/app/(org)/verify-otp/form.tsx

@@ -156,19 +156,19 @@ export function VerifyOTPForm({
 			</Link>
 
 			<Link className="flex mx-auto size-fit" href="/">
-				<LogoBadge className="w-[72px] h-[72px]" />
+				<LogoBadge className="size-12" />
 			</Link>
 
 			<div className="flex flex-col justify-center items-center my-7 text-center">
-				<h1 className="text-2xl font-semibold text-gray-12">
+				<h1 className="text-xl font-semibold text-gray-12">
 					Enter verification code
 				</h1>
-				<p className="text-[16px] text-gray-10 mt-2">
+				<p className="text-sm text-gray-10">
 					We sent a 6-digit code to {email}
 				</p>
 			</div>
 
-			<div className="flex gap-2 justify-center mb-6">
+			<div className="flex flex-1 gap-2 justify-between mb-5">
 				{code.map((digit, index) => (
 					<input
 						key={index.toString()}
@@ -191,7 +191,7 @@ export function VerifyOTPForm({
 								.replace(/\D/g, "");
 							handleChange(0, pastedData);
 						}}
-						className="w-12 h-14 text-xl font-semibold text-center rounded-lg border transition-all bg-gray-1 border-gray-5 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+						className="flex-1 h-[52px] text-xl font-semibold text-center rounded-lg border transition-all bg-gray-1 border-gray-5 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
 						disabled={handleVerify.isPending || handleVerify.isSuccess}
 					/>
 				))}
@@ -221,7 +221,7 @@ export function VerifyOTPForm({
 			</div>
 
 			<p className="mt-6 text-xs text-center text-gray-9">
-				By verifying your email, you acknowledge that you have both read and
+				By entering your email, you acknowledge that you have both read and
 				agree to Cap's{" "}
 				<Link
 					href="/terms"