From abd04b4ccf7763d423a820a381f2c947def8d6a9 Mon Sep 17 00:00:00 2001
From: horsefacts <webmaster@terminally.online>
Date: Fri, 10 May 2024 19:36:10 -0400
Subject: [PATCH 1/2] feat: improve QR code legibility

Co-authored-by: Vladyslav Dalechyn <vladyslav@spilnota.xyz>
---
 .../auth-kit/src/components/FarcasterLogo.tsx |  1 +
 packages/auth-kit/src/components/QRCode.tsx   | 23 ++++++++++---------
 .../components/QRCodeDialog/QRCodeDialog.tsx  |  4 +++-
 3 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/packages/auth-kit/src/components/FarcasterLogo.tsx b/packages/auth-kit/src/components/FarcasterLogo.tsx
index 650305f..40b916b 100644
--- a/packages/auth-kit/src/components/FarcasterLogo.tsx
+++ b/packages/auth-kit/src/components/FarcasterLogo.tsx
@@ -12,6 +12,7 @@ export function FarcasterLogo({
       xmlns="http://www.w3.org/2000/svg"
       width={width}
       height={height}
+      viewBox="0 0 22 20"
       fill="none"
     >
       <title>Farcaster logo</title>
diff --git a/packages/auth-kit/src/components/QRCode.tsx b/packages/auth-kit/src/components/QRCode.tsx
index c129e2a..14d49cf 100644
--- a/packages/auth-kit/src/components/QRCode.tsx
+++ b/packages/auth-kit/src/components/QRCode.tsx
@@ -40,8 +40,8 @@ export function QRCode({
   const padding = "20";
   const size = sizeProp - parseInt(padding, 10) * 2;
 
-  const dots = useMemo(() => {
-    const dots: ReactElement[] = [];
+  const squares = useMemo(() => {
+    const squares: ReactElement[] = [];
     const matrix = generateMatrix(uri, ecl);
     const cellSize = size / matrix.length;
     const qrList = [
@@ -54,7 +54,7 @@ export function QRCode({
       const x1 = (matrix.length - 7) * cellSize * x;
       const y1 = (matrix.length - 7) * cellSize * y;
       for (let i = 0; i < 3; i++) {
-        dots.push(
+        squares.push(
           <rect
             fill={i % 2 !== 0 ? "white" : "black"}
             height={cellSize * (7 - i * 2)}
@@ -91,13 +91,14 @@ export function QRCode({
                 j < matrixMiddleEnd
               )
             ) {
-              dots.push(
-                <circle
-                  cx={i * cellSize + cellSize / 2}
-                  cy={j * cellSize + cellSize / 2}
+              squares.push(
+                <rect
                   fill="black"
-                  key={`circle-${i}-${j}`}
-                  r={cellSize / 3} // calculate size of single dots
+                  height={cellSize - 0.5}
+                  key={`square-${i}-${j}`}
+                  width={cellSize - 0.5}
+                  x={i * cellSize}
+                  y={j * cellSize}
                 />
               );
             }
@@ -106,7 +107,7 @@ export function QRCode({
       });
     });
 
-    return dots;
+    return squares;
   }, [ecl, logoSize, logoMargin, size, uri]);
 
   const logoPosition = size / 2 - logoSize / 2;
@@ -135,7 +136,7 @@ export function QRCode({
             </clipPath>
           </defs>
           <rect fill="transparent" height={size} width={size} />
-          {dots}
+          {squares}
         </svg>
       </div>
     </div>
diff --git a/packages/auth-kit/src/components/QRCodeDialog/QRCodeDialog.tsx b/packages/auth-kit/src/components/QRCodeDialog/QRCodeDialog.tsx
index 31bc4e5..a61d3b1 100644
--- a/packages/auth-kit/src/components/QRCodeDialog/QRCodeDialog.tsx
+++ b/packages/auth-kit/src/components/QRCodeDialog/QRCodeDialog.tsx
@@ -32,6 +32,7 @@ export function QRCodeDialog({
               height={18}
               fill="none"
             >
+              <title>Sign in With Farcaster</title>
               <path
                 fill="rgba(0,0,0,0.5)"
                 fillRule="evenodd"
@@ -61,7 +62,7 @@ export function QRCodeDialog({
                   marginBottom: 12,
                 }}
               >
-                <QRCode uri={url} size={264} logoSize={22} logoMargin={12} />
+                <QRCode uri={url} size={300} logoSize={28} logoMargin={16} />
               </div>
               <div style={{ display: "flex", justifyContent: "center" }}>
                 <Button
@@ -81,6 +82,7 @@ export function QRCodeDialog({
                     height={18}
                     fill="none"
                   >
+                    <title>Sign in With Farcaster QR Code</title>
                     <path
                       fill="#7C65C1"
                       fillRule="evenodd"

From 84197165d9ec251700ef9216b1a6bc87bd028a9c Mon Sep 17 00:00:00 2001
From: horsefacts <webmaster@terminally.online>
Date: Fri, 10 May 2024 19:57:45 -0400
Subject: [PATCH 2/2] chore: add changeset

---
 .changeset/green-hotels-explain.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/green-hotels-explain.md

diff --git a/.changeset/green-hotels-explain.md b/.changeset/green-hotels-explain.md
new file mode 100644
index 0000000..201beb4
--- /dev/null
+++ b/.changeset/green-hotels-explain.md
@@ -0,0 +1,5 @@
+---
+"@farcaster/auth-kit": minor
+---
+
+feat: improve QR code legibility