Pin the review card description under the sections and tint the card from the uploaded logo.

Co-authored-by: Cursor <cursoragent@cursor.com>

tests/components/FinalReviewPreviewSurface.test.tsx

@@ -0,0 +1,48 @@
+import { useLayoutEffect } from "react";
+import { describe, expect, it, vi } from "vitest";
+import { waitFor } from "@testing-library/react";
+import { renderWithProviders as render, screen } from "../utils/test-utils";
+import "@testing-library/jest-dom/vitest";
+import { FinalReviewScreen } from "../../app/(app)/create/screens/review/FinalReviewScreen";
+import { useCreateFlow } from "../../app/(app)/create/context/CreateFlowContext";
+import { dominantColorFromImageUrl } from "../../lib/create/previewSurfaceColor";
+
+vi.mock("../../lib/create/previewSurfaceColor", async (importOriginal) => {
+  const actual =
+    await importOriginal<
+      typeof import("../../lib/create/previewSurfaceColor")
+    >();
+  return {
+    ...actual,
+    dominantColorFromImageUrl: vi.fn(async () => "rgb(12, 80, 40)"),
+  };
+});
+
+function FinalReviewWithAvatar() {
+  const { replaceState } = useCreateFlow();
+  useLayoutEffect(() => {
+    replaceState({
+      title: "Oak Park Commons",
+      communityContext: "Local mutual aid.",
+      communityAvatarUrl: "/api/uploads/avatar-1",
+    });
+  }, [replaceState]);
+  return <FinalReviewScreen />;
+}
+
+describe("Final review preview surface", () => {
+  it("fills the card from the uploaded logo’s most common color", async () => {
+    render(<FinalReviewWithAvatar />);
+
+    await waitFor(() => {
+      const card = screen.getByRole("button", { name: /Oak Park Commons/i });
+      expect(card).toHaveStyle({ backgroundColor: "rgb(12, 80, 40)" });
+    });
+    expect(vi.mocked(dominantColorFromImageUrl)).toHaveBeenCalledWith(
+      "/api/uploads/avatar-1",
+    );
+    expect(
+      screen.getByRole("img", { name: "Oak Park Commons" }),
+    ).toHaveAttribute("src", expect.stringContaining("avatar-1"));
+  });
+});