new-changes

src/components/ui/button/button.tsx

@@ -23,8 +23,6 @@ interface IButton {
   onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
   /** A predefined button size. */
   size?: ButtonSizes;
-  /** A predefined icon size. */
-  iconSize?: number;
   /** Text inside the button. Takes precedence over `children`. */
   text?: React.ReactNode;
   /** Makes the button into a navlink, if provided. */
@@ -42,7 +40,6 @@ const Button = React.forwardRef<HTMLButtonElement, IButton>((props, ref): JSX.El
     children,
     disabled = false,
     icon,
-    iconSize = 4,
     onClick,
     size = 'md',
     text,
@@ -66,7 +63,7 @@ const Button = React.forwardRef<HTMLButtonElement, IButton>((props, ref): JSX.El
       return null;
     }
 
-    return <Icon src={icon} className={`h-${iconSize} w-${iconSize}`} />;
+    return <Icon src={icon} className='h-4 w-4' />;
   };
 
   const handleClick: React.MouseEventHandler<HTMLButtonElement> = React.useCallback((event) => {

src/features/zap/components/zap-pay-request-form.tsx

@@ -7,10 +7,16 @@ import Account from 'soapbox/components/account';
 import { Stack, Button, Input } from 'soapbox/components/ui';
 import { useAppDispatch } from 'soapbox/hooks';
 
-import icons from '../../../components/ui/icon';
-
 import type {  Account as AccountEntity, Status as StatusEntity   } from 'soapbox/types/entities';
 
+const chestIcon = require('soapbox/assets/icons/blue-chest.png');
+const coinStack = require('soapbox/assets/icons/coin-stack.png');
+const coinIcon = require('soapbox/assets/icons/coin.png');
+const moneyBag = require('soapbox/assets/icons/money-bag.png');
+const pileCoin = require('soapbox/assets/icons/pile-coin.png');
+
+
+
 interface IZapPayRequestForm {
   status?: StatusEntity;
   account: AccountEntity;
@@ -68,11 +74,11 @@ const ZapPayRequestForm = ({ account, status }: IZapPayRequestForm) => {
       </div>
 
       <div className='flex justify-center '>
-        <Button onClick={() => setZapAmount(50)} className='m-1' type='button' icon={icons.coinIcon} iconSize={3} theme={zapAmount === 50 ? 'primary' : 'muted'} text='50' />
-        <Button onClick={() => setZapAmount(200)} className='m-1' type='button' icon={icons.coinStack} iconSize={4} theme={zapAmount === 200 ? 'primary' : 'muted'} text='200' />
-        <Button onClick={() => setZapAmount(1_000)} className='m-1' type='button' icon={icons.pileCoin} iconSize={5} theme={zapAmount === 1_000 ? 'primary' : 'muted'} text='1K' />
-        <Button onClick={() => setZapAmount(3_000)} className='m-1' type='button' icon={icons.moneyBag} iconSize={5} theme={zapAmount === 3_000 ? 'primary' : 'muted'} text='3K' />
-        <Button onClick={() => setZapAmount(5_000)} className='m-1' type='button' icon={icons.chestIcon} iconSize={5} theme={zapAmount === 5_000 ? 'primary' : 'muted'} text='5K' />
+        <Button onClick={() => setZapAmount(50)} className='m-1' type='button' icon={coinIcon} theme={zapAmount === 50 ? 'primary' : 'muted'} text='50' />
+        <Button onClick={() => setZapAmount(200)} className='m-1' type='button' icon={coinStack} theme={zapAmount === 200 ? 'primary' : 'muted'} text='200' />
+        <Button onClick={() => setZapAmount(1_000)} className='m-1' type='button' icon={pileCoin} theme={zapAmount === 1_000 ? 'primary' : 'muted'} text='1K' />
+        <Button onClick={() => setZapAmount(3_000)} className='m-1' type='button' icon={moneyBag} theme={zapAmount === 3_000 ? 'primary' : 'muted'} text='3K' />
+        <Button onClick={() => setZapAmount(5_000)} className='m-1' type='button' icon={chestIcon} theme={zapAmount === 5_000 ? 'primary' : 'muted'} text='5K' />
       </div>
 
       <div className='flex justify-center'>