feat: restyle QR code dialog (#211)

## Change Summary Simplify QR codes and restyle dialog. ## Merge Checklist _Choose all relevant options below by adding an `x` now or at any time before submitting for review_ - [x] PR title adheres to the [conventional commits](https://www.conventionalcommits.org/en/v1.0.0/) standard - [x] PR has a changeset - [x] PR has been tagged with a change label(s) (i.e. documentation, feature, bugfix, or chore) - [ ] PR includes documentation if necessary - [x] All commits have been signed
farcasterxyz · Aug 21, 2024 · 70825e6 · 70825e6
1 parent 59f498c
commit 70825e6
Show file tree

Hide file tree

Showing 5 changed files with 56 additions and 119 deletions.
diff --git a/.changeset/eight-seahorses-laugh.md b/.changeset/eight-seahorses-laugh.md
@@ -0,0 +1,5 @@
+---
+"@farcaster/auth-kit": minor
+---
+
+restyle QR code dialog
diff --git a/packages/auth-kit/src/components/QRCode.tsx b/packages/auth-kit/src/components/QRCode.tsx
@@ -1,7 +1,6 @@
 import QRCodeUtil from "qrcode";
 import { ReactElement, useMemo } from "react";
-import { FarcasterLogo } from "./FarcasterLogo";
-import { qrCodeContainer, qrCodeWrapper, qrCode } from "./styles.css";
+import { qrCodeWrapper, qrCode } from "./styles.css";
 
 const generateMatrix = (
   value: string,
@@ -30,13 +29,7 @@ type Props = {
   uri: string;
 };
 
-export function QRCode({
-  ecl = "H",
-  logoMargin = 10,
-  logoSize = 50,
-  size: sizeProp = 200,
-  uri,
-}: Props) {
+export function QRCode({ ecl = "M", size: sizeProp = 200, uri }: Props) {
   const padding = "20";
   const size = sizeProp - parseInt(padding, 10) * 2;
 
@@ -59,8 +52,6 @@ export function QRCode({
             fill={i % 2 !== 0 ? "white" : "black"}
             height={cellSize * (7 - i * 2)}
             key={`${i}-${x}-${y}`}
-            rx={(i - 2) * -5 + (i === 0 ? 2 : 0)} // calculated border radius for corner squares
-            ry={(i - 2) * -5 + (i === 0 ? 2 : 0)} // calculated border radius for corner squares
             width={cellSize * (7 - i * 2)}
             x={x1 + cellSize * i}
             y={y1 + cellSize * i}
@@ -69,10 +60,6 @@ export function QRCode({
       }
     });
 
-    const clearArenaSize = Math.floor((logoSize + logoMargin * 2) / cellSize);
-    const matrixMiddleStart = matrix.length / 2 - clearArenaSize / 2;
-    const matrixMiddleEnd = matrix.length / 2 + clearArenaSize / 2 - 1;
-
     matrix.forEach((row: QRCodeUtil.QRCode[], i: number) => {
       row.forEach((_, j) => {
         if (matrix[i][j]) {
@@ -83,62 +70,37 @@ export function QRCode({
               (i < 7 && j > matrix.length - 8)
             )
           ) {
-            if (
-              !(
-                i > matrixMiddleStart &&
-                i < matrixMiddleEnd &&
-                j > matrixMiddleStart &&
-                j < matrixMiddleEnd
-              )
-            ) {
-              squares.push(
-                <rect
-                  fill="black"
-                  height={cellSize - 0.5}
-                  key={`square-${i}-${j}`}
-                  width={cellSize - 0.5}
-                  x={i * cellSize}
-                  y={j * cellSize}
-                />
-              );
-            }
+            squares.push(
+              <rect
+                fill="black"
+                height={cellSize}
+                key={`square-${i}-${j}`}
+                width={cellSize}
+                x={i * cellSize}
+                y={j * cellSize}
+              />
+            );
           }
         }
       });
     });
 
     return squares;
-  }, [ecl, logoSize, logoMargin, size, uri]);
-
-  const logoPosition = size / 2 - logoSize / 2;
-  const logoWrapperSize = logoSize + logoMargin * 2;
+  }, [ecl, size, uri]);
 
   return (
-    <div className={qrCodeContainer}>
-      <div className={qrCodeWrapper}>
-        <div
-          className={qrCode}
-          style={{
-            top: logoPosition,
-            width: size,
-          }}
-        >
-          <FarcasterLogo fill="purple" height={logoSize} />
-        </div>
-        <svg height={size} style={{ all: "revert" }} width={size}>
-          <title>QR Code</title>
-          <defs>
-            <clipPath id="clip-wrapper">
-              <rect height={logoWrapperSize} width={logoWrapperSize} />
-            </clipPath>
-            <clipPath id="clip-logo">
-              <rect height={logoSize} width={logoSize} />
-            </clipPath>
-          </defs>
-          <rect fill="transparent" height={size} width={size} />
-          {squares}
-        </svg>
-      </div>
+    <div className={qrCodeWrapper}>
+      <div
+        className={qrCode}
+        style={{
+          width: size,
+        }}
+      />
+      <svg height={size} style={{ all: "revert" }} width={size}>
+        <title>QR Code</title>
+        <rect fill="transparent" height={size} width={size} />
+        {squares}
+      </svg>
     </div>
   );
 }
diff --git a/packages/auth-kit/src/components/QRCodeDialog/QRCodeDialog.css.ts b/packages/auth-kit/src/components/QRCodeDialog/QRCodeDialog.css.ts
@@ -2,24 +2,24 @@ import { style } from "@vanilla-extract/css";
 
 export const body = style({
   backgroundColor: "white",
-  fontFamily: "sans-serif",
+  fontFamily: "Inter, sans-serif",
+  letterSpacing: "-0.09px",
   borderRadius: 12,
-  maxWidth: 360,
+  maxWidth: 405,
   position: "relative",
-  paddingTop: 32,
-  paddingLeft: 32,
-  paddingRight: 32,
-  paddingBottom: 20,
+  padding: 16,
 });
 
 export const siwfHeading = style({
-  fontSize: 22,
+  lineHeight: "32px",
+  fontSize: 24,
   fontWeight: 600,
-  marginBottom: 6,
+  marginBottom: 8,
 });
 
 export const instructions = style({
-  fontSize: 15.5,
+  fontSize: 15,
+  lineHeight: "20px",
   color: "rgba(0, 0, 0, 0.5)",
 });
 
@@ -35,6 +35,14 @@ export const createAccount = style({
 });
 
 export const qrCodeImage = style({
-  maxWidth: 480,
-  width: "100%",
+  display: "flex",
+  justifyContent: "center",
+  marginTop: 16,
+  marginBottom: 16,
+  borderColor: "rgba(229, 231, 235, 0.333)",
+  padding: 16,
+  backgroundColor: "white",
+  borderWidth: 1,
+  borderStyle: "solid",
+  borderRadius: 12,
 });
diff --git a/packages/auth-kit/src/components/QRCodeDialog/QRCodeDialog.tsx b/packages/auth-kit/src/components/QRCodeDialog/QRCodeDialog.tsx
@@ -4,8 +4,7 @@ import {
   body,
   siwfHeading,
   instructions,
-  createAccount,
-  signUp
+  qrCodeImage,
 } from "./QRCodeDialog.css.ts";
 import { Button } from "../Button.tsx";
 import { QRCode } from "../QRCode.tsx";
@@ -24,29 +23,9 @@ export function QRCodeDialog({
   error?: AuthClientError;
 }) {
   return (
-    <Dialog open={open} titleId="Sign In With Farcaster" onClose={onClose}>
+    <Dialog open={open} titleId="Sign in with Farcaster" onClose={onClose}>
       <div className="fc-authkit-qrcode-dialog">
         <div className={body}>
-          <Button
-            kind="reset"
-            onClick={onClose}
-            style={{ position: "absolute", top: 19, right: 13 }}
-          >
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width={18}
-              height={18}
-              fill="none"
-            >
-              <title>Sign in With Farcaster</title>
-              <path
-                fill="rgba(0,0,0,0.5)"
-                fillRule="evenodd"
-                d="M1.15 1.15a.937.937 0 0 1 1.325 0L9 7.674l6.525-6.524a.937.937 0 1 1 1.325 1.325L10.326 9l6.524 6.525a.937.937 0 0 1-1.325 1.325L9 10.326 2.475 16.85a.938.938 0 0 1-1.325-1.325L7.674 9 1.15 2.475a.937.937 0 0 1 0-1.325Z"
-                clipRule="evenodd"
-              />
-            </svg>
-          </Button>
           {isError ? (
             <>
               <div className={siwfHeading}>Error</div>
@@ -58,20 +37,11 @@ export function QRCodeDialog({
             <>
               <div className={siwfHeading}>Sign in with Farcaster</div>
               <div className={instructions}>
-                Scan with your phone's camera to continue.
+                To sign in with Farcaster, scan the code below with your phone's
+                camera.
               </div>
-              <div className={createAccount}>
-                <a className={signUp} href="https://warpcast.com/~/signup" target="_blank" rel="noreferrer">Need to create an account?</a>
-              </div>
-              <div
-                style={{
-                  display: "flex",
-                  justifyContent: "center",
-                  marginTop: 24,
-                  marginBottom: 12,
-                }}
-              >
-                <QRCode uri={url} size={300} logoSize={28} logoMargin={16} />
+              <div className={qrCodeImage}>
+                <QRCode uri={url} size={200} />
               </div>
               <div style={{ display: "flex", justifyContent: "center" }}>
                 <Button

diff --git a/packages/auth-kit/src/components/styles.css.ts b/packages/auth-kit/src/components/styles.css.ts
@@ -36,6 +36,7 @@ export const button = {
   fontWeight: 600,
   display: "flex",
   alignItems: "center",
+  fontFamily: "Inter, sans-serif",
 
   ":disabled": {
     cursor: "not-allowed",
@@ -69,15 +70,6 @@ export const tertiaryButton = style({
   color: "#7C65C1",
 });
 
-export const qrCodeContainer = style({
-  borderColor: "rgba(229, 231, 235, 0.333)",
-  padding: 24,
-  backgroundColor: "white",
-  borderWidth: 1,
-  borderStyle: "solid",
-  borderRadius: 12,
-});
-
 export const qrCodeWrapper = style({
   userSelect: "none",
 });