From ffd3628505ba67168703b66388f41781cf1f0cb4 Mon Sep 17 00:00:00 2001
From: keyan <keyan.kousha+huumn@gmail.com>
Date: Mon, 6 Dec 2021 09:32:33 -0600
Subject: [PATCH] WIP tip walkthrough

---
 components/upvote.js | 40 ++++++++++++++++++++++++++--------------
 styles/globals.scss  |  6 ++++++
 2 files changed, 32 insertions(+), 14 deletions(-)

diff --git a/components/upvote.js b/components/upvote.js
index 7f139b80..df4c5702 100644
--- a/components/upvote.js
+++ b/components/upvote.js
@@ -11,6 +11,7 @@ import { useMe } from './me'
 import { useState } from 'react'
 import LongPressable from 'react-longpressable'
 import Rainbow from '../lib/rainbow'
+import { OverlayTrigger, Popover } from 'react-bootstrap'
 
 export default function UpVote ({ item, className }) {
   const { setError } = useFundError()
@@ -95,6 +96,15 @@ export default function UpVote ({ item, className }) {
     return Rainbow[idx]
   }
 
+  const popover = (
+    <Popover id='popover-basic'>
+      <Popover.Title as='h3'>Tipping</Popover.Title>
+      <Popover.Content>
+        Press bolt again to tip
+      </Popover.Content>
+    </Popover>
+  )
+
   const noSelfTips = item?.meVote && item?.mine
   // 12 px default height
   const cover = (item?.meSats < 10 ? ((10 - item.meSats) / 10.0) : 0) * 12
@@ -165,25 +175,27 @@ export default function UpVote ({ item, className }) {
             <div className={`${noSelfTips ? styles.noSelfTips : ''}
               ${styles.upvoteWrapper}`}
             >
-              <UpBolt
-                width={24}
-                height={24}
-                className={
+              <OverlayTrigger placement='right' overlay={popover} show>
+                <UpBolt
+                  width={24}
+                  height={24}
+                  className={
                 `${styles.upvote}
                 ${className || ''}
                 ${noSelfTips ? styles.noSelfTips : ''}
                 ${item?.meVote ? styles.voted : ''}`
               }
-                style={item?.meVote
-                  ? {
-                      fill: color,
-                      filter: `drop-shadow(0 0 6px ${color}90)`
-                    }
-                  : undefined}
-                onClick={e => {
-                  e.stopPropagation()
-                }}
-              />
+                  style={item?.meVote
+                    ? {
+                        fill: color,
+                        filter: `drop-shadow(0 0 6px ${color}90)`
+                      }
+                    : undefined}
+                  onClick={e => {
+                    e.stopPropagation()
+                  }}
+                />
+              </OverlayTrigger>
               <div className={styles.cover} style={{ top: item?.parentId ? '9px' : '4px', height: `${cover}px` }} />
             </div>
           </ActionTooltip>
diff --git a/styles/globals.scss b/styles/globals.scss
index 493b564f..a40cf844 100644
--- a/styles/globals.scss
+++ b/styles/globals.scss
@@ -388,4 +388,10 @@ textarea.form-control {
 
 .tooltip-inner {
   padding: 0.1rem 0.3rem;
+}
+
+.popover {
+  .popover-header {
+    color: #212529;
+  }
 }
\ No newline at end of file