add close button to all modals

components/fund-error.js

@@ -34,6 +34,7 @@ export function FundErrorModal () {
       show={error}
       onHide={() => setError(false)}
     >
+      <div className='modal-close' onClick={() => setError(false)}>X</div>
       <Modal.Body>
         <p className='font-weight-bolder'>you have no sats</p>
         <div className='d-flex justify-content-end'>

components/item-act.js

@@ -50,6 +50,7 @@ export function ItemActModal () {
         setItem(null)
       }}
     >
+      <div className='modal-close' onClick={() => setItem(null)}>X</div>
       <Modal.Body>
         <Form
           initial={{

components/job-form.js

@@ -94,7 +94,7 @@ export default function JobForm ({ item, sub }) {
         show={info}
         onHide={() => setInfo(false)}
       >
-        <div className={styles.close} onClick={() => setInfo(false)}>X</div>
+        <div className='modal-close' onClick={() => setInfo(false)}>X</div>
         <Modal.Body>
           <ol className='font-weight-bold'>
             <li>The higher your bid the higher your job will rank</li>

styles/globals.scss

@@ -59,6 +59,25 @@ $tooltip-bg: #5c8001;
   }
 }
 
+.modal-close {
+  cursor: pointer;
+  display: flex;
+  margin-left: auto;
+  padding-top: 1rem;
+  padding-right: 1.5rem;
+  font-family: "lightning";
+  font-size: 150%;
+  line-height: 1rem;
+}
+
+.modal-close:hover {
+  opacity: 0.7;
+}
+
+.modal-close + .modal-body {
+  padding-top: 0.5rem;
+}
+
 .text-muted {
   color: var(--theme-grey) !important;
 }

styles/post.module.css

@@ -1,17 +1,3 @@
-.close {
-    cursor: pointer;
-    display: flex;
-    margin-left: auto;
-    padding-top: 1rem;
-    padding-right: 1.5rem;
-    font-family: 'lightning';
-    font-size: 150%;
-}
-
-.close:hover {
-    opacity: 0.7;
-}
-
 .inlineCheckGroup {
     margin-left: .5rem;
     display: flex;