Extend bar for mobile (#1544)

* extend bar for mobile

* smaller padding

* center buttons

* Added rounded style

* Added icons, looks better

* service worker

* Changed icon

* Fixed show if

---------

Co-authored-by: ben <ben@arc.wales>

lnbits/core/static/js/service-worker.js

@@ -1,6 +1,6 @@
 // update cache version every time there is a new deployment
 // so the service worker reinitializes the cache
-const CACHE_VERSION = 10
+const CACHE_VERSION = 15
 const CURRENT_CACHE = `lnbits-${CACHE_VERSION}-`
 
 const getApiKey = request => {

lnbits/core/templates/core/wallet.html

@@ -779,23 +779,27 @@
           </q-card-section>
         </q-card>
       </q-dialog>
+
       <q-tabs
         class="lt-md fixed-bottom left-0 right-0 bg-primary text-white shadow-2 z-top"
         active-class="px-0"
         indicator-color="transparent"
+        align="justify"
       >
-        <q-tab
-          icon="account_balance_wallet"
-          label="Wallets"
-          @click="g.visibleDrawer = !g.visibleDrawer"
-        >
-        </q-tab>
-        <q-tab icon="content_paste" label="Paste" @click="showParseDialog">
-        </q-tab>
         <q-tab icon="file_download" label="Receive" @click="showReceiveDialog">
         </q-tab>
 
-        <q-tab icon="photo_camera" label="Scan" @click="showCamera"> </q-tab>
+        <q-tab @click="showParseDialog" icon="file_upload" label="Send">
+        </q-tab>
+        <q-btn
+          round
+          size="35px"
+          unelevated
+          icon="qr_code_scanner"
+          @click="showCamera"
+          class="text-white bg-primary z-top vertical-bottom absolute-center absolute"
+        >
+        </q-btn>
       </q-tabs>
 
       <q-dialog v-model="disclaimerDialog.show">

lnbits/templates/base.html

@@ -46,9 +46,13 @@
             {% raw %}{{ $t('voidwallet_active') }}{% endraw %}
           </q-badge>
           {%endif%}
-          <q-badge color="yellow" text-color="black" class="q-mr-md">
+          <q-badge
+            v-show="$q.screen.gt.sm"
+            color="yellow"
+            text-color="black"
+            class="q-mr-md"
+          >
             <span
-              v-show="$q.screen.gt.sm"
               v-text='$t("use_with_caution", { name: "{{ SITE_TITLE }}" })'
             ></span>
           </q-badge>