refactor: replace hardcoded hex colors with design tokens across priority components
- Add DS_COLORS.heat, DS_COLORS.futureCard, INQUIRY_STATUS_META tokens to ds.ts - Eliminate 4 duplicate RESULT_TYPE_META / TYPE_META constants (now all use ds.ts) - Eliminate 3 duplicate scoreColor / SCORE_COLOR functions (now all use matchScoreHex) - HeatBadge: use DS_COLORS.heat.VERY_HOT / HOT tokens - FutureAvailabilityCard: use DS_COLORS.futureCard.controlled / signal tokens - IntelligenceMatchCard: import RESULT_TYPE_META from ds.ts, remove primary override - MatchScoreDisplay: replace local scoreColor() with matchScoreHex() - CompareColumnHeader: remove local TYPE_META + SCORE_COLOR, use ds.ts + utils.ts - CompareTableBody: import RESULT_TYPE_META + matchScoreHex, fix #7c3aed → token - compareUtils: remove TYPE_META + SCORE_COLOR, use dataQualityHex in scoreBar - Anfragen + AnfragenInquiryItem: deduplicate STATUS_CONFIG → INQUIRY_STATUS_META - Anfragen: #1e3a5f → 'primary.main', KI alert → futureCard.controlled tokens - AnfragenMessageBubble: own-message bubble → 'primary.main', AI bubble → tokens - ScoreBreakdownPanel: #1e3a5f → 'primary.main', #6d28d9 → futureCard.controlled - ESLint: add warn rule against new hex colors in component sx props Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Benjamin Sutter
@@ -12,16 +12,10 @@ import type { InquiryMessage } from '../../domain/inquiry'
|
||||
import { STAGE_ORDER, STAGE_LABELS, detectKiStage } from './anfragenKiDetection'
|
||||
import { AnfragenMessageBubble } from '../../components/demand/AnfragenMessageBubble'
|
||||
import { AnfragenInquiryItem } from '../../components/demand/AnfragenInquiryItem'
|
||||
import { INQUIRY_STATUS_META, DS_COLORS } from '../../lib/ds'
|
||||
|
||||
// ── Config ────────────────────────────────────────────────────────────────────
|
||||
|
||||
const STATUS_CONFIG: Record<string, { label: string; color: string; bgColor: string }> = {
|
||||
new: { label: 'Neu', color: '#dc2626', bgColor: '#fef2f2' },
|
||||
in_progress:{ label: 'Aktiv', color: '#d97706', bgColor: '#fffbeb' },
|
||||
answered: { label: 'Beantwortet', color: '#1a7a4a', bgColor: '#f0fdf4' },
|
||||
archived: { label: 'Archiviert', color: '#64748b', bgColor: '#f8fafc' },
|
||||
}
|
||||
|
||||
const FILTER_TABS = [
|
||||
{ key: 'all', label: 'Alle' },
|
||||
{ key: 'new', label: 'Neu' },
|
||||
@@ -147,7 +141,7 @@ export default function Anfragen() {
|
||||
<Typography variant="h6" sx={{ fontWeight: 700, fontSize: '1rem' }}>Anfragen</Typography>
|
||||
{totalUnread > 0 && (
|
||||
<Chip label={`${totalUnread} neu`} size="small"
|
||||
sx={{ bgcolor: '#dc2626', color: 'white', fontWeight: 700, height: 20, fontSize: '0.7rem' }} />
|
||||
sx={{ bgcolor: INQUIRY_STATUS_META.new.fg, color: 'white', fontWeight: 700, height: 20, fontSize: '0.7rem' }} />
|
||||
)}
|
||||
</Box>
|
||||
<TextField
|
||||
@@ -161,10 +155,10 @@ export default function Anfragen() {
|
||||
<Chip key={tab.key} label={tab.label} size="small" onClick={() => setStatusFilter(tab.key)}
|
||||
sx={{
|
||||
height: 22, fontSize: '0.7rem', cursor: 'pointer',
|
||||
bgcolor: statusFilter === tab.key ? '#1e3a5f' : '#f1f5f9',
|
||||
bgcolor: statusFilter === tab.key ? 'primary.main' : '#f1f5f9',
|
||||
color: statusFilter === tab.key ? 'white' : '#475569',
|
||||
fontWeight: statusFilter === tab.key ? 700 : 400,
|
||||
'&:hover': { bgcolor: statusFilter === tab.key ? '#1a3050' : '#e2e8f0' },
|
||||
'&:hover': { bgcolor: statusFilter === tab.key ? 'primary.dark' : '#e2e8f0' },
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
@@ -210,7 +204,7 @@ export default function Anfragen() {
|
||||
<IconButton size="small" sx={{ display: { md: 'none' }, mr: -0.5 }} onClick={() => setMobileShowChat(false)}>
|
||||
<ArrowLeft size={16} />
|
||||
</IconButton>
|
||||
<Avatar sx={{ width: 36, height: 36, bgcolor: '#1e3a5f', fontSize: '0.8rem', flexShrink: 0 }}>
|
||||
<Avatar sx={{ width: 36, height: 36, bgcolor: 'primary.main', fontSize: '0.8rem', flexShrink: 0 }}>
|
||||
{selected.tenantName.split(' ').map(n => n[0]).join('').toUpperCase().slice(0, 2)}
|
||||
</Avatar>
|
||||
<Box sx={{ flex: 1, minWidth: 0 }}>
|
||||
@@ -232,9 +226,9 @@ export default function Anfragen() {
|
||||
}} />
|
||||
)}
|
||||
<Chip
|
||||
label={STATUS_CONFIG[selected.status ?? 'new']?.label ?? selected.status}
|
||||
label={INQUIRY_STATUS_META[selected.status ?? 'new']?.label ?? selected.status}
|
||||
size="small"
|
||||
sx={{ bgcolor: STATUS_CONFIG[selected.status ?? 'new']?.bgColor, color: STATUS_CONFIG[selected.status ?? 'new']?.color, fontWeight: 600, height: 22, fontSize: '0.75rem' }}
|
||||
sx={{ bgcolor: INQUIRY_STATUS_META[selected.status ?? 'new']?.bg, color: INQUIRY_STATUS_META[selected.status ?? 'new']?.fg, fontWeight: 600, height: 22, fontSize: '0.75rem' }}
|
||||
/>
|
||||
{/* Pipeline link */}
|
||||
{linkedPipelineItem && (
|
||||
@@ -245,10 +239,11 @@ export default function Anfragen() {
|
||||
onClick={() => navigate('/demand/pipeline')}
|
||||
sx={{
|
||||
height: 22, fontSize: '0.75rem', cursor: 'pointer',
|
||||
bgcolor: '#eff6ff', color: '#1e3a5f', fontWeight: 600,
|
||||
border: '1px solid #bfdbfe',
|
||||
'& .MuiChip-icon': { color: '#1e3a5f' },
|
||||
'&:hover': { bgcolor: '#dbeafe' },
|
||||
bgcolor: DS_COLORS.futureCard.signal.headerBg, fontWeight: 600,
|
||||
color: 'primary.main',
|
||||
border: `1px solid ${DS_COLORS.futureCard.signal.border}`,
|
||||
'& .MuiChip-icon': { color: 'primary.main' },
|
||||
'&:hover': { bgcolor: DS_COLORS.futureCard.signal.badgeBg },
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
@@ -273,7 +268,7 @@ export default function Anfragen() {
|
||||
severity="info"
|
||||
icon={<Bot size={16} />}
|
||||
onClose={() => setKiAlert(null)}
|
||||
sx={{ py: 0.5, bgcolor: '#faf5ff', color: '#4c1d95', border: '1px solid #ddd6fe', '& .MuiAlert-icon': { color: '#7c3aed' } }}
|
||||
sx={{ py: 0.5, bgcolor: DS_COLORS.futureCard.controlled.headerBg, color: DS_COLORS.futureCard.controlled.badgeText, border: `1px solid ${DS_COLORS.futureCard.controlled.border}`, '& .MuiAlert-icon': { color: DS_COLORS.futureCard.controlled.accent } }}
|
||||
>
|
||||
<strong>KI erkannt:</strong> „{kiAlert.title}" wurde in der Pipeline auf <strong>{kiAlert.stage}</strong> verschoben.{' '}
|
||||
<Box component="span" sx={{ cursor: 'pointer', textDecoration: 'underline' }} onClick={() => navigate('/demand/pipeline')}>
|
||||
@@ -304,7 +299,7 @@ export default function Anfragen() {
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.5 }}>
|
||||
<IconButton size="small" sx={{ color: '#94a3b8' }}><Paperclip size={16} /></IconButton>
|
||||
<IconButton size="small" onClick={handleSend} disabled={!replyText.trim()}
|
||||
sx={{ bgcolor: '#1e3a5f', color: 'white', '&:hover': { bgcolor: '#1a3050' }, '&:disabled': { bgcolor: '#e2e8f0', color: '#94a3b8' } }}>
|
||||
sx={{ bgcolor: 'primary.main', color: 'white', '&:hover': { bgcolor: 'primary.dark' }, '&:disabled': { bgcolor: '#e2e8f0', color: '#94a3b8' } }}>
|
||||
<Send size={16} />
|
||||
</IconButton>
|
||||
</Box>
|
||||
|
||||
Reference in New Issue
Block a user