feat: update icon size classes for consistency across components
This commit is contained in:
parent
cbfb8e72cc
commit
405e57b92d
@ -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>
|
||||
|
||||
@ -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',
|
||||
|
||||
@ -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>
|
||||
)
|
||||
|
||||
@ -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',
|
||||
)}
|
||||
/>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
)
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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}
|
||||
|
||||
@ -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>
|
||||
|
||||
|
||||
@ -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>
|
||||
|
||||
|
||||
@ -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>
|
||||
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user