fix: update button components to include loading state and improve styling in navbar and login page

app/pages/staff-login/index.tsx

@@ -23,14 +23,12 @@ export const AdminLoginPage = () => {
     resolver: zodResolver(loginSchema),
   })
   const [error, setError] = useState<string>()
-  const [disabled, setDisabled] = useState(false)
 
   const { handleSubmit } = formMethods
 
   useEffect(() => {
     if (!fetcher.data?.success) {
       setError(fetcher.data?.message)
-      setDisabled(false)
       return
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -81,18 +79,21 @@ export const AdminLoginPage = () => {
               {/* Lupa Kata Sandi */}
               <div className="mb-4 flex justify-between">
                 <span className="text-gray-600">Lupa Kata Sandi?</span>
-                <Link
+                <Button
+                  as={Link}
+                  variant={'link'}
+                  size="fit"
                   to="/lg-admin/auth/reset-password"
-                  className="font-semibold text-[#2E2F7C]"
                 >
                   Reset Kata Sandi
-                </Link>
+                </Button>
               </div>
 
               <Button
-                disabled={disabled}
+                isLoading={fetcher.state !== 'idle'}
+                disabled={fetcher.state !== 'idle'}
                 type="submit"
-                className="w-full rounded-md bg-[#2E2F7C] py-2 text-white transition hover:bg-blue-800"
+                className="w-full rounded-md py-2"
               >
                 Masuk
               </Button>