down zap ui polish

components/dont-link-this.js

@@ -3,6 +3,7 @@ import Dropdown from 'react-bootstrap/Dropdown'
 import { useShowModal } from './modal'
 import { useToast } from './toast'
 import ItemAct from './item-act'
+import AccordianItem from './accordian-item'
 
 export default function DontLikeThisDropdownItem ({ id }) {
   const toaster = useToast()
@@ -34,15 +35,25 @@ export default function DontLikeThisDropdownItem ({ id }) {
             <ItemAct
               onClose={() => {
                 onClose()
-                toaster.success('item flagged')
+                toaster.success('item downzapped')
               }} itemId={id} act={dontLikeThis} down
-            />)
+            >
+              <AccordianItem
+                header='what is a downzap?' body={
+                  <ul>
+                    <li>downzaps are just like zaps but cause items to lose ranking position</li>
+                    <li>downzaps also reduce trust between you and whoever zaps it so you'll see less of what they zap in the future</li>
+                    <li>all sats from downzaps go to rewards</li>
+                  </ul>
+              }
+              />
+            </ItemAct>)
         } catch (error) {
-          toaster.danger('failed to flag item')
+          toaster.danger('failed to downzap item')
         }
       }}
     >
-      flag
+      <span className='text-danger'>downzap</span>
     </Dropdown.Item>
   )
 }

components/item-act.js

@@ -36,7 +36,7 @@ const addCustomTip = (amount) => {
   window.localStorage.setItem('custom-tips', JSON.stringify(customTips))
 }
 
-export default function ItemAct ({ onClose, itemId, act, down, strike }) {
+export default function ItemAct ({ onClose, itemId, act, down, strike, children }) {
   const inputRef = useRef(null)
   const me = useMe()
   const [oValue, setOValue] = useState()
@@ -87,8 +87,9 @@ export default function ItemAct ({ onClose, itemId, act, down, strike }) {
       <div>
         <Tips setOValue={setOValue} />
       </div>
+      {children}
       <div className='d-flex'>
-        <SubmitButton variant={down ? 'danger' : 'success'} className='ms-auto mt-1 px-4' value='TIP'>{down && 'down '}zap</SubmitButton>
+        <SubmitButton variant={down ? 'danger' : 'success'} className='ms-auto mt-1 px-4' value='TIP'>{down && 'down'}zap</SubmitButton>
       </div>
     </Form>
   )