feat: harmonize the UI for payment dialog (#2882)

lnbits/static/css/base.css

@@ -535,12 +535,13 @@ video {
   display: flex;
   align-items: center;
   justify-content: center;
+  margin: 0 auto;
 }
 
 .qrcode__wrapper canvas {
   width: 100% !important;
   height: 100% !important;
-  max-width: 350px;
+  max-width: 320px;
 }
 
 .qrcode__image {

lnbits/static/i18n/en.js

@@ -94,6 +94,7 @@ window.localisation.en = {
   invoice_waiting: 'Invoice waiting to be paid',
   payment_received: 'Payment Received',
   payment_sent: 'Payment Sent',
+  payment_failed: 'Payment Failed',
   receive: 'receive',
   send: 'send',
   outgoing_payment_pending: 'Outgoing payment pending',

lnbits/static/scss/base.scss

@@ -212,11 +212,12 @@ video {
   display: flex;
   align-items: center;
   justify-content: center;
+  margin: 0 auto;
 }
 .qrcode__wrapper canvas {
   width: 100% !important; // important to override qrcode inline width
   height: 100% !important;
-  max-width: 350px; // default width of <lnbits-qrcode> component
+  max-width: 320px; // default width of <lnbits-qrcode> component
 }
 .qrcode__image {
   position: absolute;