feat: update heroicons to version 24 and refactor button variants for consistency

app/layouts/admin/menu.ts

@@ -7,7 +7,7 @@ import {
   PresentationChartLineIcon,
   TagIcon,
   UsersIcon,
-} from '@heroicons/react/20/solid'
+} from '@heroicons/react/24/solid'
 import type { SVGProps } from 'react'
 
 type TMenu = {

app/layouts/admin/navbar.tsx

@@ -1,16 +1,22 @@
 import { Popover, PopoverButton, PopoverPanel } from '@headlessui/react'
+import {
+  ArrowRightStartOnRectangleIcon,
+  UserIcon,
+} from '@heroicons/react/24/outline'
 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 { useAdminContext } from '~/contexts/admin'
 import type { loader } from '~/routes/_admin.lg-admin'
 
 export const Navbar = () => {
   const loaderData = useRouteLoaderData<typeof loader>('routes/_admin.lg-admin')
   const { staffData } = loaderData || {}
   const fetcher = useFetcher()
+  const { setEditProfile } = useAdminContext()
 
   return (
     <div className="flex h-20 items-center justify-between border-b border-[#ECECEC] bg-white px-10 py-5">
@@ -45,22 +51,38 @@ export const Navbar = () => {
           <PopoverPanel
             anchor={{ to: 'bottom', gap: '8px' }}
             transition
-            className="flex w-3xs flex-col rounded-xl border border-[#ECECEC] bg-white p-3 transition duration-200 ease-in-out data-[closed]:-translate-y-1 data-[closed]:opacity-0"
+            className="flex w-3xs flex-col divide-y divide-black/5 rounded-xl border border-[#ECECEC] bg-white transition duration-200 ease-in-out data-[closed]:-translate-y-1 data-[closed]:opacity-0"
           >
-            <fetcher.Form
-              method="POST"
-              action="/actions/admin/logout"
-              className="grid"
-            >
+            <div className="p-2">
               <Button
-                disabled={fetcher.state !== 'idle'}
-                isLoading={fetcher.state !== 'idle'}
-                type="submit"
-                className="w-full rounded p-1"
+                variant="secondary"
+                className="w-full justify-start rounded p-1 px-3 text-lg font-semibold"
+                onClick={() => {
+                  setEditProfile(true)
+                }}
               >
-                Logout
+                <UserIcon className="size-5" />
+                <span>Profile</span>
               </Button>
-            </fetcher.Form>
+            </div>
+            <div className="p-2">
+              <fetcher.Form
+                method="POST"
+                action="/actions/admin/logout"
+                className="grid"
+              >
+                <Button
+                  disabled={fetcher.state !== 'idle'}
+                  isLoading={fetcher.state !== 'idle'}
+                  type="submit"
+                  className="w-full justify-start rounded p-1 px-3 text-lg font-semibold"
+                  variant="secondary"
+                >
+                  <ArrowRightStartOnRectangleIcon className="size-5" />
+                  <span>Logout</span>
+                </Button>
+              </fetcher.Form>
+            </div>
           </PopoverPanel>
         </Popover>
       </div>

app/layouts/news/footer-newsletter.tsx

@@ -34,7 +34,7 @@ export const FooterNewsletter = () => {
           />
           <Button
             type="submit"
-            variant="newsPrimaryOutline"
+            variant="primaryOutline"
             size="block"
           >
             Subscribe

app/layouts/news/header-menu-mobile.tsx

@@ -70,7 +70,7 @@ export const HeaderMenuMobile = (properties: THeaderMenuMobile) => {
                   action="/actions/logout"
                 >
                   <Button
-                    variant="newsSecondary"
+                    variant="outline"
                     className="w-full px-[35px] py-3 text-center sm:hidden"
                     type="submit"
                   >
@@ -79,7 +79,7 @@ export const HeaderMenuMobile = (properties: THeaderMenuMobile) => {
                 </fetcher.Form>
               ) : (
                 <Button
-                  variant="newsSecondary"
+                  variant="outline"
                   className="w-full px-[35px] py-3 text-center sm:hidden"
                   onClick={() => {
                     setIsMenuOpen(false)

app/layouts/news/header-top.tsx

@@ -33,7 +33,7 @@ export const HeaderTop = () => {
             action="/actions/logout"
           >
             <Button
-              variant="newsSecondary"
+              variant="outline"
               className="hidden sm:flex"
               type="submit"
               disabled={fetcher.state !== 'idle'}
@@ -44,7 +44,7 @@ export const HeaderTop = () => {
           </fetcher.Form>
         ) : (
           <Button
-            variant="newsSecondary"
+            variant="outline"
             className="hidden sm:block"
             onClick={() => setIsLoginOpen(true)}
           >