style(client): custom color and backround QR options

dog-18 · Sep 6, 2024 · 48f11d1 · 48f11d1
1 parent 50c53ef
commit 48f11d1
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 1 deletion.
diff --git a/client/public/pawprint-violet.png b/client/public/pawprint-violet.png
diff --git a/client/src/components/Login.tsx b/client/src/components/Login.tsx
@@ -13,5 +13,28 @@ export function Login() {
       alert('Error')
   }, [error, navigate, valid])
 
-  return <OpenPassportQRCode userId={crypto.randomUUID()} />
+  return (
+    <div className='flex flex-col justify-center items-center'>
+      <OpenPassportQRCode userId={crypto.randomUUID()} />
+      <div>
+        Scan this 👆 with your OpenPassport mobile app:
+        <a
+          className='underline ml-2'
+          href='https://apps.apple.com/us/app/proof-of-passport/id6478563710'
+          target='_blank'
+          rel='noopener noreferrer'
+        >
+          iOS
+        </a>
+        <a
+          className='underline ml-2'
+          href='https://play.google.com/store/apps/details?id=com.proofofpassportapp'
+          target='_blank'
+          rel='noopener noreferrer'
+        >
+          Android
+        </a>
+      </div>
+    </div>
+  )
 }
diff --git 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: '/pawprint-violet.png',
+    backgroundImageAlpha: 0.7,
+    colorDark: '#9f84bd',
+    colorLight: '#ede3e9',
     text: JSON.stringify(appData),
     width: size,
     height: size,