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,19 +150,21 @@ export default function UpVote ({ item, className }) {
           }
         >
           <ActionTooltip notForm disable={noSelfTips} overlayText={overlayText()}>
-            <UpArrow
+            <div>
-              width={24}
+              <Arrow
-              height={24}
+                width={24}
-              className={
+                height={24}
+                className={
                 `${styles.upvote}
                 ${className || ''}
                 ${noSelfTips ? styles.noSelfTips : ''}
                 ${item?.meVote ? styles.voted : ''}`
               }
-              onClick={e => {
+                onClick={e => {
-                e.stopPropagation()
+                  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>