payment details

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

@@ -394,9 +394,16 @@
               ></span>
             </i>
           </q-td>
-          <q-dialog v-model="props.expand" :props="props" position="top">
+          <lnbits-dialog
-            <q-card class="q-pa-sm q-pt-xl lnbits__dialog-card">
+            :show="props.expand"
-              <q-card-section>
+            :cancel-label="$t('close')"
+            :action="{
+              handler: () => checkPayment(props.row.payment_hash),
+              label: $t('check_payment'),
+              icon: 'refresh'
+            }"
+            @update:show="props.expand = $event"
+          >
             <q-list bordered separator>
               <q-expansion-item
                 expand-separator
@@ -479,25 +486,7 @@
                 ></lnbits-qrcode>
               </div>
             </div>
-                <div class="row q-mt-md">
+          </lnbits-dialog>
-                  <q-btn
-                    outline
-                    color="grey"
-                    @click="checkPayment(props.row.payment_hash)"
-                    icon="refresh"
-                    :label="$t('payment_check')"
-                  ></q-btn>
-                  <q-btn
-                    v-close-popup
-                    flat
-                    color="grey"
-                    class="q-ml-auto"
-                    :label="$t('close')"
-                  ></q-btn>
-                </div>
-              </q-card-section>
-            </q-card>
-          </q-dialog>
           <q-dialog v-model="hodlInvoice.show" position="top">
             <q-card class="q-pa-sm q-pt-xl lnbits__dialog-card">
               <q-card-section>