hodl invoice

lnbits/templates/components/lnbits-payment-list.vue

@@ -487,8 +487,23 @@
               </div>
             </div>
           </lnbits-dialog>
-          <q-dialog v-model="hodlInvoice.show" position="top">
+          <lnbits-dialog
-            <q-card class="q-pa-sm q-pt-xl lnbits__dialog-card">
+            :show="hodlInvoice.show"
+            :cancel-label="$t('close')"
+            :action="{
+              handler: () => cancelHoldInvoice(hodlInvoice.payment.payment_hash),
+              label: $t('cancel_invoice'),
+              color: 'grey',
+              closePopup: true
+            }"
+            :secondary-action="{
+              handler: () => settleHoldInvoice(hodlInvoice.preimage),
+              label: $t('settle_invoice'),
+              color: 'grey',
+              closePopup: true
+            }"
+            @update:show="hodlInvoice.show = $event"
+          >
             <q-card-section>
               <q-item-label class="text-h6">
                 <span v-text="$t('hold_invoice')"></span>
@@ -509,33 +524,7 @@
               >
               </q-input>
             </q-card-section>
-              <q-card-section class="row q-gutter-x-sm">
+          </lnbits-dialog>
-                <q-btn
-                  @click="settleHoldInvoice(hodlInvoice.preimage)"
-                  outline
-                  v-close-popup
-                  color="grey"
-                  :label="$t('settle_invoice')"
-                >
-                </q-btn>
-                <q-btn
-                  v-close-popup
-                  outline
-                  color="grey"
-                  class="q-ml-sm"
-                  @click="cancelHoldInvoice(hodlInvoice.payment.payment_hash)"
-                  :label="$t('cancel_invoice')"
-                ></q-btn>
-                <q-btn
-                  v-close-popup
-                  flat
-                  color="grey"
-                  class="q-ml-auto"
-                  :label="$t('close')"
-                ></q-btn>
-              </q-card-section>
-            </q-card>
-          </q-dialog>
         </q-tr>
       </template>
     </q-table>