different icon for tipping

components/upvote.js

@@ -1,5 +1,6 @@
 import { LightningConsumer } from './lightning'
 import UpArrow from '../svgs/lightning-arrow.svg'
+import BoltAdd from '../svgs/lightning-plus.svg'
 import styles from './upvote.module.css'
 import { gql, useMutation } from '@apollo/client'
 import { signIn } from 'next-auth/client'
@@ -84,6 +85,7 @@ export default function UpVote ({ item, className }) {
   }
 
   const noSelfTips = item?.meVote && item?.user?.id === me?.id
+  const Arrow = item?.meVote ? BoltAdd : UpArrow
 
   return (
     <LightningConsumer>
@@ -148,7 +150,8 @@ export default function UpVote ({ item, className }) {
           }
         >
           <ActionTooltip notForm disable={noSelfTips} overlayText={overlayText()}>
-            <UpArrow
+            <div>
+              <Arrow
                 width={24}
                 height={24}
                 className={
@@ -161,6 +164,7 @@ export default function UpVote ({ item, className }) {
                   e.stopPropagation()
                 }}
               />
+            </div>
           </ActionTooltip>
         </LongPressable>}
     </LightningConsumer>

svgs/lightning-plus.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 114 287" xmlns="http://www.w3.org/2000/svg">
+<path d="M113.12 193.089H64.02L81.95 286.2H18.4L0 164.162H64.02L43.9911 65.0455H8.70154V34.6909H38.5636V0H69.4146V34.5414H102.836V65.0455H76.1385L113.12 193.089Z"/>
+</svg>