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/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}