fix #1566

components/boost-button.js

@@ -2,7 +2,7 @@ import { useShowModal } from './modal'
 import { useToast } from './toast'
 import ItemAct from './item-act'
 import AccordianItem from './accordian-item'
-import { useMemo, useState } from 'react'
+import { useMemo } from 'react'
 import getColor from '@/lib/rainbow'
 import BoostIcon from '@/svgs/arrow-up-double-line.svg'
 import styles from './upvote.module.css'
@@ -12,32 +12,29 @@ import classNames from 'classnames'
 
 export default function Boost ({ item, className, ...props }) {
   const { boost } = item
-  const [hover, setHover] = useState(false)
-
   const [color, nextColor] = useMemo(() => [getColor(boost), getColor(boost + BOOST_MULT)], [boost])
 
-  const style = useMemo(() => (hover || boost
-    ? {
-        fill: hover ? nextColor : color,
-        filter: `drop-shadow(0 0 6px ${hover ? nextColor : color}90)`
-      }
-    : undefined), [boost, hover])
+  const style = useMemo(() => ({
+    '--hover-fill': nextColor,
+    '--hover-filter': `drop-shadow(0 0 6px ${nextColor}90)`,
+    '--fill': color,
+    '--filter': `drop-shadow(0 0 6px ${color}90)`
+  }), [color, nextColor])
 
   return (
     <Booster
-      item={item} As={({ ...oprops }) =>
+      item={item} As={oprops =>
         <div className='upvoteParent'>
           <div
             className={styles.upvoteWrapper}
           >
             <BoostIcon
-              {...props} {...oprops} style={style}
+              {...props}
+              {...oprops}
+              style={style}
               width={26}
               height={26}
-              onPointerEnter={() => setHover(true)}
-              onMouseLeave={() => setHover(false)}
-              onTouchEnd={() => setHover(false)}
-              className={classNames(styles.boost, className, boost && styles.voted)}
+              className={classNames(styles.boost, className, boost && styles.boosted)}
             />
           </div>
         </div>}

components/upvote.js

@@ -109,7 +109,6 @@ export default function UpVote ({ item, className, collapsed }) {
   const [tipShow, _setTipShow] = useState(false)
   const ref = useRef()
   const { me } = useMe()
-  const [hover, setHover] = useState(false)
   const [setWalkthrough] = useMutation(
     gql`
       mutation setWalkthrough($upvotePopover: Boolean, $tipPopover: Boolean) {
@@ -172,10 +171,6 @@ export default function UpVote ({ item, className, collapsed }) {
     me, item?.meSats, item?.meAnonSats, me?.privates?.tipDefault, me?.privates?.turboDefault,
     me?.privates?.tipRandom, me?.privates?.tipRandomMin, me?.privates?.tipRandomMax, pending])
 
-  const handleModalClosed = () => {
-    setHover(false)
-  }
-
   const handleLongPress = (e) => {
     if (!item) return
 
@@ -195,7 +190,7 @@ export default function UpVote ({ item, className, collapsed }) {
     setController(c)
 
     showModal(onClose =>
-      <ItemAct onClose={onClose} item={item} abortSignal={c.signal} />, { onClose: handleModalClosed })
+      <ItemAct onClose={onClose} item={item} abortSignal={c.signal} />)
   }
 
   const handleShortPress = async () => {
@@ -223,19 +218,16 @@ export default function UpVote ({ item, className, collapsed }) {
 
       await zap({ item, me, abortSignal: c.signal })
     } else {
-      showModal(onClose => <ItemAct onClose={onClose} item={item} />, { onClose: handleModalClosed })
+      showModal(onClose => <ItemAct onClose={onClose} item={item} />)
     }
   }
 
-  const style = useMemo(() => {
-    const fillColor = pending || hover ? nextColor : color
-    return meSats || hover || pending
-      ? {
-          fill: fillColor,
-          filter: `drop-shadow(0 0 6px ${fillColor}90)`
-        }
-      : undefined
-  }, [hover, pending, nextColor, color, meSats])
+  const style = useMemo(() => ({
+    '--hover-fill': nextColor,
+    '--hover-filter': `drop-shadow(0 0 6px ${nextColor}90)`,
+    '--fill': color,
+    '--filter': `drop-shadow(0 0 6px ${color}90)`
+  }), [color, nextColor])
 
   return (
     <div ref={ref} className='upvoteParent'>
@@ -246,9 +238,6 @@ export default function UpVote ({ item, className, collapsed }) {
         <ActionTooltip notForm disable={disabled} overlayText={overlayText}>
           <div className={classNames(disabled && styles.noSelfTips, styles.upvoteWrapper)}>
             <UpBolt
-              onPointerEnter={() => setHover(true)}
-              onMouseLeave={() => setHover(false)}
-              onTouchEnd={() => setHover(false)}
               width={26}
               height={26}
               className={classNames(styles.upvote,

components/upvote.module.css

@@ -5,6 +5,11 @@
     -webkit-touch-callout: none;
 }
 
+.upvote:hover {
+    fill: var(--hover-fill) !important;
+    filter: var(--hover-filter) !important;
+}
+
 .boost {
     fill: var(--theme-clickToContextColor);
     user-select: none;
@@ -12,6 +17,16 @@
     -webkit-touch-callout: none;
 }
 
+.boost:hover {
+    fill: var(--hover-fill) !important;
+    filter: var(--hover-filter) !important;
+}
+
+.boost.boosted {
+    fill: var(--fill);
+    filter: var(--filter);
+}
+
 .upvoteWrapper {
     position: relative;
     padding-right: .2rem;
@@ -28,8 +43,8 @@
 }
 
 .upvote.voted {
-    fill: #F6911D;
-    filter: drop-shadow(0 0 6px #f6911d90);
+    fill: var(--fill);
+    filter: var(--filter);
 }
 
 .cover {
@@ -43,6 +58,7 @@
 }
 
 .pending {
+    fill: var(--hover-fill);
     animation-name: pulse;
     animation-iteration-count: infinite;
     animation-timing-function: linear;