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

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

app/(app)/create/hooks/usePreviewSurfaceColor.ts

@@ -0,0 +1,41 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import {
+  dominantColorFromImageUrl,
+  randomPreviewSurfaceColor,
+} from "../../../../lib/create/previewSurfaceColor";
+
+/**
+ * Fill for the review preview card. An uploaded logo contributes its most
+ * common color; no image uses a random light color. Unset until mount so the
+ * server and client share the fallback class.
+ *
+ * @param imageUrl Uploaded logo URL, or `null` when the user skipped the photo.
+ * @returns A CSS color, or `undefined` before the client picks one.
+ */
+export function usePreviewSurfaceColor(
+  imageUrl: string | null,
+): string | undefined {
+  const [color, setColor] = useState<string | undefined>(undefined);
+
+  useEffect(() => {
+    if (!imageUrl) {
+      // eslint-disable-next-line react-hooks/set-state-in-effect -- random fill is client-only; first paint stays on the fallback class
+      setColor(randomPreviewSurfaceColor());
+      return;
+    }
+
+    let cancelled = false;
+    void dominantColorFromImageUrl(imageUrl).then((next) => {
+      if (cancelled) return;
+      setColor(next ?? randomPreviewSurfaceColor());
+    });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [imageUrl]);
+
+  return color;
+}

app/(app)/create/screens/review/FinalReviewScreen.tsx

@@ -26,6 +26,7 @@ import {
 } from "../../components/FinalReviewChipEditModal";
 import { FinalReviewCommunityContextEditModal } from "../../components/FinalReviewCommunityContextEditModal";
 import { FinalReviewTitleEditModal } from "../../components/FinalReviewTitleEditModal";
+import { usePreviewSurfaceColor } from "../../hooks/usePreviewSurfaceColor";
 import { useCreateFlowNavigation } from "../../hooks/useCreateFlowNavigation";
 import { createFlowStepForFacetGroup } from "../../utils/facetGroupToCreateFlowStep";
 import {
@@ -234,6 +235,13 @@ export function FinalReviewScreen({
   const descriptionEmptyHint =
     variant === "editPublished" ? t("communityContextEditModal.emptyHint") : undefined;
 
+  const avatarUrl =
+    typeof state.communityAvatarUrl === "string" &&
+    state.communityAvatarUrl.trim().length > 0
+      ? state.communityAvatarUrl.trim()
+      : null;
+  const surfaceColor = usePreviewSurfaceColor(avatarUrl);
+
   return (
     <CreateFlowLockupCardStepShell
       lockupTitle={
@@ -271,8 +279,10 @@ export function FinalReviewScreen({
         }
         size={mdUp ? "L" : "M"}
         expanded={true}
+        descriptionAtBottom
         backgroundColor="bg-[var(--color-surface-invert-brand-teal)]"
-        logoUrl={getAssetPath(vectorMarkPath("mutual-aid"))}
+        surfaceColor={surfaceColor}
+        logoUrl={avatarUrl ?? getAssetPath(vectorMarkPath("mutual-aid"))}
         logoAlt={ruleCardTitle}
         categories={finalReviewCategories}
         className={CREATE_FLOW_REVIEW_RULE_LAYOUT_CLASS}