From 371dacf8b2c326962db1db564deaf195de720841 Mon Sep 17 00:00:00 2001
From: Tiago Vasconcelos <talvasconcelos@gmail.com>
Date: Tue, 10 Oct 2023 15:04:46 +0100
Subject: [PATCH] make QR img bigger, adjust css

---
 lnbits/static/js/components.js |  4 ++--
 lnbits/static/scss/base.scss   | 12 ++++++++----
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/lnbits/static/js/components.js b/lnbits/static/js/components.js
index 055516f50..fcbcf95a3 100644
--- a/lnbits/static/js/components.js
+++ b/lnbits/static/js/components.js
@@ -368,8 +368,8 @@ Vue.component('lnbits-qrcode', {
   template: `
   <div class="qrcode__wrapper">
     <qrcode :value="value"
-    :options="{errorCorrectionLevel: 'Q'}" class="rounded-borders"></qrcode>    
-    <img class="qrcode__image" :src="logo" alt="..." />    
+    :options="{errorCorrectionLevel: 'Q', width: 800}" class="rounded-borders"></qrcode>
+    <img class="qrcode__image" :src="logo" alt="..." />
   </div>
   `
 })
diff --git a/lnbits/static/scss/base.scss b/lnbits/static/scss/base.scss
index 7dbb240ae..612b6f104 100644
--- a/lnbits/static/scss/base.scss
+++ b/lnbits/static/scss/base.scss
@@ -214,20 +214,24 @@ video {
   }
 }
 
-.qrcode__wrapper > canvas {
+// qrcode
+.qrcode__wrapper canvas {
   position: relative;
-  min-width: 100%;
-  min-height: 100%;
+  width: 100% !important; // important to override qrcode inline width
+  max-width: 100%;
+  max-height: 100%;
 }
 
 .qrcode__image {
   width: 15%;
   height: 15%;
   overflow: hidden;
+  background: #fff;
   left: 50%;
   overflow: hidden;
   position: absolute;
   top: 50%;
   transform: translate(-50%, -50%);
-  padding: 0.3rem;
+  padding: 0.2rem;
+  border-radius: 0.2rem;
 }