Button fixes

src/components/buttons/ActionButton.tsx

@@ -1,6 +1,6 @@
 import { FC } from 'react'
 import Button, { ButtonVariant } from '../buttons/Button'
-import { Icon, layers, download } from '@/components/icons'
+import { Icon, trash, download } from '@/components/icons'
 
 // Define available action types
 export type ActionType = 'install_cream' | 'uninstall_cream' | 'install_smoke' | 'uninstall_smoke'
@@ -45,14 +45,12 @@ const ActionButton: FC<ActionButtonProps> = ({
 
   // Select appropriate icon based on action type and state
   const getIconInfo = () => {
-    const isCream = action.includes('cream')
-
     if (isInstalled) {
       // Uninstall actions
-      return { name: layers, variant: 'bold' }
+      return { name: trash, variant: 'solid' }
     } else {
       // Install actions
-      return { name: download, variant: isCream ? 'bold' : 'outline' }
+      return { name: download, variant: 'solid' }
     }
   }
 

src/components/buttons/AnimatedCheckbox.tsx

@@ -23,7 +23,7 @@ const AnimatedCheckbox = ({
       <input type="checkbox" checked={checked} onChange={onChange} className="checkbox-original" />
 
       <span className={`checkbox-custom ${checked ? 'checked' : ''}`}>
-        {checked && <Icon name={check} variant="bold" size="sm" className="checkbox-icon" />}
+        {checked && <Icon name={check} variant="solid" size="sm" className="checkbox-icon" />}
       </span>
 
       {(label || sublabel) && (

src/components/buttons/Button.tsx

@@ -10,6 +10,7 @@ interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   leftIcon?: React.ReactNode
   rightIcon?: React.ReactNode
   fullWidth?: boolean
+  iconOnly?: boolean
 }
 
 /**
@@ -23,6 +24,7 @@ const Button: FC<ButtonProps> = ({
   leftIcon,
   rightIcon,
   fullWidth = false,
+  iconOnly = false,
   className = '',
   disabled,
   ...props
@@ -43,11 +45,14 @@ const Button: FC<ButtonProps> = ({
     warning: 'btn-warning',
   }[variant]
 
+  // Determine if this is an icon-only button
+  const isIconOnly = iconOnly || (!children && (leftIcon || rightIcon))
+
   return (
     <button
       className={`btn ${variantClass} ${sizeClass} ${fullWidth ? 'btn-full' : ''} ${
         isLoading ? 'btn-loading' : ''
-      } ${className}`}
+      } ${isIconOnly ? 'btn-icon-only' : ''} ${className}`}
       disabled={disabled || isLoading}
       {...props}
     >
@@ -58,7 +63,7 @@ const Button: FC<ButtonProps> = ({
       )}
 
       {leftIcon && !isLoading && <span className="btn-icon btn-icon-left">{leftIcon}</span>}
-      <span className="btn-text">{children}</span>
+      {children && <span className="btn-text">{children}</span>}
       {rightIcon && !isLoading && <span className="btn-icon btn-icon-right">{rightIcon}</span>}
     </button>
   )