feat: update icon size classes for consistency across components

app/components/ui/button.tsx

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

app/components/ui/input-file.tsx

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

app/components/ui/input.tsx

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

app/components/ui/news-author.tsx

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

app/components/ui/social-share.tsx

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

app/components/ui/table-search.tsx

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