Update page.tsx

app/auth/reset-password/page.tsx

@@ -1,8 +1,13 @@
 "use client";
 import { useState, useEffect } from "react";
 import { useRouter, useSearchParams } from "next/navigation";
+import Link from "next/link";
 import { fetchClient } from "@/lib/api-client";
 import { toast } from "sonner";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Loader2 } from "lucide-react";
 
 interface Vendor {
   id: string;
@@ -80,10 +85,12 @@ export default function ResetPasswordPage() {
 
   if (loading) {
     return (
-      <div className="min-h-screen flex items-center justify-center">
-        <div className="text-center">
-          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary mx-auto"></div>
-          <p className="mt-2 text-sm text-muted-foreground">Validating token...</p>
+      <div className="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-[#0F0F12]">
+        <div className="w-full max-w-md p-8 space-y-8 bg-white dark:bg-[#1F1F23] rounded-xl shadow-lg text-center">
+          <div className="mt-6 flex flex-col items-center justify-center">
+            <div className="w-12 h-12 border-4 border-t-blue-500 border-b-transparent border-l-transparent border-r-transparent rounded-full animate-spin"></div>
+            <p className="mt-4 text-gray-600 dark:text-gray-400">Validating token...</p>
+          </div>
         </div>
       </div>
     );
@@ -94,63 +101,71 @@ export default function ResetPasswordPage() {
   }
 
   return (
-    <div className="min-h-screen flex items-center justify-center bg-background">
-      <div className="max-w-md w-full space-y-8 p-8">
+    <div className="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-[#0F0F12]">
+      <div className="w-full max-w-md p-8 space-y-8 bg-white dark:bg-[#1F1F23] rounded-xl shadow-lg">
         <div className="text-center">
-          <h1 className="text-2xl font-bold">Reset Password</h1>
-          <p className="text-sm text-muted-foreground mt-2">
+          <h2 className="mt-6 text-3xl font-bold text-gray-900 dark:text-white">Reset Password</h2>
+          <p className="mt-2 text-sm text-gray-600 dark:text-gray-400">
             Reset password for <span className="font-medium">{vendor.username}</span>
           </p>
         </div>
 
-        <form onSubmit={handleSubmit} className="space-y-6">
-          <div>
-            <label htmlFor="password" className="block text-sm font-medium mb-2">
-              New Password
-            </label>
-            <input
-              id="password"
-              type="password"
-              required
-              value={password}
-              onChange={(e) => setPassword(e.target.value)}
-              className="w-full rounded-md border border-border bg-background px-3 py-2 text-sm"
-              placeholder="Enter new password"
-            />
+        <form className="mt-8 space-y-6" onSubmit={handleSubmit}>
+          <div className="space-y-4">
+            <div className="animate-in fade-in duration-500">
+              <Label htmlFor="password">New Password</Label>
+              <Input
+                id="password"
+                name="password"
+                type="password"
+                autoComplete="new-password"
+                required
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                className="mt-1"
+                disabled={submitting}
+                placeholder="Enter new password"
+              />
+            </div>
+            <div className="animate-in fade-in duration-500 delay-150">
+              <Label htmlFor="confirmPassword">Confirm Password</Label>
+              <Input
+                id="confirmPassword"
+                name="confirmPassword"
+                type="password"
+                autoComplete="new-password"
+                required
+                value={confirmPassword}
+                onChange={(e) => setConfirmPassword(e.target.value)}
+                className="mt-1"
+                disabled={submitting}
+                placeholder="Confirm new password"
+              />
+            </div>
           </div>
 
-          <div>
-            <label htmlFor="confirmPassword" className="block text-sm font-medium mb-2">
-              Confirm Password
-            </label>
-            <input
-              id="confirmPassword"
-              type="password"
-              required
-              value={confirmPassword}
-              onChange={(e) => setConfirmPassword(e.target.value)}
-              className="w-full rounded-md border border-border bg-background px-3 py-2 text-sm"
-              placeholder="Confirm new password"
-            />
-          </div>
-
-          <button
-            type="submit"
+          <Button 
+            type="submit" 
+            className="w-full animate-in fade-in-50 duration-500 delay-300" 
             disabled={submitting}
-            className="w-full rounded-md bg-primary px-3 py-2 text-sm text-primary-foreground disabled:opacity-60"
           >
-            {submitting ? "Resetting..." : "Reset Password"}
-          </button>
+            {submitting ? (
+              <span className="flex items-center justify-center">
+                <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+                Resetting password...
+              </span>
+            ) : (
+              "Reset Password"
+            )}
+          </Button>
         </form>
 
-        <div className="text-center">
-          <a 
-            href="/auth/login" 
-            className="text-sm text-muted-foreground hover:text-foreground"
-          >
-            Back to Login
-          </a>
-        </div>
+        <p className="mt-10 text-sm text-center text-gray-600 dark:text-gray-400 animate-in fade-in duration-500 delay-500">
+          Remember your password?{" "}
+          <Link href="/auth/login" className="text-blue-600 hover:underline dark:text-blue-400">
+            Sign in
+          </Link>
+        </p>
       </div>
     </div>
   );