make anon posting less hidden, add anon info button explainer

components/fee-button.js

@@ -8,6 +8,9 @@ import { useFormikContext } from 'formik'
 import { SSR, ANON_COMMENT_FEE, ANON_POST_FEE } from '../lib/constants'
 import { numWithUnits } from '../lib/format'
 import { useMe } from './me'
+import AnonIcon from '../svgs/spy-fill.svg'
+import { useShowModal } from './modal'
+import Link from 'next/link'
 
 function Receipt ({ cost, repetition, hasImgLink, baseFee, parentId, boost }) {
   return (
@@ -43,6 +46,28 @@ function Receipt ({ cost, repetition, hasImgLink, baseFee, parentId, boost }) {
   )
 }
 
+function AnonInfo () {
+  const showModal = useShowModal()
+
+  return (
+    <AnonIcon
+      className='fill-muted ms-2 theme' height={22} width={22}
+      onClick={
+        (e) =>
+          showModal(onClose =>
+            <div><span className='fw-bold'>Hey sneaky! You are posting without an account.</span>
+              <ol className='mt-3'>
+                <li>You'll pay by invoice</li>
+                <li>Your content will be content-joined (get it?!) under the <Link href='/anon' target='_blank'>@anon</Link> account</li>
+                <li>Any sats your content earns will go toward <Link href='/rewards' target='_blank'>rewards</Link></li>
+                <li>We won't be able to notify about replies</li>
+              </ol>
+            </div>)
+      }
+    />
+  )
+}
+
 export default function FeeButton ({ parentId, hasImgLink, baseFee, ChildButton, variant, text, alwaysShow, disabled }) {
   const me = useMe()
   baseFee = me ? baseFee : (parentId ? ANON_COMMENT_FEE : ANON_POST_FEE)
@@ -61,10 +86,11 @@ export default function FeeButton ({ parentId, hasImgLink, baseFee, ChildButton,
 
   const show = alwaysShow || !formik?.isSubmitting
   return (
-    <div className='d-flex align-items-center'>
+    <div className={styles.feeButton}>
       <ActionTooltip overlayText={numWithUnits(cost, { abbreviate: false })}>
-        <ChildButton variant={variant} disabled={disabled}>{text}{cost > baseFee && show && <small> {numWithUnits(cost, { abbreviate: false })}</small>}</ChildButton>
+        <ChildButton variant={variant} disabled={disabled}>{text}{cost > 1 && show && <small> {numWithUnits(cost, { abbreviate: false })}</small>}</ChildButton>
       </ActionTooltip>
+      {!me && <AnonInfo />}
       {cost > baseFee && show &&
         <Info>
           <Receipt baseFee={baseFee} hasImgLink={hasImgLink} repetition={repetition} cost={cost} parentId={parentId} boost={boost} />

components/fee-button.module.css

@@ -6,6 +6,15 @@
     width: 100%;
 }
 
+.feeButton {
+    display: flex;
+    align-items: center;
+}
+
+.feeButton small {
+    font-weight: 400;
+}
+
 .receipt td {
     padding: .25rem .1rem;
     background-color: var(--theme-inputBg);

components/header.js

@@ -23,6 +23,7 @@ import BackArrow from '../svgs/arrow-left-line.svg'
 import { SSR, SUBS } from '../lib/constants'
 import { useLightning } from './lightning'
 import { HAS_NOTIFICATIONS } from '../fragments/notifications'
+import AnonIcon from '../svgs/spy-fill.svg'
 
 function WalletSummary ({ me }) {
   if (!me) return null
@@ -216,9 +217,22 @@ function NavItems ({ className, sub, prefix }) {
 }
 
 function PostItem ({ className, prefix }) {
+  const me = useMe()
+
+  if (me) {
+    return (
+      <Link href={prefix + '/post'} className={`${className} btn btn-md btn-primary px-3 py-1 `}>
+        post
+      </Link>
+    )
+  }
+
   return (
-    <Link href={prefix + '/post'} className={`${className} btn btn-md btn-primary px-3 py-1 `}>
-      post
+    <Link
+      href={prefix + '/post'}
+      className={`${className} ${styles.postAnon} btn btn-md btn-outline-grey-darkmode d-flex align-items-center px-3 py-0 py-lg-1`}
+    >
+      <AnonIcon className='me-1 fill-secondary' width={16} height={16} /> post
     </Link>
   )
 }

components/header.module.css

@@ -9,6 +9,22 @@
     color: var(--theme-brandColor) !important;
 }
 
+.postAnon {
+    border-width: 2px;
+}
+
+.postAnon svg {
+    fill: var(--bs-grey-darkmode);
+}
+
+.postAnon:hover, .postAnon:active, .postAnon:focus-visible {
+    color: var(--bs-white) !important;
+}
+
+.postAnon:hover svg, .postAnon:active svg, .postAnon:focus-visible svg {
+    fill: var(--bs-white);
+}
+
 .navLinkButton {
     border: 2px solid;
     padding: 0.2rem .9rem !important;

components/invoice-status.js

@@ -4,7 +4,7 @@ import ThumbDown from '../svgs/thumb-down-fill.svg'
 
 function InvoiceDefaultStatus ({ status }) {
   return (
-    <div className='d-flex mt-2 justify-content-center'>
+    <div className='d-flex mt-2 justify-content-center align-items-center'>
       <Moon className='spin fill-grey' />
       <div className='ms-3 text-muted' style={{ fontWeight: '600' }}>{status}</div>
     </div>
@@ -13,7 +13,7 @@ function InvoiceDefaultStatus ({ status }) {
 
 function InvoiceConfirmedStatus ({ status }) {
   return (
-    <div className='d-flex mt-2 justify-content-center'>
+    <div className='d-flex mt-2 justify-content-center align-items-center'>
       <Check className='fill-success' />
       <div className='ms-3 text-success' style={{ fontWeight: '600' }}>{status}</div>
     </div>
@@ -22,7 +22,7 @@ function InvoiceConfirmedStatus ({ status }) {
 
 function InvoiceFailedStatus ({ status }) {
   return (
-    <div className='d-flex mt-2 justify-content-center'>
+    <div className='d-flex mt-2 justify-content-center align-items-center'>
       <ThumbDown className='fill-danger' />
       <div className='ms-3 text-danger' style={{ fontWeight: '600' }}>{status}</div>
     </div>

components/invoice.js

@@ -64,7 +64,7 @@ const Contacts = ({ invoiceHash, invoiceHmac }) => {
   const subject = `Support request for payment hash: ${invoiceHash}`
   const body = 'Hi, I successfully paid for <insert action> but the action did not work.'
   return (
-    <div className='d-flex flex-column justify-content-center'>
+    <div className='d-flex flex-column justify-content-center mt-2'>
       <span>Payment hash</span>
       <div className='w-100'>
         <CopyInput type='text' placeholder={invoiceHash} readOnly noForm />
@@ -121,7 +121,7 @@ const ActionInvoice = ({ id, hash, hmac, errorCount, repeat, ...props }) => {
     return <QrSkeleton status='loading' />
   }
 
-  let errorStatus = 'Something went wrong. Please try again.'
+  let errorStatus = 'Something went wrong trying to perform the action after payment.'
   if (errorCount > 1) {
     errorStatus = 'Something still went wrong.\nPlease contact admins for support or to request a refund.'
   }
@@ -131,7 +131,9 @@ const ActionInvoice = ({ id, hash, hmac, errorCount, repeat, ...props }) => {
       {errorCount > 0
         ? (
           <>
-            <InvoiceStatus variant='failed' status={errorStatus} />
+            <div className='my-3'>
+              <InvoiceStatus variant='failed' status={errorStatus} />
+            </div>
             {errorCount === 1
               ? <div className='d-flex flex-row mt-3 justify-content-center'><Button variant='info' onClick={repeat}>Retry</Button></div>
               : <Contacts invoiceHash={hash} invoiceHmac={hmac} />}

svgs/spy-fill.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M17 13C19.2091 13 21 14.7909 21 17C21 19.2091 19.2091 21 17 21C14.8578 21 13 19.21 13 17H11C11 19.2091 9.20914 21 7 21C4.79086 21 3 19.2091 3 17C3 14.7909 4.79086 13 7 13C8.48052 13 9.77317 13.8043 10.4648 14.9999H13.5352C14.2268 13.8043 15.5195 13 17 13ZM2 12V10H4V7C4 4.79086 5.79086 3 8 3H16C18.2091 3 20 4.79086 20 7V10H22V12H2Z"></path></svg>