Merge branch 'update-zap-button-icons' into 'main'

update-zap-button-icons

See merge request soapbox-pub/soapbox!3082

src/assets/icons/COPYING.md

@@ -1,3 +1,8 @@
 # Custom icons
 
+- blue-chest.png - Generated by Midjourney for Soapbox. CC0
+- coin-chest.png - Generated by Midjourney for Soapbox. CC0
+- coin.png - Generated by Midjourney for Soapbox. CC0
+- money-bag.png - Generated by Midjourney for Soapbox. CC0
+- pile-coin.png - Generated by Midjourney for Soapbox. CC0
 - verified.svg - Created by Alex Gleason. CC0

src/components/ui/button/button.tsx

@@ -17,6 +17,8 @@ interface IButton {
   className?: string;
   /** Prevent the button from being clicked. */
   disabled?: boolean;
+  /** Specifies the icon element as 'svg' or 'img'. */
+  iconElement?: 'svg' | 'img';
   /** URL to an SVG icon to render inside the button. */
   icon?: string;
   /** Action when the button is clicked. */
@@ -39,6 +41,7 @@ const Button = React.forwardRef<HTMLButtonElement, IButton>((props, ref): JSX.El
     block = false,
     children,
     disabled = false,
+    iconElement,
     icon,
     onClick,
     size = 'md',
@@ -63,7 +66,7 @@ const Button = React.forwardRef<HTMLButtonElement, IButton>((props, ref): JSX.El
       return null;
     }
 
-    return <Icon src={icon} className='h-4 w-4' />;
+    return <Icon src={icon} className='h-4 w-4' element={iconElement} />;
   };
 
   const handleClick: React.MouseEventHandler<HTMLButtonElement> = React.useCallback((event) => {

src/components/ui/icon/icon.tsx

@@ -17,24 +17,28 @@ interface IIcon extends Pick<React.SVGAttributes<SVGAElement>, 'strokeWidth'> {
   src: string;
   /** Width and height of the icon in pixels. */
   size?: number;
+  /** Specifies the media element type as 'svg' or 'img'. */
+  element?: 'svg' | 'img';
   /** Override the data-testid */
   'data-testid'?: string;
 }
 
-/** Renders and SVG icon with optional counter. */
-const Icon: React.FC<IIcon> = ({ src, alt, count, size, countMax, ...filteredProps }): JSX.Element => (
-  <div
-    className='relative flex shrink-0 flex-col'
-    data-testid={filteredProps['data-testid'] || 'icon'}
-  >
-    {count ? (
-      <span className='absolute -right-3 -top-2 flex h-5 min-w-[20px] shrink-0 items-center justify-center whitespace-nowrap break-words'>
-        <Counter count={count} countMax={countMax} />
-      </span>
-    ) : null}
+/** Renders an SVG or image icon with optional counter. */
+const Icon: React.FC<IIcon> = ({ src, alt, count, size, countMax, element = 'svg', ...filteredProps }): JSX.Element => {
+  return (
+    <div
+      className='relative flex shrink-0 flex-col'
+      data-testid={filteredProps['data-testid'] || 'icon'}
+    >
+      {count ? (
+        <span className='absolute -right-3 -top-2 flex h-5 min-w-[20px] shrink-0 items-center justify-center whitespace-nowrap break-words'>
+          <Counter count={count} countMax={countMax} />
+        </span>
+      ) : null}
+      {element === 'svg' ? (<SvgIcon src={src} size={size} alt={alt} {...filteredProps} />) : (<img src={src} width={size} height={size} alt={alt} {...filteredProps} />) }
 
-    <SvgIcon src={src} size={size} alt={alt} {...filteredProps} />
-  </div>
-);
+    </div>
+  );
+};
 
 export default Icon;

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

@@ -3,6 +3,11 @@ import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
 import { zap } from 'soapbox/actions/interactions';
 import { openModal, closeModal } from 'soapbox/actions/modals';
+import chestIcon from 'soapbox/assets/icons/blue-chest.png';
+import coinStack from 'soapbox/assets/icons/coin-stack.png';
+import coinIcon from 'soapbox/assets/icons/coin.png';
+import moneyBag from 'soapbox/assets/icons/money-bag.png';
+import pileCoin from 'soapbox/assets/icons/pile-coin.png';
 import Account from 'soapbox/components/account';
 import { Stack, Button, Input } from 'soapbox/components/ui';
 import { useAppDispatch } from 'soapbox/hooks';
@@ -66,11 +71,11 @@ const ZapPayRequestForm = ({ account, status }: IZapPayRequestForm) => {
       </div>
 
       <div className='flex justify-center '>
-        <Button onClick={() => setZapAmount(50)} className='m-1' type='button' theme={zapAmount === 50 ? 'primary' : 'muted'} text='👍 50' />
-        <Button onClick={() => setZapAmount(200)} className='m-1' type='button' theme={zapAmount === 200 ? 'primary' : 'muted'} text='🩵  200' />
-        <Button onClick={() => setZapAmount(1_000)} className='m-1' type='button' theme={zapAmount === 1_000 ? 'primary' : 'muted'} text='🤩 1K' />
-        <Button onClick={() => setZapAmount(3_000)} className='m-1' type='button' theme={zapAmount === 3_000 ? 'primary' : 'muted'} text='🔥 3K' />
-        <Button onClick={() => setZapAmount(5_000)} className='m-1' type='button' theme={zapAmount === 5_000 ? 'primary' : 'muted'} text='🧙 5K' />
+        <Button onClick={() => setZapAmount(50)} className='m-1' type='button' iconElement='img' icon={coinIcon} theme={zapAmount === 50 ? 'primary' : 'muted'} text='50' />
+        <Button onClick={() => setZapAmount(200)} className='m-1' type='button' iconElement='img' icon={coinStack} theme={zapAmount === 200 ? 'primary' : 'muted'} text='200' />
+        <Button onClick={() => setZapAmount(1_000)} className='m-1' type='button' iconElement='img' icon={pileCoin} theme={zapAmount === 1_000 ? 'primary' : 'muted'} text='1K' />
+        <Button onClick={() => setZapAmount(3_000)} className='m-1' type='button' iconElement='img' icon={moneyBag} theme={zapAmount === 3_000 ? 'primary' : 'muted'} text='3K' />
+        <Button onClick={() => setZapAmount(5_000)} className='m-1' type='button' iconElement='img' icon={chestIcon} theme={zapAmount === 5_000 ? 'primary' : 'muted'} text='5K' />
       </div>
 
       <div className='flex justify-center'>