Keep custom QR readable in light mode (#119)

* Keep custom QR readable in light mode

* Center custom QR frame on mobile

---------

Co-authored-by: C-3PO <c3po.bot@gmail.com>

Author: commrelayunit

src/components/vaults/QRCodeDialog.tsx

@@ -271,12 +271,12 @@ export function QRCodeDialog({ vault, onVaultUpdate }: QRCodeDialogProps) {
               </DialogTitle>
             </DialogHeader>
             <div className="flex flex-col items-center gap-3 sm:gap-6 py-2 sm:py-5">
-              <div className="w-full max-w-[276px] sm:max-w-[456px] p-0 rounded-2xl sm:rounded-3xl shadow-xl glow-purple">
-                <div className="p-0 bg-transparent rounded-xl sm:rounded-2xl relative overflow-hidden">
+              <div className="mx-auto w-full max-w-[276px] self-center rounded-2xl bg-[#0d0d0f] p-0 shadow-xl glow-purple sm:max-w-[456px] sm:rounded-3xl">
+                <div className="relative overflow-hidden rounded-xl bg-[#0d0d0f] p-0 sm:rounded-2xl">
                   <div 
                     ref={qrRef}
                     className={cn(
-                      "relative flex items-center justify-center rounded-xl sm:rounded-2xl",
+                      "relative flex items-center justify-center rounded-xl bg-[#0d0d0f] sm:rounded-2xl",
                       customQrLoading && !customQrError && "min-h-[220px] sm:min-h-[360px]"
                     )}
                     style={{
@@ -287,7 +287,7 @@ export function QRCodeDialog({ vault, onVaultUpdate }: QRCodeDialogProps) {
                       <img
                         src={customQrUrl}
                         alt={`QR code for ${vault.name || 'vault'}`}
-                        className="block h-auto w-full max-w-[236px] object-contain sm:max-w-[390px]"
+                        className="mx-auto block h-auto w-full max-w-[236px] object-contain sm:max-w-[390px]"
                       />
                     ) : customQrLoading && !customQrError ? (
                       <div className="flex flex-col items-center justify-center gap-3 text-center font-mono text-sm text-muted-foreground">
@@ -304,7 +304,7 @@ export function QRCodeDialog({ vault, onVaultUpdate }: QRCodeDialogProps) {
                         size={fallbackQrSize}
                         level="H"
                         marginSize={2}
-                        bgColor="#ffffff"
+                        bgColor={QR_DOWNLOAD_BACKGROUND}
                         fgColor={gradientColor}
                       />
                     )}