fix: action buttion ui

web/app/components/base/action-button/index.css

@@ -2,9 +2,7 @@
 
 @layer components {
     .action-btn {
-        @apply inline-flex justify-center items-center cursor-pointer text-text-tertiary
+        @apply inline-flex justify-center items-center cursor-pointer text-text-tertiary hover:text-text-secondary hover:bg-state-base-hover
-        hover:text-text-secondary 
-        hover:bg-state-base-hover 
     }
 
     .action-btn-disabled {
@@ -29,21 +27,15 @@
     }
 
     .action-btn.action-btn-active {
-        @apply 
+        @apply text-text-accent bg-state-accent-active hover:bg-state-accent-active-alt
-        text-text-accent 
-        bg-state-accent-active
-        hover:bg-state-accent-active-alt
     }
 
     .action-btn.action-btn-disabled {
-        @apply
+        @apply text-text-disabled
-        text-text-disabled
     }
 
     .action-btn.action-btn-destructive {
-        @apply
+        @apply text-text-destructive bg-state-destructive-hover
-        text-text-destructive
-        bg-state-destructive-hover
     }
 
 }

web/app/components/base/action-button/index.tsx

@@ -28,7 +28,7 @@ const actionButtonVariants = cva(
 )
 
 export type ActionButtonProps = {
-  size?: 'xs' | 'm' | 'l' | 'xl'
+  size?: 'xs' | 's' | 'm' | 'l' | 'xl'
   state?: ActionButtonState
   styleCss?: CSSProperties
 } & React.ButtonHTMLAttributes<HTMLButtonElement> & VariantProps<typeof actionButtonVariants>

web/app/components/plugins/plugin-item/action.tsx

@@ -33,21 +33,21 @@ const Action: FC<Props> = ({
   return (
     <div className='flex space-x-1'>
       {isShowFetchNewVersion
-        && <div className='p-0.5 cursor-pointer' onClick={handleFetchNewVersion}>
+        && <ActionButton onClick={handleFetchNewVersion}>
-          <RiLoopLeftLine className='w-5 h-5 text-text-tertiary' />
+          <RiLoopLeftLine className='w-4 h-4 text-text-tertiary' />
-        </div>
+        </ActionButton>
       }
       {
         isShowInfo
         && <ActionButton onClick={showPluginInfo}>
-          <RiInformation2Line className='w-5 h-5 text-text-tertiary' />
+          <RiInformation2Line className='w-4 h-4 text-text-tertiary' />
         </ActionButton>
       }
       {
         isShowDelete
-        && <div className='p-0.5 cursor-pointer' onClick={onDelete}>
+        && <ActionButton className='hover:bg-state-destructive-hover text-text-tertiary hover:text-text-destructive' onClick={onDelete}>
-          <RiDeleteBinLine className='w-5 h-5 text-text-tertiary' />
+          <RiDeleteBinLine className='w-4 h-4' />
-        </div>
+        </ActionButton>
       }
 
       {isShowPluginInfo && (