From 6e293d2985e8821f85796d71218fc6412c9b505b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ren=C3=A9=20Aaron?=
 <100827540+reneaaron@users.noreply.github.com>
Date: Sat, 4 Jan 2025 12:18:31 +0100
Subject: [PATCH] fix: improve qr readability of alby payment integration
 (#18266)

* fix: optimize qr for better readability

* fix: optimize readability
---
 .../app-store/alby/components/AlbyPaymentComponent.tsx    | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/app-store/alby/components/AlbyPaymentComponent.tsx b/packages/app-store/alby/components/AlbyPaymentComponent.tsx
index 762d1aeef9..535e7d2b45 100644
--- a/packages/app-store/alby/components/AlbyPaymentComponent.tsx
+++ b/packages/app-store/alby/components/AlbyPaymentComponent.tsx
@@ -81,15 +81,15 @@ export const AlbyPaymentComponent = (props: IAlbyPaymentComponentProps) => {
           {showQRCode && (
             <>
               <div className="flex items-center justify-center gap-2">
-                <p className="text-xs">Waiting for payment...</p>
                 <Spinner className="h-4 w-4" />
+                <p className="text-xs">Waiting for payment</p>
               </div>
               <p className="text-sm">Click or scan the invoice below to pay</p>
               <Link
                 href={`lightning:${paymentRequest}`}
-                className="inline-flex items-center justify-center rounded-2xl rounded-md border border-transparent p-2
-                font-medium text-black shadow-sm hover:brightness-95 focus:outline-none focus:ring-offset-2">
-                <QRCode size={128} value={paymentRequest} />
+                className="inline-flex items-center justify-center rounded-2xl rounded-md border border-transparent p-2 bg-white
+                font-medium text-black shadow-sm hover:brightness-95 focus:outline-none focus:ring-offset-2 p-2">
+                <QRCode size={192} value={paymentRequest} />
               </Link>
 
               <Button