diff --git a/components/info.js b/components/info.js new file mode 100644 index 00000000..a40928e2 --- /dev/null +++ b/components/info.js @@ -0,0 +1,22 @@ +import { useState } from 'react' +import { Modal } from 'react-bootstrap' +import InfoIcon from '../svgs/information-fill.svg' + +export default function Info ({ children }) { + const [info, setInfo] = useState() + + return ( + <> + setInfo(false)} + > +
setInfo(false)}>X
+ + {children} + +
+ setInfo(true)} /> + + ) +} diff --git a/components/job-form.js b/components/job-form.js index fb265859..6a7f446b 100644 --- a/components/job-form.js +++ b/components/job-form.js @@ -1,9 +1,9 @@ import { Checkbox, Form, Input, MarkdownInput, SubmitButton } from './form' import TextareaAutosize from 'react-textarea-autosize' -import { InputGroup, Modal, Form as BForm, Col } from 'react-bootstrap' +import { InputGroup, Form as BForm, Col } from 'react-bootstrap' import * as Yup from 'yup' import { useEffect, useState } from 'react' -import Info from '../svgs/information-fill.svg' +import Info from './info' import AccordianItem from './accordian-item' import styles from '../styles/post.module.css' import { useLazyQuery, gql, useMutation } from '@apollo/client' @@ -47,7 +47,6 @@ export default function JobForm ({ item, sub }) { const storageKeyPrefix = item ? undefined : `${sub.name}-job` const router = useRouter() const [monthly, setMonthly] = useState(satsMin2Mo(item?.maxBid || sub.baseCost)) - const [info, setInfo] = useState() const [getAuctionPosition, { data }] = useLazyQuery(gql` query AuctionPosition($id: ID, $bid: Int!) { auctionPosition(sub: "${sub.name}", id: $id, bid: $bid) @@ -90,20 +89,6 @@ export default function JobForm ({ item, sub }) { return ( <> - setInfo(false)} - > -
setInfo(false)}>X
- -
    -
  1. The higher your bid the higher your job will rank
  2. -
  3. The minimum bid is {sub.baseCost} sats/min
  4. -
  5. You can increase or decrease your bid, and edit or stop your job at anytime
  6. -
  7. Your job will be hidden if your wallet runs out of sats and can be unhidden by filling your wallet again
  8. -
-
-
bid - setInfo(true)} /> + +
    +
  1. The higher your bid the higher your job will rank
  2. +
  3. The minimum bid is {sub.baseCost} sats/min
  4. +
  5. You can increase or decrease your bid, and edit or stop your job at anytime
  6. +
  7. Your job will be hidden if your wallet runs out of sats and can be unhidden by filling your wallet again
  8. +
+
} name='maxBid' diff --git a/components/reply.js b/components/reply.js index eff66d56..70ee3a5b 100644 --- a/components/reply.js +++ b/components/reply.js @@ -7,6 +7,7 @@ import { useMe } from './me' import ActionTooltip from './action-tooltip' import TextareaAutosize from 'react-textarea-autosize' import { useEffect, useState } from 'react' +import Info from './info' export const CommentSchema = Yup.object({ text: Yup.string().required('required').trim() @@ -92,9 +93,16 @@ export default function Reply ({ parentId, meComments, onSuccess, replyOpen }) { required hint={me?.freeComments ? {me.freeComments} free comments left : null} /> - - reply{cost > 1 && {cost} sats} - +
+ + reply{cost > 1 && {cost} sats} + + {cost > 1 && ( + +
Multiple replies on the same level get pricier, but we still love your thoughts!
+
+ )} +