Aimpress/cohorta
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(ui): replace hardcoded colors in persona components with semantic tokens

Browse source 
PersonaPersonality: bg-blue-500/green-500/red-500 → primary/brand-success/destructive
PersonaEditor: bg-gray-200/text-gray-600 → bg-primary/20/text-primary
PersonaGenerationPrompts: text-slate-500/400 → text-muted-foreground
PersonaSidebar: bg-green-500/80 → bg-brand-success/80
PersonaProfile: bg-green-600 → bg-brand-success

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Vadym Samoilenko 2026-05-26 17:29:23 +01:00
parent 92657a1c0c
commit dd816783e7
5 changed files with 9 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/components/persona/PersonaEditor.tsx
View file

@ -340,10 +340,8 @@ export default function PersonaEditor({ persona, onSave, onCancel }: PersonaEdit
<Card>
<CardContent className="p-6">
<div className="flex items-center space-x-4 mb-6">
<div className="h-16 w-16 rounded-full bg-muted flex items-center justify-center">
<div className="h-16 w-16 rounded-full bg-gray-200 flex items-center justify-center">
<span className="font-medium text-gray-600">{editedPersona.name?.charAt(0) || 'P'}</span>
</div>
<div className="h-16 w-16 rounded-full bg-primary/20 flex items-center justify-center">
<span className="font-medium text-primary text-xl">{editedPersona.name?.charAt(0) || 'P'}</span>
</div>
<div className="space-y-2">
<div>

4
src/components/persona/PersonaGenerationPrompts.tsx
View file

@ -13,8 +13,8 @@ export function PersonaGenerationPrompts({ persona }: PersonaGenerationPromptsPr
if (!hasPrompts) {
return (
<div className="flex items-center justify-center h-64">
<div className="text-center text-slate-500">
<FileText className="h-12 w-12 mx-auto mb-4 text-slate-400" />
<div className="text-center text-muted-foreground">
<FileText className="h-12 w-12 mx-auto mb-4 text-muted-foreground/60" />
<h3 className="font-sf text-lg font-medium mb-2">Generation prompts not available</h3>
<p className="text-sm">Generation prompts are not available for this persona.</p>
</div>

6
src/components/persona/PersonaPersonality.tsx
View file

@ -64,7 +64,7 @@ export function PersonaPersonality({ persona }: PersonaPersonalityProps) {
<span className="font-medium">{oceanData[1].value}%</span>
</div>
<div className="h-2 bg-secondary rounded-full overflow-hidden">
<div className="h-full bg-blue-500 rounded-full" style={{ width: `${oceanData[1].value}%` }}></div>
<div className="h-full bg-primary rounded-full" style={{ width: `${oceanData[1].value}%` }}></div>
</div>
<p className="text-xs text-muted-foreground mt-1">
{oceanData[1].value > 75 ? 'Highly organized and responsible' :
@ -79,7 +79,7 @@ export function PersonaPersonality({ persona }: PersonaPersonalityProps) {
<span className="font-medium">{oceanData[2].value}%</span>
</div>
<div className="h-2 bg-secondary rounded-full overflow-hidden">
<div className="h-full bg-green-500 rounded-full" style={{ width: `${oceanData[2].value}%` }}></div>
<div className="h-full bg-brand-success rounded-full" style={{ width: `${oceanData[2].value}%` }}></div>
</div>
<p className="text-xs text-muted-foreground mt-1">
{oceanData[2].value > 75 ? 'Highly sociable and outgoing' :
@ -109,7 +109,7 @@ export function PersonaPersonality({ persona }: PersonaPersonalityProps) {
<span className="font-medium">{oceanData[4].value}%</span>
</div>
<div className="h-2 bg-secondary rounded-full overflow-hidden">
<div className="h-full bg-red-500 rounded-full" style={{ width: `${oceanData[4].value}%` }}></div>
<div className="h-full bg-destructive rounded-full" style={{ width: `${oceanData[4].value}%` }}></div>
</div>
<p className="text-xs text-muted-foreground mt-1">
{oceanData[4].value > 75 ? 'Highly sensitive and prone to stress' :

2
src/components/persona/PersonaProfile.tsx
View file

@ -307,7 +307,7 @@ export default function PersonaProfile() {
<Button
size="sm"
onClick={saveReviewedPersona}
className="bg-green-600 hover:bg-green-700 text-white"
className="bg-brand-success hover:bg-brand-success/90 text-white"
>
Save Revised Persona
</Button>

2
src/components/persona/PersonaSidebar.tsx
View file

@ -38,7 +38,7 @@ export function PersonaSidebar({ persona }: PersonaSidebarProps) {
className="w-full h-full object-cover"
/>
</div>
<div className="absolute -bottom-1 -right-1 w-4 h-4 rounded-full bg-green-500/80 border-2 border-card" />
<div className="absolute -bottom-1 -right-1 w-4 h-4 rounded-full bg-brand-success/80 border-2 border-card" />
</div>
<div className="min-w-0">
<h2