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

app/layouts/admin/navbar.tsx

@@ -1,8 +1,9 @@
-import { Button, Popover, PopoverButton, PopoverPanel } from '@headlessui/react'
+import { Popover, PopoverButton, PopoverPanel } from '@headlessui/react'
 import { Link, useFetcher, useRouteLoaderData } from 'react-router'
 
 import { ChevronIcon } from '~/components/icons/chevron'
 import { ProfileIcon } from '~/components/icons/profile'
+import { Button } from '~/components/ui/button'
 import { APP } from '~/configs/meta'
 import type { loader } from '~/routes/_admin.lg-admin'
 
@@ -52,8 +53,10 @@ export const Navbar = () => {
               className="grid"
             >
               <Button
+                disabled={fetcher.state !== 'idle'}
+                isLoading={fetcher.state !== 'idle'}
                 type="submit"
-                className="cursor-pointer rounded p-1 hover:bg-[#707FDD]/10 hover:text-[#5363AB]"
+                className="w-full rounded p-1"
               >
                 Logout
               </Button>

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>