johannes.gasser/property-match
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: premium redesign — DM Serif, refined palette, flat score badges

Browse Source 
- Design tokens (ds.ts, theme.ts, scoreTheme.ts): new warm palette
  (#152642 navy, #f9f8f6 warm white, #e8e7e4 borders, #b8975a gold accent),
  flat score tier badges replacing CSS gradients, Inter + DM Serif Display typography
- Card components: white-background cards, DM Serif score numbers, max-2 badge
  chips with +N overflow tooltip, editorial score badge positioning
- Layout shell: gold left-accent nav active state, 64px top bar, outlined
  workspace chip, DM Serif page titles
- Shared atoms: GenericBadge (outlined/solid variants), ResultFilterBar
  (simplified chip styles), DecisionContextPanel (dot metrics, no left accent)
- Global replacement (118 files): #1e3a5f→#152642, #e2e8f0→#e8e7e4,
  #f4f6f9→#f9f8f6 — all handled via Node.js for proper UTF-8 safety

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Benjamin Sutter
2026-06-09 22:26:30 +02:00
parent 96a2507979
commit da50f3b5ea
132 changed files with 659 additions and 711 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/ops/DataCategoryBadgeList.tsx
+1 -1
View File
@@ -18,7 +18,7 @@ export function DataCategoryBadgeList({ categories, max }: DataCategoryBadgeList
label={cat}
sx={{
bgcolor: 'rgba(30,58,95,0.07)',
color: '#1e3a5f',
color: '#152642',
border: 'none',
fontSize: '0.68rem',
}}
src/components/ops/MarketSignalDetailPanel.tsx
+1 -1
View File
@@ -156,7 +156,7 @@ export function MarketSignalDetailPanel({ signal }: MarketSignalDetailPanelProps
label={entity.value}
sx={{
bgcolor: 'rgba(30,58,95,0.08)',
color: '#1e3a5f',
color: '#152642',
border: 'none',
fontSize: '0.75rem',
cursor: 'default',
src/components/ops/MarketSignalFilterBar.tsx
+2 -2
View File
@@ -48,10 +48,10 @@ export function MarketSignalFilterBar({ filters, onChange }: MarketSignalFilterB
sx={{
fontSize: '0.65rem',
height: 20,
bgcolor: active ? '#1e3a5f' : 'transparent',
bgcolor: active ? '#152642' : 'transparent',
color: active ? '#fff' : 'text.secondary',
border: '1px solid',
borderColor: active ? '#1e3a5f' : 'divider',
borderColor: active ? '#152642' : 'divider',
'&:hover': { bgcolor: active ? '#162d4a' : 'rgba(0,0,0,0.04)' },
}}
/>
src/components/ops/ReviewGatePanel.tsx
+1 -1
View File
@@ -50,7 +50,7 @@ export function ReviewGatePanel({ gate }: ReviewGatePanelProps) {
{reviewerNotes.length > 0 && (
<Box sx={{ mt: 1, p: 1, bgcolor: 'rgba(30,58,95,0.04)', borderRadius: 1, border: '1px solid rgba(30,58,95,0.1)' }}>
<Typography variant="caption" sx={{ fontWeight: 600, color: '#1e3a5f', display: 'block', mb: 0.5 }}>
<Typography variant="caption" sx={{ fontWeight: 600, color: '#152642', display: 'block', mb: 0.5 }}>
Reviewer-Informationen
</Typography>
{reviewerNotes.map((note, i) => (
src/components/ops/SignalConversionPanel.tsx
+1 -1
View File
@@ -50,7 +50,7 @@ export function SignalConversionPanel({ signal }: SignalConversionPanelProps) {
}}
>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 1 }}>
<ArrowRight size={16} color="#1e3a5f" />
<ArrowRight size={16} color="#152642" />
<Typography variant="subtitle2" sx={{ fontWeight: 600 }}>
In Future Availability überführen
</Typography>
src/components/ops/SignalInbox.tsx
+1 -1
View File
@@ -43,7 +43,7 @@ export function SignalInbox({
<Chip
label={isLoading ? '…' : signals.length}
size="small"
sx={{ bgcolor: '#1e3a5f', color: '#fff', fontSize: '0.7rem', height: 20 }}
sx={{ bgcolor: '#152642', color: '#fff', fontSize: '0.7rem', height: 20 }}
/>
</Box>
src/components/ops/SignalPipelineStepper.tsx
+4 -4
View File
@@ -16,14 +16,14 @@ export function SignalPipelineStepper({ pipelineState }: SignalPipelineStepperPr
sx={{
mb: 1,
'& .MuiStepIcon-root': { fontSize: '1.6rem', color: '#cbd5e1' },
'& .MuiStepIcon-root.Mui-active': { color: '#1e3a5f' },
'& .MuiStepIcon-root.Mui-active': { color: '#152642' },
'& .MuiStepIcon-root.Mui-completed': { color: '#15803d' },
'& .MuiStepLabel-label': { fontSize: '0.68rem', mt: 0.5, color: '#64748b' },
'& .MuiStepLabel-label.Mui-active': { color: '#1e3a5f', fontWeight: 700 },
'& .MuiStepLabel-label.Mui-active': { color: '#152642', fontWeight: 700 },
'& .MuiStepLabel-label.Mui-completed': { color: '#15803d' },
'& .MuiStepConnector-line': { borderTopWidth: 2, borderColor: '#e2e8f0' },
'& .MuiStepConnector-line': { borderTopWidth: 2, borderColor: '#e8e7e4' },
'& .MuiStepConnector-root.Mui-completed .MuiStepConnector-line': { borderColor: '#15803d' },
'& .MuiStepConnector-root.Mui-active .MuiStepConnector-line': { borderColor: '#1e3a5f' },
'& .MuiStepConnector-root.Mui-active .MuiStepConnector-line': { borderColor: '#152642' },
}}
>
{PIPELINE_STAGE_ORDER.map((stage) => (
src/components/ops/SignalPipelineView.tsx
+1 -1
View File
@@ -123,7 +123,7 @@ export function SignalPipelineView({ signal }: SignalPipelineViewProps) {
sx={{
textTransform: 'none',
fontSize: '0.8rem',
bgcolor: '#1e3a5f',
bgcolor: '#152642',
'&:hover': { bgcolor: '#162d4a' },
}}
>
src/components/ops/SignalToMatchAuditTrail.tsx
+1 -1
View File
@@ -10,7 +10,7 @@ function getStageColor(entry: AuditTrailEntry): string {
const idx = PIPELINE_STAGE_ORDER.indexOf(entry.stage)
if (idx <= 0) return '#94a3b8'
if (idx >= 5) return '#15803d'
if (idx >= 3) return '#1e3a5f'
if (idx >= 3) return '#152642'
if (idx >= 2) return '#4f46e5'
return '#2563eb'
}
src/components/ops/SourceCard.tsx
+1 -1
View File
@@ -67,7 +67,7 @@ export function SourceCard({ source, selected, onClick }: SourceCardProps) {
mt: 0.25,
}}
>
<Icon size={14} color="#1e3a5f" />
<Icon size={14} color="#152642" />
</Box>
<Box sx={{ flex: 1, minWidth: 0 }}>
<Typography
src/components/ops/SourceDetailPanel.tsx
+3 -3
View File
@@ -86,7 +86,7 @@ export function SourceDetailPanel({ source }: SourceDetailPanelProps) {
flexShrink: 0,
}}
>
<SourceIcon size={18} color="#1e3a5f" />
<SourceIcon size={18} color="#152642" />
</Box>
<Box sx={{ flex: 1 }}>
<Typography variant="h6" sx={{ fontWeight: 600, lineHeight: 1.3, mb: 0.25 }}>
@@ -166,7 +166,7 @@ export function SourceDetailPanel({ source }: SourceDetailPanelProps) {
key={a}
size="small"
label={a}
sx={{ bgcolor: 'rgba(30,58,95,0.06)', color: '#1e3a5f', border: 'none', fontSize: '0.72rem' }}
sx={{ bgcolor: 'rgba(30,58,95,0.06)', color: '#152642', border: 'none', fontSize: '0.72rem' }}
/>
))}
</Box>
@@ -194,7 +194,7 @@ export function SourceDetailPanel({ source }: SourceDetailPanelProps) {
startIcon={isRunning ? <CircularProgress size={12} sx={{ color: '#fff' }} /> : <Play size={14} />}
disabled={isRunning}
onClick={() => triggerRun(source.id)}
sx={{ bgcolor: '#1e3a5f', textTransform: 'none', fontSize: '0.8rem', '&:hover': { bgcolor: '#162d4a' } }}
sx={{ bgcolor: '#152642', textTransform: 'none', fontSize: '0.8rem', '&:hover': { bgcolor: '#162d4a' } }}
>
{isRunning ? 'Läuft...' : 'Demo-Run starten'}
</Button>
src/components/ops/SourceList.tsx
+1 -1
View File
@@ -40,7 +40,7 @@ export function SourceList({
<Chip
label={isLoading ? '…' : sources.length}
size="small"
sx={{ bgcolor: '#1e3a5f', color: '#fff', fontSize: '0.7rem', height: 20 }}
sx={{ bgcolor: '#152642', color: '#fff', fontSize: '0.7rem', height: 20 }}
/>
</Box>