From 8e4cbc47c493bd201ba16bef17a14ac343df71d1 Mon Sep 17 00:00:00 2001
From: Jared Vititoe <jjvititoe1@gmail.com>
Date: Wed, 3 Jun 2026 16:59:32 -0400
Subject: [PATCH] =?UTF-8?q?fix:=20invite=20modal=20QR=20toggle=20=E2=80=94?=
 =?UTF-8?q?=20replace=20{}=20icon=20with=20"QR=20Code"=20button=20label?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Icons.BlockCode is the {} curly-braces icon, which is unintuitive for a
QR code toggle. No QR-specific icon exists in folds, so replace the
IconButton with a labeled Button ("QR Code") that clearly communicates
its purpose. Also fix var(--bg-surface-border) → color.Surface.ContainerLine
in the QR panel border (the CSS variable doesn't exist in Cinny's theme).

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../invite-user-prompt/InviteUserPrompt.tsx          | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/app/components/invite-user-prompt/InviteUserPrompt.tsx b/src/app/components/invite-user-prompt/InviteUserPrompt.tsx
index 7153a7205..113222a5c 100644
--- a/src/app/components/invite-user-prompt/InviteUserPrompt.tsx
+++ b/src/app/components/invite-user-prompt/InviteUserPrompt.tsx
@@ -207,17 +207,17 @@ export function InviteUserPrompt({ room, requestClose }: InviteUserProps) {
                   >
                     <Text size="B300">{linkCopied ? 'Copied!' : 'Copy Link'}</Text>
                   </Button>
-                  <IconButton
+                  <Button
                     size="300"
                     radii="300"
-                    variant={showQr ? 'Primary' : 'Surface'}
+                    variant={showQr ? 'Primary' : 'Secondary'}
                     fill={showQr ? 'Soft' : 'None'}
-                    aria-label="Show QR code"
+                    aria-label="Toggle QR code"
                     aria-pressed={showQr}
                     onClick={() => setShowQr((v) => !v)}
                   >
-                    <Icon src={Icons.BlockCode} size="100" />
-                  </IconButton>
+                    <Text size="B300">QR Code</Text>
+                  </Button>
                   <IconButton size="300" radii="300" onClick={requestClose} aria-label="Close">
                     <Icon src={Icons.Cross} />
                   </IconButton>
@@ -230,7 +230,7 @@ export function InviteUserPrompt({ room, requestClose }: InviteUserProps) {
                   gap="200"
                   style={{
                     padding: config.space.S300,
-                    borderBottom: `1px solid var(--bg-surface-border)`,
+                    borderBottom: `1px solid ${color.Surface.ContainerLine}`,
                   }}
                 >
                   <img