Skip to content

Commit f97d5f9

Browse files
hunterjamhunterjam
committed
Fix: display all brief fields in single consistent grey box
1 parent b318e95 commit f97d5f9

1 file changed

Lines changed: 23 additions & 195 deletions

File tree

‎content-gen/src/app/frontend/src/components/BriefReview.tsx‎

Lines changed: 23 additions & 195 deletions
Original file line numberDiff line numberDiff line change
@@ -12,15 +12,6 @@ interface BriefReviewProps {
1212
isAwaitingResponse?: boolean;
1313
}
1414

15-
const briefFields: { key: keyof CreativeBrief; label: string; prefix?: string }[] = [
16-
{ key: 'objectives', label: 'Objective', prefix: '• ' },
17-
{ key: 'target_audience', label: 'Audience', prefix: '• ' },
18-
{ key: 'key_message', label: 'Key Message', prefix: '• ' },
19-
{ key: 'tone_and_style', label: 'Tone & Style', prefix: '• ' },
20-
{ key: 'timelines', label: 'Timelines', prefix: '• ' },
21-
{ key: 'cta', label: 'Call to Action', prefix: '• ' },
22-
];
23-
2415
// Mapping of field keys to user-friendly labels for the 9 key areas
2516
const fieldLabels: Record<keyof CreativeBrief, string> = {
2617
overview: 'Overview',
@@ -47,6 +38,22 @@ export function BriefReview({
4738
const populatedFields = allFields.filter(key => brief[key]?.trim()).length;
4839
const missingFields = allFields.filter(key => !brief[key]?.trim());
4940

41+
// Define the order and labels for display in the card
42+
const displayOrder: { key: keyof CreativeBrief; label: string }[] = [
43+
{ key: 'overview', label: 'Campaign Objective' },
44+
{ key: 'objectives', label: 'Objectives' },
45+
{ key: 'target_audience', label: 'Target Audience' },
46+
{ key: 'key_message', label: 'Key Message' },
47+
{ key: 'tone_and_style', label: 'Tone & Style' },
48+
{ key: 'visual_guidelines', label: 'Visual Guidelines' },
49+
{ key: 'deliverable', label: 'Deliverables' },
50+
{ key: 'timelines', label: 'Timelines' },
51+
{ key: 'cta', label: 'Call to Action' },
52+
];
53+
54+
// Filter to only populated fields
55+
const populatedDisplayFields = displayOrder.filter(({ key }) => brief[key]?.trim());
56+
5057
return (
5158
<div className="message assistant" style={{
5259
width: '100%',
@@ -68,116 +75,17 @@ export function BriefReview({
6875
Thanks—here's my understanding:
6976
</Text>
7077

71-
{/* Brief Fields - Bullet point list like Figma */}
72-
<div style={{
73-
display: 'flex',
74-
flexDirection: 'column',
75-
gap: '8px',
76-
marginBottom: '16px',
77-
}}>
78-
{briefFields.map(({ key, label, prefix }) => {
79-
const value = brief[key];
80-
if (!value?.trim()) return null;
81-
82-
return (
83-
<div key={key} style={{
84-
display: 'flex',
85-
alignItems: 'flex-start',
86-
gap: '4px',
87-
}}>
88-
<Text size={200} style={{ color: tokens.colorNeutralForeground1 }}>
89-
{prefix}
90-
</Text>
91-
<div>
92-
<Text
93-
weight="semibold"
94-
size={200}
95-
style={{ color: tokens.colorNeutralForeground1 }}
96-
>
97-
{label}:
98-
</Text>
99-
{' '}
100-
<Text size={200} style={{ color: tokens.colorNeutralForeground2 }}>
101-
{value}
102-
</Text>
103-
</div>
104-
</div>
105-
);
106-
})}
107-
</div>
108-
109-
{/* Additional content fields in a bordered card - like Figma */}
110-
{(brief.overview || brief.key_message || brief.visual_guidelines || brief.timelines || brief.cta) && (
78+
{/* All Brief Fields in a single bordered card */}
79+
{populatedDisplayFields.length > 0 && (
11180
<div style={{
11281
padding: '16px',
11382
backgroundColor: tokens.colorNeutralBackground2,
11483
borderRadius: '8px',
11584
marginBottom: '16px',
11685
border: `1px solid ${tokens.colorNeutralStroke2}`,
11786
}}>
118-
{/* Campaign Objective section */}
119-
{brief.overview && (
120-
<div style={{ marginBottom: '12px' }}>
121-
<Text
122-
weight="semibold"
123-
size={300}
124-
style={{
125-
color: tokens.colorNeutralForeground1,
126-
display: 'block',
127-
marginBottom: '4px',
128-
}}
129-
>
130-
Campaign Objective
131-
</Text>
132-
<Text size={200} style={{ color: tokens.colorNeutralForeground2, lineHeight: '1.5' }}>
133-
{brief.overview}
134-
</Text>
135-
</div>
136-
)}
137-
138-
{/* Audience section */}
139-
{brief.target_audience && (
140-
<div style={{ marginBottom: '12px' }}>
141-
<Text
142-
weight="semibold"
143-
size={300}
144-
style={{
145-
color: tokens.colorNeutralForeground1,
146-
display: 'block',
147-
marginBottom: '4px',
148-
}}
149-
>
150-
Audience
151-
</Text>
152-
<Text size={200} style={{ color: tokens.colorNeutralForeground2, lineHeight: '1.5' }}>
153-
{brief.target_audience}
154-
</Text>
155-
</div>
156-
)}
157-
158-
{/* Key Message section */}
159-
{brief.key_message && (
160-
<div style={{ marginBottom: '12px' }}>
161-
<Text
162-
weight="semibold"
163-
size={300}
164-
style={{
165-
color: tokens.colorNeutralForeground1,
166-
display: 'block',
167-
marginBottom: '4px',
168-
}}
169-
>
170-
Key Message
171-
</Text>
172-
<Text size={200} style={{ color: tokens.colorNeutralForeground2, lineHeight: '1.5' }}>
173-
{brief.key_message}
174-
</Text>
175-
</div>
176-
)}
177-
178-
{/* Visual guidelines / Creation instructions */}
179-
{brief.visual_guidelines && (
180-
<div style={{ marginBottom: '12px' }}>
87+
{populatedDisplayFields.map(({ key, label }, index) => (
88+
<div key={key} style={{ marginBottom: index < populatedDisplayFields.length - 1 ? '12px' : '0' }}>
18189
<Text
18290
weight="semibold"
18391
size={300}
@@ -187,93 +95,13 @@ export function BriefReview({
18795
marginBottom: '4px',
18896
}}
18997
>
190-
Visual Guidelines
98+
{label}
19199
</Text>
192100
<Text size={200} style={{ color: tokens.colorNeutralForeground2, lineHeight: '1.5' }}>
193-
{brief.visual_guidelines}
101+
{brief[key]}
194102
</Text>
195103
</div>
196-
)}
197-
198-
{/* Tone & Style section */}
199-
{brief.tone_and_style && (
200-
<div style={{ marginBottom: '12px' }}>
201-
<Text
202-
weight="semibold"
203-
size={300}
204-
style={{
205-
color: tokens.colorNeutralForeground1,
206-
display: 'block',
207-
marginBottom: '4px',
208-
}}
209-
>
210-
Tone & Style:
211-
</Text>
212-
<Text size={200} style={{ color: tokens.colorNeutralForeground2, lineHeight: '1.5' }}>
213-
{brief.tone_and_style}
214-
</Text>
215-
</div>
216-
)}
217-
218-
{/* Deliverables section */}
219-
{brief.deliverable && (
220-
<div style={{ marginBottom: brief.timelines || brief.cta ? '12px' : '0' }}>
221-
<Text
222-
weight="semibold"
223-
size={300}
224-
style={{
225-
color: tokens.colorNeutralForeground1,
226-
display: 'block',
227-
marginBottom: '4px',
228-
}}
229-
>
230-
Deliverables
231-
</Text>
232-
<Text size={200} style={{ color: tokens.colorNeutralForeground2, lineHeight: '1.5' }}>
233-
{brief.deliverable}
234-
</Text>
235-
</div>
236-
)}
237-
238-
{/* Timelines section */}
239-
{brief.timelines && (
240-
<div style={{ marginBottom: brief.cta ? '12px' : '0' }}>
241-
<Text
242-
weight="semibold"
243-
size={300}
244-
style={{
245-
color: tokens.colorNeutralForeground1,
246-
display: 'block',
247-
marginBottom: '4px',
248-
}}
249-
>
250-
Timelines
251-
</Text>
252-
<Text size={200} style={{ color: tokens.colorNeutralForeground2, lineHeight: '1.5' }}>
253-
{brief.timelines}
254-
</Text>
255-
</div>
256-
)}
257-
258-
{/* Call to Action section */}
259-
{brief.cta && (
260-
<div>
261-
<Text
262-
weight="semibold"
263-
size={300}
264-
style={{
265-
color: tokens.colorNeutralForeground1,
266-
display: 'block',
267-
marginBottom: '4px',
268-
}}
269-
>
270-
Call to Action
271-
</Text>
272-
<Text size={200} style={{ color: tokens.colorNeutralForeground2, lineHeight: '1.5' }}>
273-
{brief.cta}
274-
</Text>
275-
</div>
276-
)}
104+
))}
277105
</div>
278106
)}
279107

0 commit comments

Comments
 (0)