feat: remove ChevronIcon in navbar; add icon prop to Button component

app/layouts/admin/navbar.tsx

@@ -3,9 +3,9 @@ import {
   ArrowRightStartOnRectangleIcon,
   UserIcon,
 } from '@heroicons/react/24/outline'
+import { ChevronDownIcon } from '@heroicons/react/24/solid'
 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'
@@ -46,7 +46,7 @@ export const Navbar = () => {
 
               <span className="text-sm">{staffData?.name}</span>
             </div>
-            <ChevronIcon className="opacity-50" />
+            <ChevronDownIcon className="size-4 opacity-50" />
           </PopoverButton>
           <PopoverPanel
             anchor={{ to: 'bottom', gap: '8px' }}
@@ -77,8 +77,8 @@ export const Navbar = () => {
                   type="submit"
                   className="w-full justify-start rounded p-1 px-3 text-lg font-semibold"
                   variant="secondary"
+                  icon={<ArrowRightStartOnRectangleIcon className="size-5" />}
                 >
-                  <ArrowRightStartOnRectangleIcon className="size-5" />
                   <span>Logout</span>
                 </Button>
               </fetcher.Form>