From a624126a1afde23d8dc07e473af59279f154afa9 Mon Sep 17 00:00:00 2001
From: morgmart <98432065+morgmart@users.noreply.github.com>
Date: Sat, 18 Jul 2026 15:54:37 -0700
Subject: [PATCH] style(desktop): match PendingInviteGate to startup
 interstitials
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The pending-invite gate carried buzz-onboarding-neutral-theme but not
buzz-startup-shell, so it skipped the shared chartreuse→light-blue
gradient + dot-grid background and rendered on flat white — visibly out
of place against the sibling startup screens it sits alongside.

Add buzz-startup-shell and the data-system-color-scheme hook to the root
(keeping fixed inset-0 z-50, since this overlays MachineOnboardingFlow),
add StartupWindowDragRegion, and align the inner layout and button stack
widths with RecoveryScreen / KeyringLockedScreen.

Styling only — copy, handlers, and test ids are unchanged.

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../src/features/onboarding/ui/PendingInviteGate.tsx  | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/desktop/src/features/onboarding/ui/PendingInviteGate.tsx b/desktop/src/features/onboarding/ui/PendingInviteGate.tsx
index 9cce0863f..3a9b8a510 100644
--- a/desktop/src/features/onboarding/ui/PendingInviteGate.tsx
+++ b/desktop/src/features/onboarding/ui/PendingInviteGate.tsx
@@ -1,6 +1,8 @@
 import { useCommunityOnboarding } from "@/features/onboarding/communityOnboarding";
+import { useSystemColorScheme } from "@/shared/theme/useSystemColorScheme";
 import { Button } from "@/shared/ui/button";
 import { FlappingBee } from "@/shared/ui/buzz-logo/FlappingBee";
+import { StartupWindowDragRegion } from "@/shared/ui/StartupWindowDragRegion";
 
 /**
  * Acknowledge a community deep link received before machine onboarding is
@@ -9,15 +11,18 @@ import { FlappingBee } from "@/shared/ui/buzz-logo/FlappingBee";
  */
 export function PendingInviteGate() {
   const { transaction, update, clear } = useCommunityOnboarding();
+  const systemColorScheme = useSystemColorScheme();
 
   if (!transaction) return null;
 
   return (
     <div
-      className="buzz-onboarding-neutral-theme fixed inset-0 z-50 flex items-center justify-center bg-background px-4 py-8 text-foreground"
+      className="buzz-onboarding-neutral-theme buzz-startup-shell fixed inset-0 z-50 flex items-center justify-center bg-background px-4 py-8 text-foreground"
+      data-system-color-scheme={systemColorScheme}
       data-testid="pending-invite-gate"
     >
-      <div className="flex w-full max-w-[440px] flex-col items-center text-center">
+      <StartupWindowDragRegion />
+      <div className="relative flex w-full max-w-[500px] flex-col items-center text-center">
         <FlappingBee className="h-auto w-24" />
         <h1 className="mt-6 text-3xl font-semibold tracking-tight">
           Opening community link
@@ -25,7 +30,7 @@ export function PendingInviteGate() {
         <p className="mt-3 text-sm leading-6 text-muted-foreground">
           You’ll connect to {transaction.communityName} once setup is finished.
         </p>
-        <div className="mt-8 flex w-full flex-col gap-3">
+        <div className="mt-8 flex w-full max-w-[300px] flex-col gap-3">
           <Button
             className="h-10 w-full"
             data-testid="pending-invite-continue"