fix: update button styles and variants for consistency across forms

app/layouts/news/header-menu.tsx

@@ -1,5 +1,6 @@
 import { Link, useRouteLoaderData } from 'react-router'
 
+import { Button } from '~/components/ui/button'
 import HeaderMenuMobile from '~/layouts/news/header-menu-mobile'
 import type { loader } from '~/routes/_news'
 
@@ -17,15 +18,17 @@ export const HeaderMenu = () => {
     <>
       <div className="hidden h-[60px] items-center justify-between bg-[#2E2F7C] text-xl font-medium text-white sm:flex">
         {menu?.map((item) => (
-          <Link
+          <Button
+            as={Link}
             key={item.id}
             to={`/category/${item.code}`}
+            size="fit"
             className={
-              'flex h-full items-center justify-center border-r border-white px-[35px]'
+              'flex h-full items-center justify-center border-r border-white px-[35px] text-xl'
             }
           >
             {item.name}
-          </Link>
+          </Button>
         ))}
         <HeaderSearch />
       </div>