feat(audiobook): improve styling for character and chapter sections in ProjectCard component
This commit is contained in:
@@ -602,11 +602,11 @@ function ProjectCard({ project, onRefresh }: { project: AudiobookProject; onRefr
|
||||
)}
|
||||
|
||||
{expanded && (
|
||||
<div className="space-y-4 pt-2 border-t">
|
||||
<div className="space-y-3 pt-2 border-t">
|
||||
{detail && detail.characters.length > 0 && (
|
||||
<div>
|
||||
<div className="rounded-lg border border-blue-500/20 bg-blue-500/5 px-3 py-2">
|
||||
<button
|
||||
className="flex items-center gap-1 text-xs font-medium text-muted-foreground mb-2 hover:text-foreground transition-colors w-full text-left"
|
||||
className="flex items-center gap-1 text-xs font-medium text-blue-400/80 mb-2 hover:text-blue-300 transition-colors w-full text-left"
|
||||
onClick={() => setCharsCollapsed(v => !v)}
|
||||
>
|
||||
{charsCollapsed ? <ChevronDown className="h-3 w-3" /> : <ChevronUp className="h-3 w-3" />}
|
||||
@@ -677,10 +677,10 @@ function ProjectCard({ project, onRefresh }: { project: AudiobookProject; onRefr
|
||||
)}
|
||||
|
||||
{detail && detail.chapters.length > 0 && ['ready', 'generating', 'done'].includes(status) && (
|
||||
<div>
|
||||
<div className="rounded-lg border border-emerald-500/20 bg-emerald-500/5 px-3 py-2">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<button
|
||||
className="flex items-center gap-1 text-xs font-medium text-muted-foreground hover:text-foreground transition-colors text-left"
|
||||
className="flex items-center gap-1 text-xs font-medium text-emerald-400/80 hover:text-emerald-300 transition-colors text-left"
|
||||
onClick={() => setChaptersCollapsed(v => !v)}
|
||||
>
|
||||
{chaptersCollapsed ? <ChevronDown className="h-3 w-3" /> : <ChevronUp className="h-3 w-3" />}
|
||||
|
||||
Reference in New Issue
Block a user