legalgonews/legalgo-FE-reactrouter
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Ardeman 2025-03-14 23:50:27 +08:00
parent d538c56d26
commit 19a5e6ab88
20 changed files with 72 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/components/dialog/delete.tsx
View File

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

6
app/components/dialog/success.tsx
View File

@ -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)

2
app/components/text-editor/editor-menubar.tsx
View File

@ -21,7 +21,7 @@ import {
StrikethroughIcon,
SwatchIcon,
XCircleIcon,
} from '@heroicons/react/20/solid'
} from '@heroicons/react/24/solid'
import {
Bars3BottomCenterIcon,
QuotationMarkIcon,

2
app/components/text-editor/editor-textarea.tsx
View File

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

14
app/components/ui/button.tsx
View File

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

2
app/components/ui/combobox.tsx
View File

@ -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,

2
app/components/ui/input-file.tsx
View File

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

2
app/components/ui/newsletter.tsx
View File

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

2
app/components/ui/social-share.tsx
View File

@ -1,4 +1,4 @@
import { LinkIcon } from '@heroicons/react/20/solid'
import { LinkIcon } from '@heroicons/react/24/solid'
import { useState } from 'react'
import {
FacebookShareButton,

2
app/components/ui/table-search.tsx
View File

@ -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 {

5
app/contexts/admin.tsx
View File

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

2
app/layouts/admin/menu.ts
View File

@ -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 = {

46
app/layouts/admin/navbar.tsx
View File

@ -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>

2
app/layouts/news/footer-newsletter.tsx
View File

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

4
app/layouts/news/header-menu-mobile.tsx
View File

@ -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)

4
app/layouts/news/header-top.tsx
View File

@ -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)}
>

4
app/pages/dashboard-advertisements/index.tsx
View File

@ -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"
>

4
app/pages/dashboard-categories/index.tsx
View File

@ -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"
>

4
app/pages/dashboard-subscribe-plan/index.tsx
View File

@ -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"
>

4
app/pages/dashboard-tags/index.tsx
View File

@ -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"
>