From 19a5e6ab884ffd81071bdb2b06e5987cc3291863 Mon Sep 17 00:00:00 2001
From: Ardeman <are.theman@gmail.com>
Date: Fri, 14 Mar 2025 23:50:27 +0800
Subject: [PATCH] feat: update heroicons to version 24 and refactor button
 variants for consistency

---
 app/components/dialog/delete.tsx              |  2 +-
 app/components/dialog/success.tsx             |  6 +--
 app/components/text-editor/editor-menubar.tsx |  2 +-
 .../text-editor/editor-textarea.tsx           |  2 +-
 app/components/ui/button.tsx                  | 14 +++---
 app/components/ui/combobox.tsx                |  2 +-
 app/components/ui/input-file.tsx              |  2 +-
 app/components/ui/newsletter.tsx              |  2 +-
 app/components/ui/social-share.tsx            |  2 +-
 app/components/ui/table-search.tsx            |  2 +-
 app/contexts/admin.tsx                        |  5 ++
 app/layouts/admin/menu.ts                     |  2 +-
 app/layouts/admin/navbar.tsx                  | 46 ++++++++++++++-----
 app/layouts/news/footer-newsletter.tsx        |  2 +-
 app/layouts/news/header-menu-mobile.tsx       |  4 +-
 app/layouts/news/header-top.tsx               |  4 +-
 app/pages/dashboard-advertisements/index.tsx  |  4 +-
 app/pages/dashboard-categories/index.tsx      |  4 +-
 app/pages/dashboard-subscribe-plan/index.tsx  |  4 +-
 app/pages/dashboard-tags/index.tsx            |  4 +-
 20 files changed, 72 insertions(+), 43 deletions(-)

diff --git a/app/components/dialog/delete.tsx b/app/components/dialog/delete.tsx
index 351e2e3..b83a055 100644
--- a/app/components/dialog/delete.tsx
+++ b/app/components/dialog/delete.tsx
@@ -71,7 +71,7 @@ export const DialogDelete = (properties: TProperties) => {
             >
               <Button
                 type="submit"
-                variant="newsDanger"
+                variant="danger"
                 className="text-md h-[42px] rounded-md"
                 disabled={fetcher.state !== 'idle'}
                 isLoading={fetcher.state !== 'idle'}
diff --git a/app/components/dialog/success.tsx b/app/components/dialog/success.tsx
index 7c79838..bd55460 100644
--- a/app/components/dialog/success.tsx
+++ b/app/components/dialog/success.tsx
@@ -92,7 +92,7 @@ export const DialogSuccess = ({ isOpen, onClose }: ModalProperties) => {
                   />
                   <Button
                     className="mt-5 w-full rounded-md"
-                    variant="newsPrimary"
+                    variant="primary"
                     as={Link}
                     to="/"
                     onClick={onClose}
@@ -111,7 +111,7 @@ export const DialogSuccess = ({ isOpen, onClose }: ModalProperties) => {
                   {userData ? (
                     <Button
                       className="mt-5 w-full rounded-md"
-                      variant="newsSecondary"
+                      variant="outline"
                       onClick={() => {
                         onClose()
                         setIsSubscribeOpen(true)
@@ -122,7 +122,7 @@ export const DialogSuccess = ({ isOpen, onClose }: ModalProperties) => {
                   ) : (
                     <Button
                       className="mt-5 w-full rounded-md"
-                      variant="newsPrimary"
+                      variant="primary"
                       onClick={() => {
                         onClose()
                         setIsLoginOpen(true)
diff --git a/app/components/text-editor/editor-menubar.tsx b/app/components/text-editor/editor-menubar.tsx
index cee6191..ba6ede5 100644
--- a/app/components/text-editor/editor-menubar.tsx
+++ b/app/components/text-editor/editor-menubar.tsx
@@ -21,7 +21,7 @@ import {
   StrikethroughIcon,
   SwatchIcon,
   XCircleIcon,
-} from '@heroicons/react/20/solid'
+} from '@heroicons/react/24/solid'
 import {
   Bars3BottomCenterIcon,
   QuotationMarkIcon,
diff --git a/app/components/text-editor/editor-textarea.tsx b/app/components/text-editor/editor-textarea.tsx
index b84b24a..61ed906 100644
--- a/app/components/text-editor/editor-textarea.tsx
+++ b/app/components/text-editor/editor-textarea.tsx
@@ -1,4 +1,4 @@
-import { CodeBracketSquareIcon } from '@heroicons/react/20/solid'
+import { CodeBracketSquareIcon } from '@heroicons/react/24/solid'
 import MonacoEditor from '@monaco-editor/react'
 import type { Dispatch, SetStateAction } from 'react'
 import { Controller } from 'react-hook-form'
diff --git a/app/components/ui/button.tsx b/app/components/ui/button.tsx
index ffd5e69..bfa8400 100644
--- a/app/components/ui/button.tsx
+++ b/app/components/ui/button.tsx
@@ -1,5 +1,5 @@
 import { Button as HeadlessButton } from '@headlessui/react'
-import { ArrowPathIcon } from '@heroicons/react/20/solid'
+import { ArrowPathIcon } from '@heroicons/react/24/solid'
 import { cva, type VariantProps } from 'class-variance-authority'
 import type { ReactNode, ElementType, ComponentPropsWithoutRef } from 'react'
 import { twMerge } from 'tailwind-merge'
@@ -9,16 +9,18 @@ const buttonVariants = cva(
   {
     variants: {
       variant: {
-        newsPrimary:
+        primary:
           'bg-[#2E2F7C] text-white text-lg hover:bg-[#4C5CA0] hover:shadow transition active:bg-[#6970B4]',
-        newsDanger:
+        danger:
           'bg-[#EF4444] text-white text-lg hover:shadow transition active:bg-[#FEE2E2] hover:bg-[#FCA5A5]',
-        newsPrimaryOutline:
+        primaryOutline:
           'border-[3px] bg-[#2E2F7C]  border-white text-white text-lg hover:bg-[#4C5CA0] hover:shadow-lg active:shadow-2xl transition active:bg-[#6970B4]',
-        newsSecondary:
+        outline:
           'border-[3px] bg-white hover:shadow-lg active:shadow-2xl border-[#2E2F7C] text-[#2E2F7C] hover:text-[#4C5CA0] active:text-[#6970B4] text-lg hover:border-[#4C5CA0] transition active:border-[#6970B4]',
         icon: '',
         link: 'font-semibold text-[#2E2F7C] hover:text-[#4C5CA0] active:text-[#6970B4] transition',
+        secondary:
+          'hover:bg-[#707FDD]/10 active:bg-[#707FDD]/20 hover:text-[#707FDD] text-[#273240]',
       },
       size: {
         default: 'h-[50px] w-[150px]',
@@ -30,7 +32,7 @@ const buttonVariants = cva(
       },
     },
     defaultVariants: {
-      variant: 'newsPrimary',
+      variant: 'primary',
       size: 'default',
     },
   },
diff --git a/app/components/ui/combobox.tsx b/app/components/ui/combobox.tsx
index ce70066..d35e7e6 100644
--- a/app/components/ui/combobox.tsx
+++ b/app/components/ui/combobox.tsx
@@ -7,7 +7,7 @@ import {
   ComboboxOptions,
   ComboboxOption,
 } from '@headlessui/react'
-import { CheckIcon, ChevronDownIcon } from '@heroicons/react/20/solid'
+import { CheckIcon, ChevronDownIcon } from '@heroicons/react/24/solid'
 import { useState, type ComponentProps, type ReactNode } from 'react'
 import {
   get,
diff --git a/app/components/ui/input-file.tsx b/app/components/ui/input-file.tsx
index aae1ea1..0905a9d 100644
--- a/app/components/ui/input-file.tsx
+++ b/app/components/ui/input-file.tsx
@@ -1,5 +1,5 @@
 import { Field, Label, Input as HeadlessInput } from '@headlessui/react'
-import { CloudArrowUpIcon } from '@heroicons/react/20/solid'
+import { CloudArrowUpIcon } from '@heroicons/react/24/solid'
 import { useEffect, type ComponentProps, type ReactNode } from 'react'
 import { get, type FieldError, type RegisterOptions } from 'react-hook-form'
 import { useRemixFormContext } from 'remix-hook-form'
diff --git a/app/components/ui/newsletter.tsx b/app/components/ui/newsletter.tsx
index 4473097..228024d 100644
--- a/app/components/ui/newsletter.tsx
+++ b/app/components/ui/newsletter.tsx
@@ -45,7 +45,7 @@ export const Newsletter = (property: NewsletterProperties) => {
             />
             <Button
               type="submit"
-              variant="newsPrimary"
+              variant="primary"
               size="block"
             >
               Subscribe
diff --git a/app/components/ui/social-share.tsx b/app/components/ui/social-share.tsx
index 2fcbe9d..ce081a0 100644
--- a/app/components/ui/social-share.tsx
+++ b/app/components/ui/social-share.tsx
@@ -1,4 +1,4 @@
-import { LinkIcon } from '@heroicons/react/20/solid'
+import { LinkIcon } from '@heroicons/react/24/solid'
 import { useState } from 'react'
 import {
   FacebookShareButton,
diff --git a/app/components/ui/table-search.tsx b/app/components/ui/table-search.tsx
index c71cce5..b28a0e3 100644
--- a/app/components/ui/table-search.tsx
+++ b/app/components/ui/table-search.tsx
@@ -1,5 +1,5 @@
 import { Field, Input, Label, Select } from '@headlessui/react'
-import { MagnifyingGlassIcon } from '@heroicons/react/20/solid'
+import { MagnifyingGlassIcon } from '@heroicons/react/24/solid'
 import { useState } from 'react'
 
 interface SearchFilterProperties {
diff --git a/app/contexts/admin.tsx b/app/contexts/admin.tsx
index c64ccc9..47660fd 100644
--- a/app/contexts/admin.tsx
+++ b/app/contexts/admin.tsx
@@ -19,6 +19,8 @@ type AdminContextProperties = {
   setIsUploadOpen: Dispatch<SetStateAction<TUpload>>
   uploadedFile?: string
   setUploadedFile: Dispatch<SetStateAction<string | undefined>>
+  editProfile: boolean
+  setEditProfile: Dispatch<SetStateAction<boolean>>
 }
 
 const AdminContext = createContext<AdminContextProperties | undefined>(
@@ -28,6 +30,7 @@ const AdminContext = createContext<AdminContextProperties | undefined>(
 export const AdminProvider = ({ children }: PropsWithChildren) => {
   const [isUploadOpen, setIsUploadOpen] = useState<TUpload>()
   const [uploadedFile, setUploadedFile] = useState<string | undefined>()
+  const [editProfile, setEditProfile] = useState(false)
 
   return (
     <AdminContext.Provider
@@ -36,6 +39,8 @@ export const AdminProvider = ({ children }: PropsWithChildren) => {
         setIsUploadOpen,
         uploadedFile,
         setUploadedFile,
+        editProfile,
+        setEditProfile,
       }}
     >
       {children}
diff --git a/app/layouts/admin/menu.ts b/app/layouts/admin/menu.ts
index 22d6fe8..ab5011e 100644
--- a/app/layouts/admin/menu.ts
+++ b/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 = {
diff --git a/app/layouts/admin/navbar.tsx b/app/layouts/admin/navbar.tsx
index 6944b92..adb426e 100644
--- a/app/layouts/admin/navbar.tsx
+++ b/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>
diff --git a/app/layouts/news/footer-newsletter.tsx b/app/layouts/news/footer-newsletter.tsx
index bf88d9a..a93c518 100644
--- a/app/layouts/news/footer-newsletter.tsx
+++ b/app/layouts/news/footer-newsletter.tsx
@@ -34,7 +34,7 @@ export const FooterNewsletter = () => {
           />
           <Button
             type="submit"
-            variant="newsPrimaryOutline"
+            variant="primaryOutline"
             size="block"
           >
             Subscribe
diff --git a/app/layouts/news/header-menu-mobile.tsx b/app/layouts/news/header-menu-mobile.tsx
index 3b2a1bb..d72e441 100644
--- a/app/layouts/news/header-menu-mobile.tsx
+++ b/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)
diff --git a/app/layouts/news/header-top.tsx b/app/layouts/news/header-top.tsx
index ceadc50..1c3838f 100644
--- a/app/layouts/news/header-top.tsx
+++ b/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)}
           >
diff --git a/app/pages/dashboard-advertisements/index.tsx b/app/pages/dashboard-advertisements/index.tsx
index 6e036f6..8eb6359 100644
--- a/app/pages/dashboard-advertisements/index.tsx
+++ b/app/pages/dashboard-advertisements/index.tsx
@@ -2,7 +2,7 @@ import {
   PencilSquareIcon,
   PlusIcon,
   TrashIcon,
-} from '@heroicons/react/20/solid'
+} from '@heroicons/react/24/solid'
 import type { ConfigColumns } from 'datatables.net-dt'
 import type { DataTableSlots } from 'datatables.net-react'
 import { useState } from 'react'
@@ -79,7 +79,7 @@ export const AdvertisementsPage = () => {
         <Button
           type="button"
           size="icon"
-          variant="newsDanger"
+          variant="danger"
           onClick={() => setSelectedAds(data)}
           title="Hapus Banner Iklan"
         >
diff --git a/app/pages/dashboard-categories/index.tsx b/app/pages/dashboard-categories/index.tsx
index b44b789..3572ad8 100644
--- a/app/pages/dashboard-categories/index.tsx
+++ b/app/pages/dashboard-categories/index.tsx
@@ -2,7 +2,7 @@ import {
   PencilSquareIcon,
   PlusIcon,
   TrashIcon,
-} from '@heroicons/react/20/solid'
+} from '@heroicons/react/24/solid'
 import DT, { type Config, type ConfigColumns } from 'datatables.net-dt'
 import DataTable, { type DataTableSlots } from 'datatables.net-react'
 import { useState } from 'react'
@@ -78,7 +78,7 @@ export const CategoriesPage = () => {
           <Button
             type="button"
             size="icon"
-            variant="newsDanger"
+            variant="danger"
             onClick={() => setSelectedCategory(data)}
             title="Hapus Kategori"
           >
diff --git a/app/pages/dashboard-subscribe-plan/index.tsx b/app/pages/dashboard-subscribe-plan/index.tsx
index 55b4dcc..4b22791 100644
--- a/app/pages/dashboard-subscribe-plan/index.tsx
+++ b/app/pages/dashboard-subscribe-plan/index.tsx
@@ -2,7 +2,7 @@ import {
   PencilSquareIcon,
   PlusIcon,
   TrashIcon,
-} from '@heroicons/react/20/solid'
+} from '@heroicons/react/24/solid'
 import DT from 'datatables.net-dt'
 import DataTable from 'datatables.net-react'
 import { useState } from 'react'
@@ -91,7 +91,7 @@ export const SubscribePlanPage = () => {
           <Button
             type="button"
             size="icon"
-            variant="newsDanger"
+            variant="danger"
             onClick={() => setSelectedSubscribePlan(data)}
             title="Hapus Subscribe Plan"
           >
diff --git a/app/pages/dashboard-tags/index.tsx b/app/pages/dashboard-tags/index.tsx
index 5fcd7ce..5a9ecb2 100644
--- a/app/pages/dashboard-tags/index.tsx
+++ b/app/pages/dashboard-tags/index.tsx
@@ -2,7 +2,7 @@ import {
   PencilSquareIcon,
   PlusIcon,
   TrashIcon,
-} from '@heroicons/react/20/solid'
+} from '@heroicons/react/24/solid'
 import DT, { type Config, type ConfigColumns } from 'datatables.net-dt'
 import DataTable, { type DataTableSlots } from 'datatables.net-react'
 import { useState } from 'react'
@@ -64,7 +64,7 @@ export const TagsPage = () => {
         <Button
           type="button"
           size="icon"
-          variant="newsDanger"
+          variant="danger"
           onClick={() => setSelectedTag(data)}
           title="Hapus Tag"
         >