wallet icon dialog

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

@@ -8,9 +8,17 @@
     icon="edit"
     style="position: relative; left: -15px; bottom: -10px"
   ></q-btn>
-  <q-dialog v-model="icon.show" position="top">
-    <q-card class="q-pa-lg q-pt-xl lnbits__dialog-card">
-      <q-form @submit="setIcon" class="q-gutter-md">
+  <lnbits-dialog
+    :show="icon.show"
+    :action="{
+      handler: setIcon,
+      label: 'Save Icon',
+      disable: !icon.data.icon
+    }"
+    @update:show="icon.show = $event"
+    @hide="icon.data = {}"
+  >
+    <q-form class="q-gutter-md">
       <div class="q-gutter-sm q-pa-sm flex flex-wrap justify-center">
         <q-btn
           v-for="(thisIcon, index) in icon.options"
@@ -41,16 +49,7 @@
             class="q-mr-xs"
           ></q-btn>
         </div>
-          <q-btn
-            unelevated
-            color="primary"
-            :disable="!icon.data.icon"
-            type="submit"
-          >
-            Save Icon
-          </q-btn>
       </div>
     </q-form>
-    </q-card>
-  </q-dialog>
+  </lnbits-dialog>
 </template>