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

- 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>
2026-06-09 22:26:30 +02:00
parent 96a2507979
commit da50f3b5ea
132 changed files with 659 additions and 711 deletions
@@ -93,18 +93,18 @@ export function ActiveInquiriesTab() {
            <Typography variant="body2" sx={{ fontWeight: 600, color: '#0f172a' }}>
              Anfragen
            </Typography>
-            <Box sx={{ px: 1, py: 0.125, borderRadius: 1, bgcolor: '#1e3a5f', color: 'white', fontWeight: 600, fontSize: '0.7rem' }}>
+            <Box sx={{ px: 1, py: 0.125, borderRadius: 1, bgcolor: '#152642', color: 'white', fontWeight: 600, fontSize: '0.7rem' }}>
              {inquiries.length}
            </Box>
          </Box>
          <Box sx={{ display: 'flex', gap: 0.5 }}>
            <Tooltip title="Listenansicht">
-              <IconButton size="small" onClick={() => setView('list')} sx={{ bgcolor: view === 'list' ? '#e0e7ff' : 'transparent', color: view === 'list' ? '#1e3a5f' : '#64748b' }}>
+              <IconButton size="small" onClick={() => setView('list')} sx={{ bgcolor: view === 'list' ? '#e0e7ff' : 'transparent', color: view === 'list' ? '#152642' : '#64748b' }}>
                <ListIcon size={16} />
              </IconButton>
            </Tooltip>
            <Tooltip title="Kartenansicht">
-              <IconButton size="small" onClick={() => setView('grid')} sx={{ bgcolor: view === 'grid' ? '#e0e7ff' : 'transparent', color: view === 'grid' ? '#1e3a5f' : '#64748b' }}>
+              <IconButton size="small" onClick={() => setView('grid')} sx={{ bgcolor: view === 'grid' ? '#e0e7ff' : 'transparent', color: view === 'grid' ? '#152642' : '#64748b' }}>
                <LayoutGrid size={16} />
              </IconButton>
            </Tooltip>
@@ -20,12 +20,12 @@ export function InquiryCard({ inquiry, selected, onClick }: InquiryCardProps) {
        p: 2,
        borderRadius: 1.5,
        border: '1px solid',
-        borderColor: selected ? '#1e3a5f' : '#e2e8f0',
+        borderColor: selected ? '#152642' : '#e8e7e4',
        bgcolor: selected ? '#f1f5f9' : 'white',
        cursor: 'pointer',
        transition: 'all 0.15s',
        '&:hover': {
-          borderColor: selected ? '#1e3a5f' : '#94a3b8',
+          borderColor: selected ? '#152642' : '#94a3b8',
          boxShadow: '0 2px 6px rgba(15,23,42,0.06)',
        },
        display: 'flex',
@@ -42,7 +42,7 @@ export function InquiryChat({
                    fontSize: '0.75rem',
                    borderColor: '#cbd5e1',
                    color: '#475569',
-                    '&:hover': { borderColor: '#1e3a5f', color: '#1e3a5f', bgcolor: '#f0f4f8' },
+                    '&:hover': { borderColor: '#152642', color: '#152642', bgcolor: '#f0f4f8' },
                  }}
                >
                  Angebot erstellen
@@ -85,7 +85,7 @@ export function InquiryDetailPanel({ inquiryId }: InquiryDetailPanelProps) {
              variant="outlined"
              startIcon={<ClipboardList size={14} />}
              onClick={() => setPreparationOpen(true)}
-              sx={{ textTransform: 'none', whiteSpace: 'nowrap', borderColor: '#1e3a5f', color: '#1e3a5f', '&:hover': { bgcolor: '#f0f4f8' } }}
+              sx={{ textTransform: 'none', whiteSpace: 'nowrap', borderColor: '#152642', color: '#152642', '&:hover': { bgcolor: '#f0f4f8' } }}
            >
              Vorbereitung starten
            </Button>
@@ -20,7 +20,7 @@ export function InquiryListRow({ inquiry, selected, onClick }: InquiryListRowPro
        py: 1.5,
        borderBottom: '1px solid #e2e8f0',
        borderLeft: '3px solid',
-        borderLeftColor: selected ? '#1e3a5f' : hasUnread ? '#2563eb' : 'transparent',
+        borderLeftColor: selected ? '#152642' : hasUnread ? '#2563eb' : 'transparent',
        bgcolor: selected ? '#f1f5f9' : 'white',
        cursor: 'pointer',
        transition: 'background-color 0.15s, border-color 0.15s',
@@ -38,7 +38,7 @@ export function InquiryMessageBubble({ message }: InquiryMessageBubbleProps) {
      <Box
        sx={{
          maxWidth: '75%',
-          bgcolor: isTenant ? '#f1f5f9' : '#1e3a5f',
+          bgcolor: isTenant ? '#f1f5f9' : '#152642',
          color: isTenant ? '#0f172a' : 'white',
          px: 1.75,
          py: 1.25,
@@ -166,7 +166,7 @@ export function InquiryReplyComposer({
          }
          onClick={handleSend}
          disabled={sending || !body.trim()}
-          sx={{ textTransform: 'none', bgcolor: '#1e3a5f', '&:hover': { bgcolor: '#16304d' } }}
+          sx={{ textTransform: 'none', bgcolor: '#152642', '&:hover': { bgcolor: '#16304d' } }}
        >
          Antwort senden
        </Button>
@@ -47,7 +47,7 @@ export function LatentInquiriesTab() {
            <Box sx={{ px: 2, py: 1.5, borderTop: '1px solid #e2e8f0', flexShrink: 0 }}>
              <Box
                onClick={() => setMobileView('properties')}
-                sx={{ p: 1.25, bgcolor: '#1e3a5f', color: 'white', borderRadius: 1, textAlign: 'center', cursor: 'pointer', fontSize: '0.85rem', fontWeight: 600 }}
+                sx={{ p: 1.25, bgcolor: '#152642', color: 'white', borderRadius: 1, textAlign: 'center', cursor: 'pointer', fontSize: '0.85rem', fontWeight: 600 }}
              >
                Eigene Objekte anzeigen →
              </Box>
@@ -164,11 +164,11 @@ export function MockPdfPreview({ fields, fallbackFields, fieldSelections }: Mock
      {hasPropertyPage && (
        <>
          <Box sx={{ my: 3, display: 'flex', alignItems: 'center', gap: 1.5 }}>
-            <Divider sx={{ flex: 1, borderColor: '#1e3a5f', borderWidth: 1 }} />
+            <Divider sx={{ flex: 1, borderColor: '#152642', borderWidth: 1 }} />
            <Typography variant="caption" sx={{ color: '#94a3b8', fontSize: '0.68rem', whiteSpace: 'nowrap', letterSpacing: 0.5, textTransform: 'uppercase' }}>
              Seite 2 — Objektdetails
            </Typography>
-            <Divider sx={{ flex: 1, borderColor: '#1e3a5f', borderWidth: 1 }} />
+            <Divider sx={{ flex: 1, borderColor: '#152642', borderWidth: 1 }} />
          </Box>

          <Box
@@ -116,7 +116,7 @@ export function OfferChatComposer() {
                      py: 0.75,
                    }}
                  >
-                    <FileText size={14} color="#1e3a5f" />
+                    <FileText size={14} color="#152642" />
                    <Typography variant="caption" sx={{ fontSize: '0.8rem', fontWeight: 500 }}>
                      {a.fileName}
                    </Typography>
@@ -35,7 +35,7 @@ export function OfferCreationPanel({ selectedCount, needId, needTitle }: OfferCr
        onClick={() => open(needId, needTitle)}
        sx={{
          textTransform: 'none',
-          bgcolor: '#1e3a5f',
+          bgcolor: '#152642',
          fontWeight: 600,
          '&:hover': { bgcolor: '#16304d' },
        }}
@@ -255,7 +255,7 @@ export function OfferCreationWizard({ inquiryId, propertyId, tenantName, onClose
              variant="contained"
              disabled={loading}
              onClick={() => setStep(1)}
-              sx={{ textTransform: 'none', bgcolor: '#1e3a5f', '&:hover': { bgcolor: '#16304d' } }}
+              sx={{ textTransform: 'none', bgcolor: '#152642', '&:hover': { bgcolor: '#16304d' } }}
            >
              Weiter
            </Button>
@@ -264,7 +264,7 @@ export function OfferCreationWizard({ inquiryId, propertyId, tenantName, onClose
            <Button
              variant="contained"
              onClick={() => setStep(2)}
-              sx={{ textTransform: 'none', bgcolor: '#1e3a5f', '&:hover': { bgcolor: '#16304d' } }}
+              sx={{ textTransform: 'none', bgcolor: '#152642', '&:hover': { bgcolor: '#16304d' } }}
            >
              Weiter
            </Button>
@@ -273,7 +273,7 @@ export function OfferCreationWizard({ inquiryId, propertyId, tenantName, onClose
            <Button
              variant="contained"
              onClick={handleGeneratePdf}
-              sx={{ textTransform: 'none', bgcolor: '#1e3a5f', '&:hover': { bgcolor: '#16304d' } }}
+              sx={{ textTransform: 'none', bgcolor: '#152642', '&:hover': { bgcolor: '#16304d' } }}
            >
              PDF erstellen
            </Button>
@@ -77,7 +77,7 @@ export function OfferFieldSelectionStep() {
        <Button
          variant="contained"
          onClick={() => setStep('pdf_review')}
-          sx={{ textTransform: 'none', bgcolor: '#1e3a5f', '&:hover': { bgcolor: '#16304d' } }}
+          sx={{ textTransform: 'none', bgcolor: '#152642', '&:hover': { bgcolor: '#16304d' } }}
        >
          Weiter
        </Button>
@@ -179,7 +179,7 @@ export function OfferPdfReviewStep() {
          endIcon={markChecked.isPending ? <CircularProgress size={14} sx={{ color: 'white' }} /> : <Send size={14} />}
          onClick={handleNext}
          disabled={!pdfReady || markChecked.isPending}
-          sx={{ textTransform: 'none', bgcolor: '#1e3a5f', '&:hover': { bgcolor: '#16304d' } }}
+          sx={{ textTransform: 'none', bgcolor: '#152642', '&:hover': { bgcolor: '#16304d' } }}
        >
          {markChecked.isPending ? 'Wird geprüft…' : 'Angebot senden →'}
        </Button>
@@ -141,7 +141,7 @@ export function OfferPropertySelectionStep() {
          endIcon={createDraft.isPending ? <CircularProgress size={14} sx={{ color: 'white' }} /> : <ArrowRight size={14} />}
          onClick={handleNext}
          disabled={selectedIds.length === 0 || createDraft.isPending}
-          sx={{ textTransform: 'none', bgcolor: '#1e3a5f', '&:hover': { bgcolor: '#16304d' } }}
+          sx={{ textTransform: 'none', bgcolor: '#152642', '&:hover': { bgcolor: '#16304d' } }}
        >
          Weiter
        </Button>
@@ -18,8 +18,8 @@ export function OfferWizardPdfStep({ generating, progress, ready, draft, propert
    <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '100%', gap: 3 }}>
      {generating ? (
        <>
-          <CircularProgress size={48} sx={{ color: '#1e3a5f' }} />
-          <Typography variant="body1" sx={{ fontWeight: 600, color: '#1e3a5f' }}>
+          <CircularProgress size={48} sx={{ color: '#152642' }} />
+          <Typography variant="body1" sx={{ fontWeight: 600, color: '#152642' }}>
            PDF wird generiert…
          </Typography>
          <Box sx={{ width: '100%', maxWidth: 400 }}>
@@ -44,7 +44,7 @@ export function OfferWizardPdfStep({ generating, progress, ready, draft, propert
              overflow: 'hidden',
            }}
          >
-            <Box sx={{ bgcolor: '#1e3a5f', px: 2, py: 1, display: 'flex', alignItems: 'center', gap: 1 }}>
+            <Box sx={{ bgcolor: '#152642', px: 2, py: 1, display: 'flex', alignItems: 'center', gap: 1 }}>
              <Box sx={{ width: 10, height: 10, borderRadius: '50%', bgcolor: '#ef4444' }} />
              <Box sx={{ width: 10, height: 10, borderRadius: '50%', bgcolor: '#f59e0b' }} />
              <Box sx={{ width: 10, height: 10, borderRadius: '50%', bgcolor: '#10b981' }} />
@@ -53,7 +53,7 @@ export function OfferWizardPdfStep({ generating, progress, ready, draft, propert
              </Typography>
            </Box>
            <Box sx={{ flex: 1, p: 3 }}>
-              <Typography variant="body2" sx={{ fontWeight: 700, color: '#1e3a5f', mb: 1 }}>
+              <Typography variant="body2" sx={{ fontWeight: 700, color: '#152642', mb: 1 }}>
                Angebotsschreiben
              </Typography>
              {draft?.editableFields.slice(0, 3).map(f => (
@@ -83,7 +83,7 @@ export function OfferWizardPdfStep({ generating, progress, ready, draft, propert
              variant="contained"
              startIcon={<Download size={16} />}
              onClick={onDownload}
-              sx={{ textTransform: 'none', bgcolor: '#1e3a5f', '&:hover': { bgcolor: '#16304d' } }}
+              sx={{ textTransform: 'none', bgcolor: '#152642', '&:hover': { bgcolor: '#16304d' } }}
            >
              Herunterladen
            </Button>
@@ -62,7 +62,7 @@ export function OwnPropertyMatchList({ need }: OwnPropertyMatchListProps) {
          flexShrink: 0,
        }}
      >
-        <Target size={14} color="#1e3a5f" />
+        <Target size={14} color="#152642" />
        <Typography variant="body2" sx={{ fontWeight: 600, color: '#0f172a' }}>
          Eigene Objekte
        </Typography>
@@ -72,7 +72,7 @@ export function OwnPropertyMatchList({ need }: OwnPropertyMatchListProps) {
            px: 1,
            py: 0.125,
            borderRadius: 1,
-            bgcolor: '#1e3a5f',
+            bgcolor: '#152642',
            color: 'white',
            fontWeight: 600,
            fontSize: '0.7rem',
@@ -159,8 +159,8 @@ export function PreparationWizard({ inquiryId, inquiry, onClose }: Props) {
          <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '100%', gap: 3 }}>
            {generating ? (
              <>
-                <CircularProgress size={48} sx={{ color: '#1e3a5f' }} />
-                <Typography variant="body1" sx={{ fontWeight: 600, color: '#1e3a5f' }}>
+                <CircularProgress size={48} sx={{ color: '#152642' }} />
+                <Typography variant="body1" sx={{ fontWeight: 600, color: '#152642' }}>
                  Bericht wird erstellt…
                </Typography>
                <Box sx={{ width: '100%', maxWidth: 400 }}>
@@ -234,7 +234,7 @@ export function PreparationWizard({ inquiryId, inquiry, onClose }: Props) {
                fullWidth
                startIcon={<Download size={16} />}
                onClick={() => showToast('PDF wird heruntergeladen…', 'info')}
-                sx={{ textTransform: 'none', bgcolor: '#1e3a5f', '&:hover': { bgcolor: '#16304d' } }}
+                sx={{ textTransform: 'none', bgcolor: '#152642', '&:hover': { bgcolor: '#16304d' } }}
              >
                Herunterladen
              </Button>
@@ -271,7 +271,7 @@ export function PreparationWizard({ inquiryId, inquiry, onClose }: Props) {
              variant="contained"
              disabled={selectedIds.length === 0}
              onClick={handleGenerate}
-              sx={{ textTransform: 'none', bgcolor: '#1e3a5f', '&:hover': { bgcolor: '#16304d' } }}
+              sx={{ textTransform: 'none', bgcolor: '#152642', '&:hover': { bgcolor: '#16304d' } }}
            >
              Weiter
            </Button>
@@ -282,7 +282,7 @@ export function PreparationWizard({ inquiryId, inquiry, onClose }: Props) {
              disabled={finalizing}
              onClick={handleFinalize}
              startIcon={finalizing ? <CircularProgress size={14} sx={{ color: 'white' }} /> : undefined}
-              sx={{ textTransform: 'none', bgcolor: '#1e3a5f', '&:hover': { bgcolor: '#16304d' } }}
+              sx={{ textTransform: 'none', bgcolor: '#152642', '&:hover': { bgcolor: '#16304d' } }}
            >
              Finalisieren
            </Button>
@@ -19,12 +19,12 @@ export function PublicNeedCard({ need, selected, onClick }: PublicNeedCardProps)
        p: 1.5,
        borderRadius: 1.5,
        border: '1px solid',
-        borderColor: selected ? '#1e3a5f' : '#e2e8f0',
+        borderColor: selected ? '#152642' : '#e8e7e4',
        bgcolor: selected ? '#f1f5f9' : 'white',
        cursor: 'pointer',
        transition: 'all 0.15s',
        '&:hover': {
-          borderColor: selected ? '#1e3a5f' : '#94a3b8',
+          borderColor: selected ? '#152642' : '#94a3b8',
          boxShadow: '0 2px 6px rgba(15,23,42,0.06)',
        },
        display: 'flex',
@@ -174,7 +174,7 @@ export function PublicNeedDetail({ need }: PublicNeedDetailProps) {
                        variant="caption"
                        sx={{
                          fontWeight: 700,
-                          color: '#1e3a5f',
+                          color: '#152642',
                          fontSize: '0.75rem',
                          bgcolor: '#e0e7ff',
                          px: 1,
@@ -189,7 +189,7 @@ export function PublicNeedDetail({ need }: PublicNeedDetailProps) {
                      sx={{
                        height: 6,
                        borderRadius: 3,
-                        bgcolor: '#e2e8f0',
+                        bgcolor: '#e8e7e4',
                        overflow: 'hidden',
                      }}
                    >
@@ -197,7 +197,7 @@ export function PublicNeedDetail({ need }: PublicNeedDetailProps) {
                        sx={{
                          width: `${pct}%`,
                          height: '100%',
-                          bgcolor: '#1e3a5f',
+                          bgcolor: '#152642',
                          transition: 'width 0.3s',
                        }}
                      />
@@ -229,7 +229,7 @@ export function PublicNeedDetail({ need }: PublicNeedDetailProps) {
            disabled={disabled}
            sx={{
              textTransform: 'none',
-              bgcolor: '#1e3a5f',
+              bgcolor: '#152642',
              fontWeight: 600,
              '&:hover': { bgcolor: '#16304d' },
            }}
@@ -47,7 +47,7 @@ export function PublicNeedList({ selectedNeedId, onSelect, fullWidth }: PublicNe
            px: 1,
            py: 0.125,
            borderRadius: 1,
-            bgcolor: '#1e3a5f',
+            bgcolor: '#152642',
            color: 'white',
            fontWeight: 600,
            fontSize: '0.7rem',
@@ -60,7 +60,7 @@ export function RelatedPropertyCardPanel({ propertyId, inquiryId }: RelatedPrope
          height: 140,
          borderRadius: 1.5,
          overflow: 'hidden',
-          bgcolor: '#e2e8f0',
+          bgcolor: '#e8e7e4',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
@@ -203,7 +203,7 @@ function AdditionalMatchCard({ match }: { match: AdditionalPropertyMatch }) {
          size="small"
          endIcon={<ArrowRight size={11} />}
          onClick={() => navigate('/supply/properties')}
-          sx={{ textTransform: 'none', fontSize: '0.7rem', mt: 0.5, p: 0, minWidth: 0, color: '#1e3a5f' }}
+          sx={{ textTransform: 'none', fontSize: '0.7rem', mt: 0.5, p: 0, minWidth: 0, color: '#152642' }}
        >
          Ansehen
        </Button>
@@ -31,12 +31,12 @@ export function SelectablePropertyMatchCard({
        p: 1.25,
        borderRadius: 1.5,
        border: '1px solid',
-        borderColor: selected ? '#1e3a5f' : '#e2e8f0',
+        borderColor: selected ? '#152642' : '#e8e7e4',
        bgcolor: selected ? '#eff6ff' : 'white',
        cursor: 'pointer',
        transition: 'all 0.15s',
        '&:hover': {
-          borderColor: selected ? '#1e3a5f' : '#94a3b8',
+          borderColor: selected ? '#152642' : '#94a3b8',
        },
        display: 'flex',
        gap: 1.25,
@@ -57,7 +57,7 @@ export function SelectablePropertyMatchCard({
          height: 40,
          flexShrink: 0,
          borderRadius: 1,
-          bgcolor: '#e2e8f0',
+          bgcolor: '#e8e7e4',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
@@ -21,7 +21,7 @@ export function latentStatusBadge(status: 'public' | 'paused' | 'expired'): {
 } {
  if (status === 'public') return { label: 'Öffentlich', bg: '#dcfce7', fg: '#166534' }
  if (status === 'paused') return { label: 'Pausiert', bg: '#fed7aa', fg: '#9a3412' }
-  return { label: 'Abgelaufen', bg: '#e2e8f0', fg: '#475569' }
+  return { label: 'Abgelaufen', bg: '#e8e7e4', fg: '#475569' }
 }

 // Deterministic pseudo-random match score from string IDs (range 60–96)