From 0c7a0cc546af5f5423bfe1ac70cc610faa446a99 Mon Sep 17 00:00:00 2001 From: sripwoud Date: Fri, 6 Sep 2024 23:50:22 +0200 Subject: [PATCH] style(client): custom color and backround QR options --- client/public/pawprint-violet.png | Bin 0 -> 4901 bytes client/src/components/Login.tsx | 25 ++++++++++++++++++++++++- client/src/lib/generate-qrcode.ts | 4 ++++ 3 files changed, 28 insertions(+), 1 deletion(-) create mode 100644 client/public/pawprint-violet.png diff --git a/client/public/pawprint-violet.png b/client/public/pawprint-violet.png new file mode 100644 index 0000000000000000000000000000000000000000..86bd58377abc373d70d47ef5ac8188fe1455ad63 GIT binary patch literal 4901 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 + return ( +
+ +
+ Scan this 👆 with your OpenPassport mobile app: + + iOS + + + Android + +
+
+ ) } diff --git a/client/src/lib/generate-qrcode.ts b/client/src/lib/generate-qrcode.ts index 7acdcec..803fb65 100644 --- a/client/src/lib/generate-qrcode.ts +++ b/client/src/lib/generate-qrcode.ts @@ -3,6 +3,10 @@ import type { AppType } from 'l/types' export function generateQrCode(appData: AppType, size = 256): HTMLElement { const options = { + backgroundImage: './public/pawprint-violet.png', + backgroundImageAlpha: 0.7, + colorDark: '#9f84bd', + colorLight: '#ede3e9', text: JSON.stringify(appData), width: size, height: size,