From 57c26ed2bb9c02197ccb3f86f7b8357389f85912 Mon Sep 17 00:00:00 2001
From: Eneko Illarramendi <eneko@illarra.com>
Date: Sat, 18 Apr 2020 23:17:16 +0200
Subject: [PATCH] chore: outline some buttons

---
 lnbits/core/templates/core/wallet.html        | 35 ++++---
 .../templates/diagonalley/index.html          | 37 +++----
 .../paywall/templates/paywall/index.html      | 12 ++-
 .../extensions/tpos/templates/tpos/index.html | 97 ++++++++++++++++---
 .../extensions/tpos/templates/tpos/tpos.html  |  6 +-
 .../withdraw/templates/withdraw/display.html  |  4 +-
 .../withdraw/templates/withdraw/index.html    | 41 ++++----
 lnbits/static/js/base.js                      |  2 +-
 8 files changed, 158 insertions(+), 76 deletions(-)

diff --git a/lnbits/core/templates/core/wallet.html b/lnbits/core/templates/core/wallet.html
index 1ff3f58..c8e72e8 100644
--- a/lnbits/core/templates/core/wallet.html
+++ b/lnbits/core/templates/core/wallet.html
@@ -154,7 +154,7 @@
           v-model.trim="receive.data.memo"
           label="Memo"
           placeholder="LNbits invoice"></q-input>
-        <div v-if="receive.status == 'pending'" class="row justify-between">
+        <div v-if="receive.status == 'pending'" class="row q-mt-lg">
           <q-btn unelevated
             color="deep-purple"
             :disable="receive.data.amount == null || receive.data.amount <= 0"
@@ -172,9 +172,9 @@
           </q-responsive>
         </a>
       </div>
-      <div class="row justify-between">
+      <div class="row q-mt-lg">
         <q-btn flat color="grey" @click="copyText(receive.paymentReq)">Copy invoice</q-btn>
-        <q-btn v-close-popup flat color="grey">Close</q-btn>
+        <q-btn v-close-popup flat color="grey" class="q-ml-auto">Close</q-btn>
       </div>
     </q-card>
   </q-dialog>
@@ -184,17 +184,16 @@
       <div v-if="!send.invoice">
         <q-form v-if="!sendCamera.show" class="q-gutter-md">
           <q-input filled dense
-              v-model.trim="send.data.bolt11"
-              type="textarea"
-              label="Paste an invoice *"
-            >
-              <template v-slot:after>
-                <q-btn round dense flat icon="photo_camera" @click="showCamera">
-                  <q-tooltip>Use camera to scan an invoice</q-tooltip>
-                </q-btn>
-              </template>
-            </q-input>
-          <div class="row justify-between">
+            v-model.trim="send.data.bolt11"
+            type="textarea"
+            label="Paste an invoice *">
+            <template v-slot:after>
+              <q-btn round dense flat icon="photo_camera" @click="showCamera">
+                <q-tooltip>Use camera to scan an invoice</q-tooltip>
+              </q-btn>
+            </template>
+          </q-input>
+          <div class="row q-mt-lg">
             <q-btn unelevated
               color="deep-purple"
               :disable="send.data.bolt11 == ''"
@@ -206,7 +205,7 @@
           <q-responsive :ratio="1">
             <qrcode-stream @decode="decodeQR" class="rounded-borders"></qrcode-stream>
           </q-responsive>
-          <div class="row justify-between q-mt-md">
+          <div class="row q-mt-lg">
             <q-btn @click="closeCamera" flat color="grey" class="q-ml-auto">Cancel</q-btn>
           </div>
         </div>
@@ -221,15 +220,15 @@
             <strong>Hash:</strong> {{ send.invoice.hash }}
           </p>
         {% endraw %}
-        <div v-if="canPay" class="row justify-between">
+        <div v-if="canPay" class="row q-mt-lg">
           <q-btn unelevated
             color="deep-purple"
             @click="payInvoice">Send satoshis</q-btn>
           <q-btn v-close-popup flat color="grey" class="q-ml-auto">Cancel</q-btn>
         </div>
-        <div v-else class="row justify-between">
+        <div class="row q-mt-lg">
           <q-btn unelevated disabled color="yellow" text-color="black">Not enough funds!</q-btn>
-          <q-btn v-close-popup flat color="grey">Cancel</q-btn>
+          <q-btn v-close-popup flat color="grey" class="q-ml-auto">Cancel</q-btn>
         </div>
       </div>
     </q-card>
diff --git a/lnbits/extensions/diagonalley/templates/diagonalley/index.html b/lnbits/extensions/diagonalley/templates/diagonalley/index.html
index 2dae3b0..c435d11 100644
--- a/lnbits/extensions/diagonalley/templates/diagonalley/index.html
+++ b/lnbits/extensions/diagonalley/templates/diagonalley/index.html
@@ -236,18 +236,20 @@
             label="Quantity"
            ></q-input>
 
-           <q-btn v-if="productDialog.data.id" unelevated color="deep-purple" 
+          <div class="row q-mt-lg">
+           <q-btn v-if="productDialog.data.id" unelevated color="deep-purple"
            type="submit">Update Product</q-btn>
 
-          <q-btn v-else unelevated
-            color="deep-purple"
-            :disable="productDialog.data.image == null 
-            || productDialog.data.product == null
-            || productDialog.data.description == null
-            || productDialog.data.quantity == null" 
-            type="submit">Create Product</q-btn>
-
-          <q-btn v-close-popup flat color="grey" class="q-ml-auto">Cancel</q-btn>
+            <q-btn v-else unelevated
+              color="deep-purple"
+              :disable="productDialog.data.image == null
+              || productDialog.data.product == null
+              || productDialog.data.description == null
+              || productDialog.data.quantity == null"
+              type="submit">Create Product</q-btn>
+
+            <q-btn v-close-popup flat color="grey" class="q-ml-auto">Cancel</q-btn>
+          </div>
         </q-form>
       </q-card>
     </q-dialog>
@@ -267,7 +269,7 @@
             v-model.trim="indexerDialog.data.indexeraddress"
             label="Shop link (LNbits will point to)"></q-input>
             <q-select
-            filled
+            filled dense
              v-model.trim="indexerDialog.data.shippingzone1"
             multiple
             :options="shippingoptions"
@@ -279,7 +281,7 @@
             label="Zone 1 Cost"></q-input>
 
             <q-select
-            filled
+            filled dense
              v-model.trim="indexerDialog.data.shippingzone2"
             multiple
             :options="shippingoptions"
@@ -293,23 +295,24 @@
           <q-input filled dense
             v-model.trim="indexerDialog.data.email"
             label="Email to share with customers"></q-input>
-          
 
-           <q-btn v-if="indexerDialog.data.id" unelevated color="deep-purple" 
+          <div class="row q-mt-lg">
+           <q-btn v-if="indexerDialog.data.id" unelevated color="deep-purple"
            type="submit">Update Indexer</q-btn>
 
             <q-btn v-else unelevated
             color="deep-purple"
-            :disable="indexerDialog.data.shopname == null 
+            :disable="indexerDialog.data.shopname == null
             || indexerDialog.data.shippingzone1 == null
             || indexerDialog.data.indexeraddress == null
             || indexerDialog.data.zone1cost == null
             || indexerDialog.data.shippingzone2 == null
             || indexerDialog.data.zone2cost == null
-            || indexerDialog.data.email == null" 
+            || indexerDialog.data.email == null"
             type="submit">Create Indexer</q-btn>
 
-          <q-btn v-close-popup flat color="grey" class="q-ml-auto">Cancel</q-btn>
+            <q-btn v-close-popup flat color="grey" class="q-ml-auto">Cancel</q-btn>
+          </div>
         </q-form>
       </q-card>
     </q-dialog>
diff --git a/lnbits/extensions/paywall/templates/paywall/index.html b/lnbits/extensions/paywall/templates/paywall/index.html
index 8b0af6e..77e8c75 100644
--- a/lnbits/extensions/paywall/templates/paywall/index.html
+++ b/lnbits/extensions/paywall/templates/paywall/index.html
@@ -96,11 +96,13 @@
             v-model.trim="paywallDialog.data.memo"
             label="Memo"
             placeholder="LNbits invoice"></q-input>
-          <q-btn unelevated
-            color="deep-purple"
-            :disable="paywallDialog.data.amount == null || paywallDialog.data.amount < 0 || paywallDialog.data.url == null"
-            @click="createPaywall">Create paywall</q-btn>
-          <q-btn v-close-popup flat color="grey" class="q-ml-auto">Cancel</q-btn>
+          <div class="row q-mt-lg">
+            <q-btn unelevated
+              color="deep-purple"
+              :disable="paywallDialog.data.amount == null || paywallDialog.data.amount < 0 || paywallDialog.data.url == null"
+              @click="createPaywall">Create paywall</q-btn>
+            <q-btn v-close-popup flat color="grey" class="q-ml-auto">Cancel</q-btn>
+          </div>
         </q-form>
       </q-card>
     </q-dialog>
diff --git a/lnbits/extensions/tpos/templates/tpos/index.html b/lnbits/extensions/tpos/templates/tpos/index.html
index cebcd8f..df622c5 100644
--- a/lnbits/extensions/tpos/templates/tpos/index.html
+++ b/lnbits/extensions/tpos/templates/tpos/index.html
@@ -106,11 +106,13 @@
               emit-value v-model="formDialog.data.currency"
               :options="currencyOptions"
               label="Currency *"></q-select>
-            <q-btn unelevated
-              color="deep-purple"
-              :disable="formDialog.data.currency == null || formDialog.data.name == null"
-              @click="createTPoS">Create TPoS</q-btn>
-            <q-btn v-close-popup flat color="grey" class="q-ml-auto">Cancel</q-btn>
+            <div class="row q-mt-lg">
+              <q-btn unelevated
+                color="deep-purple"
+                :disable="formDialog.data.currency == null || formDialog.data.name == null"
+                @click="createTPoS">Create TPoS</q-btn>
+              <q-btn v-close-popup flat color="grey" class="q-ml-auto">Cancel</q-btn>
+            </div>
         </q-form>
       </q-card>
     </q-dialog>
@@ -134,12 +136,85 @@
         return {
           tposs: [],
           currencyOptions: [
-            'USD', 'EUR', 'GBP', 'DZD', 'ARP', 'AUD', 'ATS', 'BSD', 'BBD', 'BEF', 'BMD', 'BRL', 'BGL', 'CAD', 'CLP',
-            'CNY', 'CYP', 'CSK', 'DKK', 'NLG', 'XCD', 'EGP', 'FJD', 'FIM', 'FRF', 'DEM', 'XAU', 'GRD', 'HKD', 'HUF',
-            'ISK', 'INR', 'IDR', 'IEP', 'ILS', 'ITL', 'JMD', 'JPY', 'JOD', 'KRW', 'LBP', 'LUF', 'MYR', 'MXP', 'NLG',
-            'NZD', 'NOK', 'PKR', 'XPD', 'PHP', 'XPT', 'PLZ', 'PTE', 'ROL', 'RUR', 'SAR', 'XAG', 'SGD', 'SKK', 'ZAR',
-            'KRW', 'ESP', 'XDR', 'SDD', 'SEK', 'CHF', 'TWD', 'THB', 'TTD', 'TRL', 'VEB', 'ZMK', 'EUR', 'XCD', 'XDR',
-            'XAG', 'XAU', 'XPD', 'XPT'
+            {value: 'USD', label: 'USD - United States Dollars'},
+            {value: 'EUR', label: 'EUR - Euro'},
+            {value: 'GBP', label: 'GBP - United Kingdom Pounds'},
+            {value: 'DZD', label: 'DZD - Algeria Dinars'},
+            {value: 'ARP', label: 'ARP - Argentina Pesos'},
+            {value: 'AUD', label: 'AUD - Australia Dollars'},
+            {value: 'ATS', label: 'ATS - Austria Schillings'},
+            {value: 'BSD', label: 'BSD - Bahamas Dollars'},
+            {value: 'BBD', label: 'BBD - Barbados Dollars'},
+            {value: 'BEF', label: 'BEF - Belgium Francs'},
+            {value: 'BMD', label: 'BMD - Bermuda Dollars'},
+            {value: 'BRL', label: 'BRL - Brazil Real'},
+            {value: 'BGL', label: 'BGL - Bulgaria Lev'},
+            {value: 'CAD', label: 'CAD - Canada Dollars'},
+            {value: 'CLP', label: 'CLP - Chile Pesos'},
+            {value: 'CNY', label: 'CNY - China Yuan Renmimbi'},
+            {value: 'CYP', label: 'CYP - Cyprus Pounds'},
+            {value: 'CSK', label: 'CSK - Czech Republic Koruna'},
+            {value: 'DKK', label: 'DKK - Denmark Kroner'},
+            {value: 'NLG', label: 'NLG - Dutch Guilders'},
+            {value: 'XCD', label: 'XCD - Eastern Caribbean Dollars'},
+            {value: 'EGP', label: 'EGP - Egypt Pounds'},
+            {value: 'FJD', label: 'FJD - Fiji Dollars'},
+            {value: 'FIM', label: 'FIM - Finland Markka'},
+            {value: 'FRF', label: 'FRF - France Francs'},
+            {value: 'DEM', label: 'DEM - Germany Deutsche Marks'},
+            {value: 'XAU', label: 'XAU - Gold Ounces'},
+            {value: 'GRD', label: 'GRD - Greece Drachmas'},
+            {value: 'HKD', label: 'HKD - Hong Kong Dollars'},
+            {value: 'HUF', label: 'HUF - Hungary Forint'},
+            {value: 'ISK', label: 'ISK - Iceland Krona'},
+            {value: 'INR', label: 'INR - India Rupees'},
+            {value: 'IDR', label: 'IDR - Indonesia Rupiah'},
+            {value: 'IEP', label: 'IEP - Ireland Punt'},
+            {value: 'ILS', label: 'ILS - Israel New Shekels'},
+            {value: 'ITL', label: 'ITL - Italy Lira'},
+            {value: 'JMD', label: 'JMD - Jamaica Dollars'},
+            {value: 'JPY', label: 'JPY - Japan Yen'},
+            {value: 'JOD', label: 'JOD - Jordan Dinar'},
+            {value: 'KRW', label: 'KRW - Korea (South) Won'},
+            {value: 'LBP', label: 'LBP - Lebanon Pounds'},
+            {value: 'LUF', label: 'LUF - Luxembourg Francs'},
+            {value: 'MYR', label: 'MYR - Malaysia Ringgit'},
+            {value: 'MXP', label: 'MXP - Mexico Pesos'},
+            {value: 'NLG', label: 'NLG - Netherlands Guilders'},
+            {value: 'NZD', label: 'NZD - New Zealand Dollars'},
+            {value: 'NOK', label: 'NOK - Norway Kroner'},
+            {value: 'PKR', label: 'PKR - Pakistan Rupees'},
+            {value: 'XPD', label: 'XPD - Palladium Ounces'},
+            {value: 'PHP', label: 'PHP - Philippines Pesos'},
+            {value: 'XPT', label: 'XPT - Platinum Ounces'},
+            {value: 'PLZ', label: 'PLZ - Poland Zloty'},
+            {value: 'PTE', label: 'PTE - Portugal Escudo'},
+            {value: 'ROL', label: 'ROL - Romania Leu'},
+            {value: 'RUR', label: 'RUR - Russia Rubles'},
+            {value: 'SAR', label: 'SAR - Saudi Arabia Riyal'},
+            {value: 'XAG', label: 'XAG - Silver Ounces'},
+            {value: 'SGD', label: 'SGD - Singapore Dollars'},
+            {value: 'SKK', label: 'SKK - Slovakia Koruna'},
+            {value: 'ZAR', label: 'ZAR - South Africa Rand'},
+            {value: 'KRW', label: 'KRW - South Korea Won'},
+            {value: 'ESP', label: 'ESP - Spain Pesetas'},
+            {value: 'XDR', label: 'XDR - Special Drawing Right (IMF)'},
+            {value: 'SDD', label: 'SDD - Sudan Dinar'},
+            {value: 'SEK', label: 'SEK - Sweden Krona'},
+            {value: 'CHF', label: 'CHF - Switzerland Francs'},
+            {value: 'TWD', label: 'TWD - Taiwan Dollars'},
+            {value: 'THB', label: 'THB - Thailand Baht'},
+            {value: 'TTD', label: 'TTD - Trinidad and Tobago Dollars'},
+            {value: 'TRL', label: 'TRL - Turkey Lira'},
+            {value: 'VEB', label: 'VEB - Venezuela Bolivar'},
+            {value: 'ZMK', label: 'ZMK - Zambia Kwacha'},
+            {value: 'EUR', label: 'EUR - Euro'},
+            {value: 'XCD', label: 'XCD - Eastern Caribbean Dollars'},
+            {value: 'XDR', label: 'XDR - Special Drawing Right (IMF)'},
+            {value: 'XAG', label: 'XAG - Silver Ounces'},
+            {value: 'XAU', label: 'XAU - Gold Ounces'},
+            {value: 'XPD', label: 'XPD - Palladium Ounces'},
+            {value: 'XPT', label: 'XPT - Platinum Ounces'}
           ],
           tpossTable: {
             columns: [
diff --git a/lnbits/extensions/tpos/templates/tpos/tpos.html b/lnbits/extensions/tpos/templates/tpos/tpos.html
index 5111069..c219966 100644
--- a/lnbits/extensions/tpos/templates/tpos/tpos.html
+++ b/lnbits/extensions/tpos/templates/tpos/tpos.html
@@ -80,7 +80,7 @@
               {% raw %}{{ fsat }}{% endraw %} <small>sat</small>
             </h5>
           </div>
-          <div class="row q-mt-md">
+          <div class="row q-mt-lg">
             <q-btn v-close-popup flat color="grey" class="q-ml-auto">Close</q-btn>
           </div>
         </q-card>
@@ -93,8 +93,8 @@
           <div class="text-center q-mb-xl">
             <p style="word-break: break-all"><strong>{{ tpos.name }}</strong><br>{{ request.url }}</p>
           </div>
-          <div class="row q-mt-md">
-            <q-btn flat color="grey" @click="copyText('{{ request.url }}', 'TPoS URL copied to clipboard!')" >Copy URL</q-btn>
+          <div class="row q-mt-lg">
+            <q-btn outline color="grey" @click="copyText('{{ request.url }}', 'TPoS URL copied to clipboard!')">Copy URL</q-btn>
             <q-btn v-close-popup flat color="grey" class="q-ml-auto">Close</q-btn>
           </div>
         </q-card>
diff --git a/lnbits/extensions/withdraw/templates/withdraw/display.html b/lnbits/extensions/withdraw/templates/withdraw/display.html
index 262420a..0208784 100644
--- a/lnbits/extensions/withdraw/templates/withdraw/display.html
+++ b/lnbits/extensions/withdraw/templates/withdraw/display.html
@@ -16,8 +16,8 @@
               </q-responsive>
             </a>
           </div>
-          <div class="row justify-between">
-            <q-btn flat color="grey" @click="copyText('{{ link.lnurl }}')">Copy LNURL</q-btn>
+          <div class="row q-mt-lg">
+            <q-btn outline color="grey" @click="copyText('{{ link.lnurl }}')">Copy LNURL</q-btn>
           </div>
         </q-card-section>
       </q-card>
diff --git a/lnbits/extensions/withdraw/templates/withdraw/index.html b/lnbits/extensions/withdraw/templates/withdraw/index.html
index 87cd43e..b91f277 100644
--- a/lnbits/extensions/withdraw/templates/withdraw/index.html
+++ b/lnbits/extensions/withdraw/templates/withdraw/index.html
@@ -138,22 +138,24 @@
               </q-item-section>
             </q-item>
           </q-list>
-          <q-btn v-if="formDialog.data.id" unelevated color="deep-purple" type="submit">Update withdraw link</q-btn>
-          <q-btn v-else unelevated
-            color="deep-purple"
-            :disable="
-              formDialog.data.wallet == null ||
-              formDialog.data.title == null ||
-              (formDialog.data.min_withdrawable == null || formDialog.data.min_withdrawable < 1) ||
-              (
-                formDialog.data.max_withdrawable == null ||
-                formDialog.data.max_withdrawable < 1 ||
-                formDialog.data.max_withdrawable < formDialog.data.min_withdrawable
-              ) ||
-              formDialog.data.uses == null ||
-              formDialog.data.wait_time == null"
-            type="submit">Create withdraw link</q-btn>
-          <q-btn v-close-popup flat color="grey" class="q-ml-auto">Cancel</q-btn>
+          <div class="row q-mt-lg">
+            <q-btn v-if="formDialog.data.id" unelevated color="deep-purple" type="submit">Update withdraw link</q-btn>
+            <q-btn v-else unelevated
+              color="deep-purple"
+              :disable="
+                formDialog.data.wallet == null ||
+                formDialog.data.title == null ||
+                (formDialog.data.min_withdrawable == null || formDialog.data.min_withdrawable < 1) ||
+                (
+                  formDialog.data.max_withdrawable == null ||
+                  formDialog.data.max_withdrawable < 1 ||
+                  formDialog.data.max_withdrawable < formDialog.data.min_withdrawable
+                ) ||
+                formDialog.data.uses == null ||
+                formDialog.data.wait_time == null"
+              type="submit">Create withdraw link</q-btn>
+            <q-btn v-close-popup flat color="grey" class="q-ml-auto">Cancel</q-btn>
+          </div>
         </q-form>
       </q-card>
     </q-dialog>
@@ -172,9 +174,10 @@
             <strong>Withdraws:</strong> {{ qrCodeDialog.data.used }} / {{ qrCodeDialog.data.uses }} <q-linear-progress :value="qrCodeDialog.data.used / qrCodeDialog.data.uses" color="deep-purple" class="q-mt-sm"></q-linear-progress>
           </p>
         {% endraw %}
-        <div class="row q-mt-md">
-          <q-btn flat color="grey" @click="copyText(qrCodeDialog.data.withdraw_url)">Copy link</q-btn>
-          <q-btn v-if="!qrCodeDialog.data.is_unique" flat color="grey" type="a" :href="qrCodeDialog.data.print_url" target="_blank">Print QR codes</q-btn>
+        <div class="row q-mt-lg q-gutter-sm">
+          <q-btn outline color="grey" @click="copyText(qrCodeDialog.data.lnurl, 'LNURL copied to clipboard!')" class="q-ml-sm">Copy LNURL</q-btn>
+          <q-btn outline color="grey" @click="copyText(qrCodeDialog.data.withdraw_url, 'Link copied to clipboard!')">Shareable link</q-btn>
+          <q-btn v-if="!qrCodeDialog.data.is_unique" outline color="grey" icon="print" type="a" :href="qrCodeDialog.data.print_url" target="_blank"></q-btn>
           <q-btn v-close-popup flat color="grey" class="q-ml-auto">Close</q-btn>
         </div>
       </q-card>
diff --git a/lnbits/static/js/base.js b/lnbits/static/js/base.js
index c522ce2..6c253c5 100644
--- a/lnbits/static/js/base.js
+++ b/lnbits/static/js/base.js
@@ -59,7 +59,7 @@ var LNbits = {
       });
       obj.walletOptions = obj.wallets.map(function (obj) {
         return {
-          label: [obj.name, ' (', obj.id , ')'].join(''),
+          label: [obj.name, ' - ', obj.id].join(''),
           value: obj.id
         };
       });