new wallet dialog

lnbits/templates/components/lnbits-wallet-new.vue

@@ -1,11 +1,24 @@
 <template id="lnbits-wallet-new">
-  <q-dialog v-model="showNewWalletDialog" position="top">
+  <lnbits-dialog
-    <q-card class="q-pa-lg q-pt-md lnbits__dialog-card">
+    :show="showNewWalletDialog"
-      <q-card-section>
+    :title="$t('add_new_wallet')"
-        <div class="text-h6">
+    :action="{
-          <span v-text="$t('add_new_wallet')"></span>
+      handler: submitAddWallet,
-        </div>
+      label: $t('add_wallet'),
-      </q-card-section>
+      closePopup: true
+    }"
+    :secondary-action="
+      isLightningShared
+        ? {
+            handler: submitRejectWalletInvitation,
+            label: $t('reject_wallet'),
+            color: 'negative',
+            closePopup: true
+          }
+        : null
+    "
+    @update:show="showNewWalletDialog = $event"
+  >
     <q-card-section v-if="g.user.walletInvitesCount">
       <q-badge
         @click="g.newWalletType = 'lightning-shared'"
@@ -55,40 +68,5 @@
         <span v-text="$t('shared_wallet_desc')" class="q-mt-lg"></span>
       </div>
     </q-card-section>
-
+  </lnbits-dialog>
-      <q-card-actions class="text-primary">
-        <div class="row full-width">
-          <div class="col-md-4">
-            <q-btn
-              flat
-              :label="$t('cancel')"
-              class="float-left"
-              v-close-popup
-            ></q-btn>
-          </div>
-          <div class="col-md-4">
-            <q-btn
-              v-if="isLightningShared"
-              :disabled="!wallet.sharedWalletId"
-              flat
-              :label="$t('reject_wallet')"
-              v-close-popup
-              color="negative"
-              @click="submitRejectWalletInvitation()"
-            ></q-btn>
-            <span v-else></span>
-          </div>
-          <div class="col-md-4">
-            <q-btn
-              flat
-              :label="$t('add_wallet')"
-              v-close-popup
-              @click="submitAddWallet()"
-              class="float-right"
-            ></q-btn>
-          </div>
-        </div>
-      </q-card-actions>
-    </q-card>
-  </q-dialog>
 </template>