feat: modern theme stuff like rounded corners and card gradient (#3766)

Co-authored-by: Vlad Stan <stan.v.vlad@gmail.com>

lnbits/static/js/components/lnbits-theme.js

@@ -45,6 +45,30 @@ window.app.component('lnbits-theme', {
         document.body.classList.remove('gradient-bg')
       }
     },
+    'g.cardRoundedChoice'(val) {
+      this.$q.localStorage.set('lnbits.cardRounded', val)
+      if (val === true) {
+        document.body.classList.add('rounded-ui')
+      } else {
+        document.body.classList.remove('rounded-ui')
+      }
+    },
+    'g.cardGradientChoice'(val) {
+      this.$q.localStorage.set('lnbits.cardGradient', val)
+      if (val === true) {
+        document.body.classList.add('card-gradient')
+      } else {
+        document.body.classList.remove('card-gradient')
+      }
+    },
+    'g.cardShadowChoice'(val) {
+      this.$q.localStorage.set('lnbits.cardShadow', val)
+      if (val === true) {
+        document.body.classList.add('card-shadow')
+      } else {
+        document.body.classList.remove('card-shadow')
+      }
+    },
     'g.mobileSimple'(val) {
       this.$q.localStorage.set('lnbits.mobileSimple', val)
       if (val === true) {
@@ -117,6 +141,15 @@ window.app.component('lnbits-theme', {
     if (this.g.gradientChoice === true) {
       document.body.classList.add('gradient-bg')
     }
+    if (this.g.cardRoundedChoice === true) {
+      document.body.classList.add('rounded-ui')
+    }
+    if (this.g.cardGradientChoice === true) {
+      document.body.classList.add('card-gradient')
+    }
+    if (this.g.cardShadowChoice === true) {
+      document.body.classList.add('card-shadow')
+    }
     if (this.g.bgimageChoice !== '') {
       document.body.classList.add('bg-image')
       document.body.style.setProperty(

lnbits/static/js/globals.js

@@ -20,6 +20,15 @@ window.g = Vue.reactive({
   themeChoice: localStore('lnbits.theme', SETTINGS.defaultTheme),
   borderChoice: localStore('lnbits.border', SETTINGS.defaultBorder),
   gradientChoice: localStore('lnbits.gradientBg', SETTINGS.defaultGradient),
+  cardRoundedChoice: localStore(
+    'lnbits.cardRounded',
+    SETTINGS.defaultCardRounded
+  ),
+  cardGradientChoice: localStore(
+    'lnbits.cardGradient',
+    SETTINGS.defaultCardGradient
+  ),
+  cardShadowChoice: localStore('lnbits.cardShadow', SETTINGS.defaultCardShadow),
   reactionChoice: localStore('lnbits.reactions', SETTINGS.defaultReaction),
   bgimageChoice: localStore(
     'lnbits.backgroundImage',
@@ -31,7 +40,7 @@ window.g = Vue.reactive({
   mobileSimple: localStore('lnbits.mobileSimple', true),
   walletFlip: localStore('lnbits.walletFlip', false),
   lastActiveWallet: localStore('lnbits.lastActiveWallet', null),
-  darkChoice: localStore('lnbits.darkMode', true),
+  darkChoice: localStore('lnbits.darkMode', SETTINGS.defaultDark),
   // cookie vars
   isUserAuthorized: !!Quasar.Cookies.get('is_lnbits_user_authorized'),
   isUserImpersonated: !!Quasar.Cookies.get('is_lnbits_user_impersonated'),

lnbits/static/js/pages/account.js

@@ -40,13 +40,7 @@ window.PageAccount = {
         }
       ],
       defaultSiteCustomisation: {
-        locale: 'en',
-        themeChoice: 'salvador',
-        bgimageChoice: '',
-        gradientChoice: true,
-        darkChoice: true,
-        borderChoice: 'hard-border',
-        reactionChoice: 'confettiBothSides'
+        locale: 'en'
       },
       reactionOptions: [
         'None',
@@ -698,6 +692,20 @@ window.PageAccount = {
       } catch (e) {
         LNbits.utils.notifyApiError(e)
       }
+    },
+    resetThemeDefaults() {
+      const defaults = {
+        themeChoice: this.g.settings.defaultTheme,
+        borderChoice: this.g.settings.defaultBorder,
+        gradientChoice: this.g.settings.defaultGradient,
+        bgimageChoice: this.g.settings.defaultBgimage || '',
+        reactionChoice: this.g.settings.defaultReaction,
+        darkChoice: this.g.settings.defaultDark,
+        cardRoundedChoice: this.g.settings.defaultCardRounded,
+        cardGradientChoice: this.g.settings.defaultCardGradient,
+        cardShadowChoice: this.g.settings.defaultCardShadow
+      }
+      this.siteCustomisationChanged(defaults)
     }
   },