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

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'}

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)

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,

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'

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',
     },
   },

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,

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'

app/components/ui/newsletter.tsx

@@ -45,7 +45,7 @@ export const Newsletter = (property: NewsletterProperties) => {
             />
             <Button
               type="submit"
-              variant="newsPrimary"
+              variant="primary"
               size="block"
             >
               Subscribe

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,

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 {