feat: update icon size classes for consistency across components

This commit is contained in:
Ardeman 2025-03-15 08:58:34 +08:00
parent cbfb8e72cc
commit 405e57b92d
14 changed files with 28 additions and 28 deletions

View File

@ -361,7 +361,7 @@ export const EditorMenuBar = (properties: TProperties) => {
setIsUploadOpen('content')
}}
>
<CloudArrowUpIcon className="h-4 w-4 text-gray-500/50" />
<CloudArrowUpIcon className="size-4 text-gray-500/50" />
</Button>
</div>
</div>

View File

@ -25,7 +25,7 @@ const buttonVariants = cva(
size: {
default: 'h-[50px] w-[150px]',
block: 'h-[50px] w-full',
icon: 'h-9 w-9 rounded-full',
icon: 'size-9 rounded-full',
sm: 'h-8 rounded-md px-3 text-xs',
lg: 'h-10 rounded-md px-8',
fit: 'w-fit',

View File

@ -80,7 +80,7 @@ export const InputFile = (properties: TInputProperties) => {
setIsUploadOpen(category)
}}
>
<CloudArrowUpIcon className="h-4 w-4 text-gray-500/50" />
<CloudArrowUpIcon className="size-4 text-gray-500/50" />
</Button>
</Field>
)

View File

@ -83,7 +83,7 @@ export const Input = <TFormValues extends Record<string, unknown>>(
>
<EyeIcon
className={twMerge(
'h-4 w-4',
'size-4',
inputType === 'password' ? 'text-gray-500/50' : 'text-gray-500',
)}
/>

View File

@ -15,10 +15,10 @@ export const NewsAuthor = ({ author, live_at, text }: TDetailNewsAuthor) => {
<img
src={author?.profile_picture}
alt={author?.name}
className="h-12 w-12 rounded-full bg-[#C4C4C4] object-cover"
className="size-12 rounded-full bg-[#C4C4C4] object-cover"
/>
) : (
<ProfileIcon className="h-12 w-12 rounded-full bg-[#C4C4C4]" />
<ProfileIcon className="size-12 rounded-full bg-[#C4C4C4]" />
)}
<div>

View File

@ -39,7 +39,7 @@ export const SocialShareButtons = ({
onClick={handleCopyLink}
className="relative cursor-pointer"
>
<LinkIcon className="h-8 w-8 rounded-full bg-[#F4F4F4] p-2 sm:h-10 sm:w-10" />
<LinkIcon className="size-8 rounded-full bg-[#F4F4F4] p-2 sm:h-10 sm:w-10" />
{showPopup && (
<div className="absolute top-12 w-48 rounded-lg border-2 border-gray-400 bg-white p-2 shadow-lg">
Link berhasil disalin!
@ -51,28 +51,28 @@ export const SocialShareButtons = ({
url={url}
title={title}
>
<FacebookIcon className="h-8 w-8 rounded-full bg-[#F4F4F4] p-2 sm:h-10 sm:w-10" />
<FacebookIcon className="size-8 rounded-full bg-[#F4F4F4] p-2 sm:h-10 sm:w-10" />
</FacebookShareButton>
<LinkedinShareButton
url={url}
title={title}
>
<LinkedinIcon className="h-8 w-8 rounded-full bg-[#F4F4F4] p-2 sm:h-10 sm:w-10" />
<LinkedinIcon className="size-8 rounded-full bg-[#F4F4F4] p-2 sm:h-10 sm:w-10" />
</LinkedinShareButton>
<TwitterShareButton
url={url}
title={title}
>
<XIcon className="h-8 w-8 rounded-full bg-[#F4F4F4] p-2 sm:h-10 sm:w-10" />
<XIcon className="size-8 rounded-full bg-[#F4F4F4] p-2 sm:h-10 sm:w-10" />
</TwitterShareButton>
<button
onClick={handleInstagramShare}
className="cursor-pointer"
>
<InstagramIcon className="h-8 w-8 rounded-full bg-[#F4F4F4] p-2 sm:h-10 sm:w-10" />
<InstagramIcon className="size-8 rounded-full bg-[#F4F4F4] p-2 sm:h-10 sm:w-10" />
</button>
</div>
)

View File

@ -42,7 +42,7 @@ export const TableSearchFilter: React.FC<SearchFilterProperties> = ({
className="w-full rounded-lg bg-white p-2 pr-10 pl-4 shadow focus:ring-1 focus:ring-[#2E2F7C] focus:outline-none"
/>
<div className="absolute inset-y-0 right-0 flex items-center pr-3">
<MagnifyingGlassIcon className="h-5 w-5 text-[#363636]" />
<MagnifyingGlassIcon className="size-5 text-[#363636]" />
</div>
</div>
</Field>

View File

@ -38,10 +38,10 @@ export const Navbar = () => {
<img
src={staffData?.profile_picture}
alt={staffData?.name}
className="h-8 w-8 rounded-full bg-[#C4C4C4] object-cover"
className="size-8 rounded-full bg-[#C4C4C4] object-cover"
/>
) : (
<ProfileIcon className="h-8 w-8 rounded-full bg-[#C4C4C4]" />
<ProfileIcon className="size-8 rounded-full bg-[#C4C4C4]" />
)}
<span className="text-sm">{staffData?.name}</span>

View File

@ -37,7 +37,7 @@ export const HeaderMenuMobile = (properties: THeaderMenuMobile) => {
{/* Tombol Close */}
<button
onClick={handleToggleMenu}
className="fixed top-5 right-5 z-20 flex h-9 w-9 items-center justify-center lg:hidden"
className="fixed top-5 right-5 z-20 flex size-9 items-center justify-center lg:hidden"
>
<CloseIcon
width={50}

View File

@ -74,7 +74,7 @@ export const AdvertisementsPage = () => {
size="icon"
title="Update Banner Iklan"
>
<PencilSquareIcon className="h-4 w-4" />
<PencilSquareIcon className="size-4" />
</Button>
<Button
type="button"
@ -83,7 +83,7 @@ export const AdvertisementsPage = () => {
onClick={() => setSelectedAds(data)}
title="Hapus Banner Iklan"
>
<TrashIcon className="h-4 w-4" />
<TrashIcon className="size-4" />
</Button>
</div>
),
@ -101,7 +101,7 @@ export const AdvertisementsPage = () => {
size="lg"
className="text-md h-[42px] px-4"
>
<PlusIcon className="h-8 w-8" /> Buat Banner Iklan
<PlusIcon className="size-8" /> Buat Banner Iklan
</Button>
</div>

View File

@ -70,7 +70,7 @@ export const CategoriesPage = () => {
size="icon"
title="Update Kategori"
>
<PencilSquareIcon className="h-4 w-4" />
<PencilSquareIcon className="size-4" />
</Button>
{data.code === 'spotlight' ? (
''
@ -82,7 +82,7 @@ export const CategoriesPage = () => {
onClick={() => setSelectedCategory(data)}
title="Hapus Kategori"
>
<TrashIcon className="h-4 w-4" />
<TrashIcon className="size-4" />
</Button>
)}
</div>
@ -106,7 +106,7 @@ export const CategoriesPage = () => {
size="lg"
className="text-md h-[42px] px-4"
>
<PlusIcon className="h-8 w-8" /> Buat Kategori
<PlusIcon className="size-8" /> Buat Kategori
</Button>
</div>

View File

@ -86,7 +86,7 @@ export const SubscribePlanPage = () => {
size="icon"
title="Update Subscribe Plan"
>
<PencilSquareIcon className="h-4 w-4" />
<PencilSquareIcon className="size-4" />
</Button>
<Button
type="button"
@ -95,7 +95,7 @@ export const SubscribePlanPage = () => {
onClick={() => setSelectedSubscribePlan(data)}
title="Hapus Subscribe Plan"
>
<TrashIcon className="h-4 w-4" />
<TrashIcon className="size-4" />
</Button>
</div>
),
@ -111,7 +111,7 @@ export const SubscribePlanPage = () => {
size="lg"
className="text-md h-[42px] px-4"
>
<PlusIcon className="h-8 w-8" /> Buat Subscribe Plan
<PlusIcon className="size-8" /> Buat Subscribe Plan
</Button>
</div>

View File

@ -43,7 +43,7 @@ export const SubscriptionsPage = () => {
className="w-full rounded-lg bg-white p-2 pr-10 pl-4 shadow focus:ring-1 focus:ring-[#2E2F7C] focus:outline-none"
/>
<div className="absolute inset-y-0 right-0 flex items-center pr-3">
<SearchIcon className="h-5 w-5" />
<SearchIcon className="size-5" />
</div>
</div>
</Field>

View File

@ -59,7 +59,7 @@ export const TagsPage = () => {
size="icon"
title="Update Tag"
>
<PencilSquareIcon className="h-4 w-4" />
<PencilSquareIcon className="size-4" />
</Button>
<Button
type="button"
@ -68,7 +68,7 @@ export const TagsPage = () => {
onClick={() => setSelectedTag(data)}
title="Hapus Tag"
>
<TrashIcon className="h-4 w-4" />
<TrashIcon className="size-4" />
</Button>
</div>
),
@ -102,7 +102,7 @@ export const TagsPage = () => {
size="lg"
className="text-md h-[42px] px-4"
>
<PlusIcon className="h-8 w-8" /> Buat Tag
<PlusIcon className="size-8" /> Buat Tag
</Button>
</div>