modal instead of dropdown for new FB form

joinmarket-webui · May 22, 2024 · 4e89da1 · 4e89da1
1 parent 7aef192
commit 4e89da1
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 3 deletions.
diff --git a/src/components/fb/CreateFidelityBond.module.css b/src/components/fb/CreateFidelityBond.module.css
@@ -50,3 +50,24 @@
   color: 'white';
   border-radius: '50%';
 }
+
+.form {
+  padding: 0.5rem;
+}
+
+.formHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.5rem 1rem 0 1rem;
+}
+
+.formHeader .title {
+  width: 100%;
+  font-size: 1.2rem;
+  color: var(--bs-body-color);
+}
+
+.formHeader .svg {
+  color: var(--bs-body-color);
+}
diff --git a/src/components/fb/CreateFidelityBond.tsx b/src/components/fb/CreateFidelityBond.tsx
@@ -673,8 +673,12 @@ const CreateFidelityBond = ({ otherFidelityBondExists, wallet, walletInfo, onDon
           )}
         </div>
       </div>
-      <rb.Collapse in={isExpanded}>
-        <div>
+      <rb.Modal show={isExpanded} animation={true} backdrop="static" centered={true}>
+        <div className={styles.form}>
+          <rb.Modal.Header bsPrefix={styles.formHeader}>
+            <div className={styles.title}>{t('earn.fidelity_bond.create_fidelity_bond.title')}</div>
+            <Sprite symbol="cross" width="25" height="25" onClick={onSecondaryButtonClicked} />
+          </rb.Modal.Header>
           <hr />
           <div className="mb-5">{stepComponent(step)}</div>
           <div className="d-flex flex-column gap-2">
@@ -698,7 +702,7 @@ const CreateFidelityBond = ({ otherFidelityBondExists, wallet, walletInfo, onDon
             )}
           </div>
         </div>
-      </rb.Collapse>
+      </rb.Modal>
     </div>
   )
 }

diff --git a/src/i18n/locales/en/translation.json b/src/i18n/locales/en/translation.json
@@ -494,6 +494,7 @@
         "label_selected_utxos": "UTXOs that will be time-locked:"
       },
       "create_fidelity_bond": {
+        "title": "Create Fidelity Bond",
         "success_text": "Fidelity bond created!",
         "text_primary_button": "Done",
         "text_primary_button_unfreeze": "Unfreeze UTXOs",