1 sat action tooltip

components/reply.js

@@ -4,6 +4,7 @@ import { gql, useMutation } from '@apollo/client'
 import styles from './reply.module.css'
 import { COMMENTS } from '../fragments/comments'
 import { useMe } from './me'
+import ActionTooltip from './action-tooltip'
 
 export const CommentSchema = Yup.object({
   text: Yup.string().required('required').trim()
@@ -70,7 +71,9 @@ export default function Reply ({ parentId, onSuccess, autoFocus }) {
           required
           hint={me?.freeComments ? <span className='text-success'>{me.freeComments} free comments left</span> : null}
         />
-        <SubmitButton variant='secondary' className='mt-1'>reply</SubmitButton>
+        <ActionTooltip>
+          <SubmitButton variant='secondary' className='mt-1'>reply</SubmitButton>
+        </ActionTooltip>
       </Form>
     </div>
   )

components/upvote.js

@@ -4,6 +4,7 @@ import styles from './upvote.module.css'
 import { gql, useMutation } from '@apollo/client'
 import { signIn, useSession } from 'next-auth/client'
 import { useFundError } from './fund-error'
+import ActionTooltip from './action-tooltip'
 
 export default function UpVote ({ itemId, meSats, className }) {
   const [session] = useSession()
@@ -35,15 +36,16 @@ export default function UpVote ({ itemId, meSats, className }) {
   return (
     <LightningConsumer>
       {({ strike }) =>
-        <UpArrow
-          width={24}
-          height={24}
-          className={
+        <ActionTooltip>
+          <UpArrow
+            width={24}
+            height={24}
+            className={
             `${styles.upvote}
             ${className || ''}
             ${meSats ? (meSats > 1 ? styles.stimi : styles.voted) : ''}`
           }
-          onClick={
+            onClick={
             session
               ? async (e) => {
                   e.stopPropagation()
@@ -61,7 +63,8 @@ export default function UpVote ({ itemId, meSats, className }) {
                 }
               : signIn
           }
-        />}
+          />
+        </ActionTooltip>}
     </LightningConsumer>
   )
 }

pages/post.js

@@ -7,6 +7,7 @@ import { gql, useMutation } from '@apollo/client'
 import LayoutCenter from '../components/layout-center'
 import { ensureProtocol } from '../lib/url'
 import { useMe } from '../components/me'
+import ActionTooltip from '../components/action-tooltip'
 
 export const DiscussionSchema = Yup.object({
   title: Yup.string().required('required').trim()
@@ -50,7 +51,9 @@ export function DiscussionForm () {
         as='textarea'
         rows={4}
       />
-      <SubmitButton variant='secondary' className='mt-2'>post</SubmitButton>
+      <ActionTooltip>
+        <SubmitButton variant='secondary' className='mt-2'>post</SubmitButton>
+      </ActionTooltip>
     </Form>
   )
 }
@@ -109,7 +112,9 @@ export function LinkForm () {
         name='url'
         required
       />
-      <SubmitButton variant='secondary' className='mt-2'>post</SubmitButton>
+      <ActionTooltip>
+        <SubmitButton variant='secondary' className='mt-2'>post</SubmitButton>
+      </ActionTooltip>
     </Form>
   )
 }

styles/globals.scss

@@ -48,6 +48,7 @@ $nav-link-padding-y: .1rem;
 $nav-tabs-link-active-bg: #fff;
 $nav-tabs-link-hover-border-color: transparent;
 $nav-tabs-link-active-border-color: #ced4da #ced4da $nav-tabs-link-active-bg;
+$tooltip-bg: #5c8001;
 
 
 @import "~bootstrap/scss/bootstrap";