Promotions : le logo revient à gauche du nom de l'adhérent

L'angle de la carte est rendu à la catégorie ; la pastille du commerce se
place devant son nom, en pied de carte, là où on lit déjà qui propose l'offre.
La période de validité passe sous le nom, dans le même bloc.

Appliqué à la carte d'accueil, à l'aperçu en direct de l'espace adhérent et à
la carte de modération. Retiré de la carte de la fiche adhérent : elle n'y
affiche pas de nom de commerce, et le logo figure déjà en tête de page.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01QXNXRC4j5VLfKvpyyisrnb
This commit is contained in:
Claude committed 2026-09-06 14:22:03 +00:00
1 parent d99ee7ec07
commit cf8cf5c8e2
4 files changed
+42 -48

No files matched your search

-6
View File
@@ -6,7 +6,6 @@ import { SiteHeader } from "@/components/SiteHeader";
import { SiteFooter } from "@/components/SiteFooter";
import { VitrineImage } from "@/components/VitrineImage";
import { PromoImage } from "@/components/PromoImage";
import { MemberAvatar } from "@/components/MemberAvatar";
import { JsonLd } from "@/components/JsonLd";
import { getMemberLivePromotions, getPublicMember } from "@/lib/queries";
import {
@@ -432,11 +431,6 @@ export default async function FicheAdherentPage({
<div style={{ position: "relative", aspectRatio: "1 / 1", background: STRIPE_WARM, overflow: "hidden", display: "flex", alignItems: "center", justifyContent: "center" }}>
{p.imageUrl && <PromoImage src={p.imageUrl} alt={p.title} />}
{!p.imageUrl && (<span style={{ fontSize: 10, letterSpacing: "0.12em", color: "#a99c82", textTransform: "uppercase" }}>photo de l&apos;offre</span>)}
{/* Même repère que sur l'accueil : le logo du commerce
dans l'angle haut-gauche de la carte. */}
<span style={{ position: "absolute", top: 10, left: 10 }}>
<MemberAvatar name={member.name} logoUrl={member.logoUrl} size={32} accent={accent} />
</span>
{p.badge && (
<span className="font-display" style={{ position: "absolute", top: 0, right: 0, background: badgeColor(p.badge), color: "#fff", fontWeight: 800, fontSize: 16, padding: "6px 13px", borderRadius: "0 0 0 14px" }}>{p.badge}</span>
)}
+7 -8
View File
@@ -357,13 +357,9 @@ export function MemberSpaceForm({
{badge}
</span>
)}
{/* Même composition que sur le site : logo puis catégorie. */}
<div style={{ position: "absolute", top: 12, left: 12, display: "flex", alignItems: "center", gap: 8 }}>
<MemberAvatar name={memberName} logoUrl={memberLogoUrl} size={34} />
<span style={{ background: "#9a6638", color: "#fff", borderRadius: 999, padding: "5px 12px", fontSize: 11, fontWeight: 700 }}>
{cat}
</span>
</div>
<span style={{ position: "absolute", top: 12, left: 12, background: "#9a6638", color: "#fff", borderRadius: 999, padding: "5px 12px", fontSize: 11, fontWeight: 700 }}>
{cat}
</span>
</div>
<div style={{ padding: "17px 18px 18px" }}>
<h3 className="font-display" style={{ fontWeight: 700, fontSize: 18, margin: "0 0 5px", color: "#26201a" }}>
@@ -377,7 +373,10 @@ export function MemberSpaceForm({
<div style={{ fontSize: 12, color: "#a99c82", marginBottom: 12 }}>{validity}</div>
)}
<div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", borderTop: "1px solid #f0e8d6", paddingTop: 12 }}>
<div style={{ fontSize: 13, fontWeight: 700, color: "#3c3322" }}>{memberName}</div>
<div style={{ display: "flex", alignItems: "center", gap: 9, minWidth: 0 }}>
<MemberAvatar name={memberName} logoUrl={memberLogoUrl} size={28} />
<span style={{ fontSize: 13, fontWeight: 700, color: "#3c3322" }}>{memberName}</span>
</div>
<span style={{ color: "#2C6FB3", fontWeight: 700, fontSize: 13 }}>Voir l&apos;offre →</span>
</div>
</div>
+8 -11
View File
@@ -159,15 +159,11 @@ export default async function PromotionsPage() {
}}
>
{p.imageUrl && <PromoImage src={p.imageUrl} alt={p.title ?? ""} />}
{/* Comme sur le site : logo de l'adhérent puis catégorie. */}
<div style={{ position: "absolute", top: 10, left: 10, display: "flex", alignItems: "center", gap: 7 }}>
<MemberAvatar name={p.memberName ?? ""} logoUrl={p.memberLogoUrl} size={30} />
{p.category && (
<span style={{ background: "#9a6638", color: "#fff", borderRadius: 999, padding: "4px 11px", fontSize: 11, fontWeight: 700 }}>
{p.category}
</span>
)}
</div>
{p.category && (
<span style={{ position: "absolute", top: 10, left: 10, background: "#9a6638", color: "#fff", borderRadius: 999, padding: "4px 11px", fontSize: 11, fontWeight: 700 }}>
{p.category}
</span>
)}
<span
style={{
position: "absolute",
@@ -188,8 +184,9 @@ export default async function PromotionsPage() {
<h3 className="font-display" style={{ fontWeight: 700, fontSize: 15.5, margin: "0 0 4px", color: "#26201a" }}>
{p.title}
</h3>
<div style={{ fontSize: 12.5, color: "#9a6638", fontWeight: 600, marginBottom: 8 }}>
{p.memberName}
<div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 8 }}>
<MemberAvatar name={p.memberName ?? ""} logoUrl={p.memberLogoUrl} size={24} />
<span style={{ fontSize: 12.5, color: "#9a6638", fontWeight: 600 }}>{p.memberName}</span>
</div>
<p style={{ margin: "0 0 12px", fontSize: 12.5, color: "#8c8068", lineHeight: 1.45, flex: 1 }}>
{p.text}
+27 -23
View File
@@ -285,25 +285,23 @@ export default async function AccueilPage() {
{p.badge}
</span>
)}
{/* Angle haut-gauche : le logo de l'adhérent d'abord, la
catégorie ensuite — on identifie le commerce avant l'offre. */}
<div style={{ position: "absolute", top: 12, left: 12, display: "flex", alignItems: "center", gap: 8 }}>
<MemberAvatar name={p.memberName ?? ""} logoUrl={p.memberLogoUrl} size={34} />
{p.category && (
<span
style={{
background: "#9a6638",
color: "#fff",
borderRadius: 999,
padding: "5px 12px",
fontSize: 11,
fontWeight: 700,
}}
>
{p.category}
</span>
)}
</div>
{p.category && (
<span
style={{
position: "absolute",
top: 12,
left: 12,
background: "#9a6638",
color: "#fff",
borderRadius: 999,
padding: "5px 12px",
fontSize: 11,
fontWeight: 700,
}}
>
{p.category}
</span>
)}
</div>
<div style={{ padding: "17px 18px 18px", display: "flex", flexDirection: "column", flex: 1 }}>
<h3 className="font-display" style={{ fontWeight: 700, fontSize: 18, margin: "0 0 5px", color: "#26201a" }}>
@@ -318,10 +316,16 @@ export default async function AccueilPage() {
paddingTop: 12,
}}
>
<div style={{ fontSize: 13, fontWeight: 700, color: "#3c3322" }}>{p.memberName}</div>
{formatValidity(p) && (
<div style={{ fontSize: 11.5, color: "#a99c82" }}>{formatValidity(p)}</div>
)}
{/* Le logo du commerce juste à gauche de son nom. */}
<div style={{ display: "flex", alignItems: "center", gap: 9 }}>
<MemberAvatar name={p.memberName ?? ""} logoUrl={p.memberLogoUrl} size={28} />
<div style={{ minWidth: 0 }}>
<div style={{ fontSize: 13, fontWeight: 700, color: "#3c3322" }}>{p.memberName}</div>
{formatValidity(p) && (
<div style={{ fontSize: 11.5, color: "#a99c82" }}>{formatValidity(p)}</div>
)}
</div>
</div>
</div>
</div>
</Link>