Fixed jukebox to match style

lnbits/core/static/js/wallet.js

@@ -111,7 +111,6 @@ new Vue({
   mixins: [windowMixin],
   data: function () {
     return {
-      
       user: LNbits.map.user(window.user),
       receive: {
         show: false,
@@ -623,7 +622,6 @@ new Vue({
     }
   },
   created: function () {
-    
     this.fetchBalance()
     this.fetchPayments()
 
@@ -637,7 +635,6 @@ new Vue({
       })
   },
   mounted: function () {
-    
     // show disclaimer
     if (
       this.$refs.disclaimer &&

lnbits/extensions/jukebox/templates/jukebox/index.html

@@ -6,7 +6,7 @@
       <q-card-section>
         <q-btn
           unelevated
-          color="green-7"
+          color="primary"
           class="q-ma-lg"
           @click="openNewDialog()"
           >Add Spotify Jukebox</q-btn
@@ -108,8 +108,8 @@
     <q-card class="q-pa-md q-pt-lg q-mt-md" style="width: 100%">
       <q-stepper
         v-model="step"
-        active-color="green-7"
-        inactive-color="green-10"
+        active-color="primary"
+        inactive-color="secondary"
         vertical
         animated
       >
@@ -149,15 +149,15 @@
             <div class="col-4">
               <q-btn
                 v-if="jukeboxDialog.data.title != null && jukeboxDialog.data.price != null && jukeboxDialog.data.wallet != null"
-                color="green-7"
+                color="primary"
                 @click="step = 2"
                 >Continue</q-btn
               >
-              <q-btn v-else color="green-7" disable>Continue</q-btn>
+              <q-btn v-else color="primary" disable>Continue</q-btn>
             </div>
             <div class="col-8">
               <q-btn
-                color="green-7"
+                color="primary"
                 class="float-right"
                 @click="closeFormDialog"
                 >Cancel</q-btn
@@ -208,17 +208,17 @@
             <div class="col-4">
               <q-btn
                 v-if="jukeboxDialog.data.sp_secret != null && jukeboxDialog.data.sp_user != null && tokenFetched"
-                color="green-7"
+                color="primary"
                 @click="submitSpotifyKeys"
                 >Submit keys</q-btn
               >
-              <q-btn v-else color="green-7" disable color="green-7"
+              <q-btn v-else color="primary" disable color="primary"
                 >Submit keys</q-btn
               >
             </div>
             <div class="col-8">
               <q-btn
-                color="green-7"
+                color="primary"
                 class="float-right"
                 @click="closeFormDialog"
                 >Cancel</q-btn
@@ -237,7 +237,7 @@
             dense
             outline
             unelevated
-            color="green-7"
+            color="primary"
             size="xs"
             @click="copyText(locationcb + jukeboxDialog.data.sp_id, 'Link copied to clipboard!')"
             >{% raw %}{{ locationcb }}{{ jukeboxDialog.data.sp_id }}{% endraw
@@ -256,17 +256,17 @@
             <div class="col-4">
               <q-btn
                 v-if="jukeboxDialog.data.sp_secret != null && jukeboxDialog.data.sp_user != null && tokenFetched"
-                color="green-7"
+                color="primary"
                 @click="authAccess"
                 >Authorise access</q-btn
               >
-              <q-btn v-else color="green-7" disable color="green-7"
+              <q-btn v-else color="primary" disable color="primary"
                 >Authorise access</q-btn
               >
             </div>
             <div class="col-8">
               <q-btn
-                color="green-7"
+                color="primary"
                 class="float-right"
                 @click="closeFormDialog"
                 >Cancel</q-btn
@@ -281,7 +281,7 @@
           :name="4"
           title="Select playlists"
           icon="queue_music"
-          active-color="green-8"
+          active-color="primary"
           :done="step > 4"
         >
           <q-select
@@ -307,15 +307,15 @@
             <div class="col-5">
               <q-btn
                 v-if="jukeboxDialog.data.sp_device != null && jukeboxDialog.data.sp_playlists != null"
-                color="green-7"
+                color="primary"
                 @click="createJukebox"
                 >Create Jukebox</q-btn
               >
-              <q-btn v-else color="green-7" disable>Create Jukebox</q-btn>
+              <q-btn v-else color="primary" disable>Create Jukebox</q-btn>
             </div>
             <div class="col-7">
               <q-btn
-                color="green-7"
+                color="primary"
                 class="float-right"
                 @click="closeFormDialog"
                 >Cancel</q-btn

lnbits/extensions/offlineshop/templates/offlineshop/index.html

@@ -123,7 +123,7 @@
       <q-tabs
         v-model="confirmationMethod"
         no-caps
-        class="bg-purple text-white shadow-2"
+        class="bg-dark text-white shadow-2"
       >
         <q-tab name="wordlist" label="Wordlist"></q-tab>
         <q-tab name="totp" label="TOTP (Google Authenticator)"></q-tab>

lnbits/static/js/base.js

@@ -307,14 +307,13 @@ window.windowMixin = {
         extensions: [],
         user: null,
         wallet: null,
-        payments: [],
-        
+        payments: []
       }
     }
   },
-  
+
   methods: {
-    changeColor: function(newValue) {
+    changeColor: function (newValue) {
       document.body.setAttribute('data-theme', newValue)
       console.log(document.body.getAttribute('data-theme'))
       console.log(newValue)
@@ -336,8 +335,11 @@ window.windowMixin = {
   },
   created: function () {
     this.$q.dark.set(this.$q.localStorage.getItem('lnbits.darkMode'))
-    if (this.$q.localStorage.getItem('lnbits.theme')){
-      document.body.setAttribute('data-theme', this.$q.localStorage.getItem('lnbits.theme'))
+    if (this.$q.localStorage.getItem('lnbits.theme')) {
+      document.body.setAttribute(
+        'data-theme',
+        this.$q.localStorage.getItem('lnbits.theme')
+      )
     }
     if (window.user) {
       this.g.user = Object.freeze(window.LNbits.map.user(window.user))

lnbits/static/scss/base.scss

@@ -25,7 +25,7 @@ $themes: (
   ),
   'flamingo': (
     primary: #c64242,
-    secondary: #ff7474,
+    secondary: #cf5656,
     dark: #e75480,
     info: #ec7599,
     marginal-bg: #e75480,
@@ -55,7 +55,8 @@ $themes: (
       }
     }
     @if $name == 'info' {
-      [data-theme='#{$theme}'] .q-card--dark {
+      [data-theme='#{$theme}'] .q-card--dark,
+      [data-theme='#{$theme}'] .q-stepper--dark {
         background: $color !important;
       }
     }