boost icon refinement

components/boost-button.js

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

components/upvote.module.css

@@ -5,6 +5,13 @@
     -webkit-touch-callout: none;
 }
 
+.boost {
+    fill: var(--theme-clickToContextColor);
+    user-select: none;
+    -webkit-user-select: none;
+    -webkit-touch-callout: none;
+}
+
 .upvoteWrapper {
     position: relative;
     padding-right: .2rem;

svgs/arrow-up-double-line.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 4.83582L5.79291 11.0429L7.20712 12.4571L12 7.66424L16.7929 12.4571L18.2071 11.0429L12 4.83582ZM12 10.4857L5.79291 16.6928L7.20712 18.107L12 13.3141L16.7929 18.107L18.2071 16.6928L12 10.4857Z"></path></svg>