fix manalinks

web/components/manalink-card.tsx

@@ -11,6 +11,7 @@ import { Claim, Manalink } from 'common/manalink'
 import { ShareIconButton } from './share-icon-button'
 import { useUserById } from 'web/hooks/use-user'
 import getManalinkUrl from 'web/get-manalink-url'
+import { IconButton } from './button'
 
 export type ManalinkInfo = {
   expiresTime: number | null
@@ -122,7 +123,7 @@ export function ManalinkCardFromView(props: {
             src="/logo-white.svg"
           />
         </Col>
-        <Row className="relative w-full gap-1 rounded-b-lg bg-white px-4 py-2 text-lg">
+        <Row className="relative w-full rounded-b-lg bg-white px-4 py-2 align-middle text-lg">
           <div
             className={clsx(
               'my-auto mb-1 w-full',
@@ -132,9 +133,9 @@ export function ManalinkCardFromView(props: {
             {formatMoney(amount)}
           </div>
 
-          <button onClick={() => (window.location.href = qrUrl)}>
+          <IconButton size="2xs" onClick={() => (window.location.href = qrUrl)}>
             <QrcodeIcon className="h-6 w-6" />
-          </button>
+          </IconButton>
 
           <ShareIconButton
             toastClassName={'-left-48 min-w-[250%]'}
@@ -144,16 +145,15 @@ export function ManalinkCardFromView(props: {
             }
             copyPayload={getManalinkUrl(link.slug)}
           />
-          <button
+          <IconButton
+            size="xs"
             onClick={() => setShowDetails(!showDetails)}
             className={clsx(
-              showDetails
+              showDetails ? ' text-indigo-600 hover:text-indigo-700' : ''
-                ? 'bg-gray-200 text-gray-600 hover:bg-gray-200 hover:text-gray-600'
-                : ''
             )}
           >
-            <DotsHorizontalIcon className="h-[24px] w-5" />
+            <DotsHorizontalIcon className="h-5 w-5" />
-          </button>
+          </IconButton>
         </Row>
       </Col>
       <div className="mt-2 mb-4 text-xs text-gray-500 md:text-sm">

web/components/share-icon-button.tsx

@@ -5,32 +5,22 @@ import clsx from 'clsx'
 import { copyToClipboard } from 'web/lib/util/copy'
 import { ToastClipboard } from 'web/components/toast-clipboard'
 import { track } from 'web/lib/service/analytics'
+import { IconButton } from './button'
 
 export function ShareIconButton(props: {
-  buttonClassName?: string
-  onCopyButtonClassName?: string
   toastClassName?: string
   children?: React.ReactNode
   iconClassName?: string
   copyPayload: string
 }) {
-  const {
+  const { toastClassName, children, iconClassName, copyPayload } = props
-    buttonClassName,
-    onCopyButtonClassName,
-    toastClassName,
-    children,
-    iconClassName,
-    copyPayload,
-  } = props
   const [showToast, setShowToast] = useState(false)
 
   return (
     <div className="relative z-10 flex-shrink-0">
-      <button
+      <IconButton
-        className={clsx(
+        size="2xs"
-          buttonClassName,
+        className={clsx('mt-1', showToast ? 'text-indigo-600' : '')}
-          showToast ? onCopyButtonClassName : ''
-        )}
         onClick={() => {
           copyToClipboard(copyPayload)
           track('copy share link')
@@ -39,11 +29,11 @@ export function ShareIconButton(props: {
         }}
       >
         <LinkIcon
-          className={clsx(iconClassName ? iconClassName : 'h-[24px] w-5')}
+          className={clsx(iconClassName ? iconClassName : 'h-5 w-5')}
           aria-hidden="true"
         />
         {children}
-      </button>
+      </IconButton>
 
       {showToast && <ToastClipboard className={toastClassName} />}
     </div>