feat: enhance error handling and improve API response management across components

components/auth/login-form.tsx

@@ -15,7 +15,7 @@ export default function LoginForm() {
 
 	return (
 		<form
-			className="bg-white overflow-clip dark:bg-transparent dark:border-2 w-full max-w-xs mx-auto rounded-lg shadow mt-4"
+			className="overflow-clip title-bg dark:border-2 w-full max-w-xs mx-auto rounded-lg shadow border mt-4"
 			action={formAction}
 		>
 			<div className="py-4 px-4">
@@ -23,7 +23,6 @@ export default function LoginForm() {
 					<PhoneInput
 						id="phone-number"
 						name="phoneNumber"
-						className="b0rder"
 						maxLength={8}
 						disabled={isPending}
 						placeholder="Enter phone number"

components/auth/verify-otp-form.tsx

@@ -57,11 +57,11 @@ export default function VerifyOTPForm({
 	return (
 		<form
 			onSubmit={handleSubmit(onSubmit)}
-			className="w-full max-w-xs  rounded-lg shadow my-4"
+			className="w-full max-w-xs title-bg border rounded-lg shadow my-4"
 		>
 			<div className="grid pb-4 pt-4 gap-4 px-4">
-				<div className="">
-					<Label htmlFor="otp-number" className="text-gray-500">
+				<div className="flex flex-col gap-4">
+					<Label htmlFor="otp-number" className="sr-only text-gray-500">
 						Enter the OTP
 					</Label>
 					<Input
@@ -69,6 +69,8 @@ export default function VerifyOTPForm({
 						id="otp-number"
 						{...register("pin")}
 						type="text"
+						placeholder="Enter OTP"
+						className="bg-white dark:bg-sarLinkOrange/10"
 					/>
 					{errors.pin && (
 						<p className="text-red-500 text-sm">{errors.pin.message}</p>