added cancelling tipping and lil coin

web/components/button.tsx

@@ -108,7 +108,7 @@ export function IconButton(props: {
       className={clsx(
         'inline-flex items-center justify-center transition-colors disabled:cursor-not-allowed',
         sizeClasses[size],
-        'disabled:text-greyscale-2 text-greyscale-6 hover:text-indigo-600',
+        'disabled:text-greyscale-2 text-greyscale-5 hover:text-greyscale-6',
         className
       )}
       disabled={disabled || loading}

web/components/contract/tip-button.tsx

@@ -4,6 +4,7 @@ import { Col } from 'web/components/layout/col'
 import { Tooltip } from '../tooltip'
 import TipJar from 'web/public/custom-components/tipJar'
 import { useState } from 'react'
+import Coin from 'web/public/custom-components/coin'
 
 export function TipButton(props: {
   tipAmount: number
@@ -35,16 +36,44 @@ export function TipButton(props: {
         disabled={disabled}
         className={clsx(
           'px-2 py-1 text-xs', //2xs button
-          'text-greyscale-6 transition-transform hover:text-indigo-600 disabled:cursor-not-allowed',
-          !disabled ? 'hover:rotate-12' : ''
+          'text-greyscale-5 transition-transform disabled:cursor-not-allowed',
+          !disabled ? 'hover:text-greyscale-6' : ''
         )}
-        onMouseOver={() => setHover(true)}
+        onMouseOver={() => {
+          if (!disabled) {
+            setHover(true)
+          }
+        }}
         onMouseLeave={() => setHover(false)}
       >
-        <Col className={clsx('relative', disabled ? 'opacity-30' : '')}>
+        <Col className={clsx('relative')}>
+          <div
+            className={clsx(
+              'absolute transition-all',
+              hover ? 'left-[6px] -top-[9px]' : 'left-[8px] -top-[10px]'
+            )}
+          >
+            <Coin
+              size={10}
+              color={
+                hover && !userTipped
+                  ? '#66667C'
+                  : userTipped
+                  ? '#4f46e5'
+                  : '#9191a7'
+              }
+              strokeWidth={2}
+            />
+          </div>
           <TipJar
             size={18}
-            color={userTipped || (hover && !disabled) ? '#4f46e5' : '#66667C'}
+            color={
+              hover && !disabled && !userTipped
+                ? '#66667C'
+                : userTipped
+                ? '#4f46e5'
+                : '#9191a7'
+            }
           />
           <div
             className={clsx(

web/components/tipper.tsx

@@ -11,6 +11,8 @@ import { TipButton } from './contract/tip-button'
 import { Row } from './layout/row'
 import { LIKE_TIP_AMOUNT } from 'common/like'
 import { formatMoney } from 'common/util/format'
+import { Button } from './button'
+import clsx from 'clsx'
 
 export function Tipper(prop: {
   comment: Comment
@@ -73,9 +75,34 @@ export function Tipper(prop: {
   useEffect(() => () => void saveTip.flush(), [saveTip])
 
   const addTip = (delta: number) => {
+    let cancelled = false
     setLocalTip(localTip + delta)
-    me && saveTip(me, comment, localTip - myTip + delta)
-    toast(`You tipped ${comment.userName} ${formatMoney(LIKE_TIP_AMOUNT)}!`)
+    const timeoutId = setTimeout(() => {
+      me && saveTip(me, comment, localTip - myTip + delta)
+    }, 5000)
+    toast.custom((t) => (
+      <Row className="text-greyscale-6 items-center gap-4 rounded-lg bg-white px-4 py-2 text-sm drop-shadow-md">
+        <div className={clsx(cancelled ? 'hidden' : 'inline')}>
+          You tipped {comment.userName} {formatMoney(LIKE_TIP_AMOUNT)}!
+        </div>
+        <div className={clsx('py-1', cancelled ? 'inline' : 'hidden')}>
+          Cancelled tipping
+        </div>
+        <Button
+          className={clsx(cancelled ? 'hidden' : 'inline')}
+          size="xs"
+          color="gray-outline"
+          onClick={() => {
+            clearTimeout(timeoutId)
+            setLocalTip(localTip)
+            cancelled = true
+          }}
+          disabled={cancelled}
+        >
+          Undo
+        </Button>
+      </Row>
+    ))
   }
 
   const canUp =