Restyle the campaign story field to match the org bio step
Swap the FormSection-wrapped mono textarea on "Tell your story" for the borderless, auto-growing muted textarea used by the organization bio step, so the two long-form surfaces look the same.
This commit is contained in:
@@ -867,16 +867,31 @@ export function CreateCampaignPage() {
|
||||
);
|
||||
|
||||
const storySection = (
|
||||
<FormSection title={t('campaignsCreate.story')} requirement="Recommended">
|
||||
<Textarea
|
||||
id="campaign-story"
|
||||
value={story}
|
||||
onChange={(e) => setStory(e.target.value)}
|
||||
placeholder={t('campaignsCreate.storyPlaceholder')}
|
||||
rows={7}
|
||||
className="font-mono text-base md:text-sm"
|
||||
/>
|
||||
</FormSection>
|
||||
<Textarea
|
||||
id="campaign-story"
|
||||
value={story}
|
||||
onChange={(e) => {
|
||||
setStory(e.target.value);
|
||||
// Auto-grow: reset then size to content so the box expands
|
||||
// downward as the user types instead of scrolling internally.
|
||||
e.target.style.height = 'auto';
|
||||
e.target.style.height = `${e.target.scrollHeight}px`;
|
||||
}}
|
||||
onFocus={(e) => {
|
||||
e.target.style.height = 'auto';
|
||||
e.target.style.height = `${e.target.scrollHeight}px`;
|
||||
}}
|
||||
placeholder={t('campaignsCreate.storyPlaceholder')}
|
||||
className={cn(
|
||||
'min-h-[200px] w-full resize-none overflow-hidden p-3',
|
||||
'text-lg leading-7 md:text-lg',
|
||||
// Match the muted, borderless look of the organization bio step.
|
||||
'rounded-lg border-2 border-transparent bg-muted/40',
|
||||
'hover:bg-muted/60 hover:border-border',
|
||||
'focus-visible:bg-transparent focus-visible:border-primary focus-visible:ring-0 focus-visible:ring-offset-0',
|
||||
'placeholder:text-muted-foreground/40 transition-colors duration-150',
|
||||
)}
|
||||
/>
|
||||
);
|
||||
|
||||
const goalSection = (
|
||||
|
||||
Reference in New Issue
Block a user