Merge pull request 'fix: dark mode colors in ViolationHistory component' (#20) from claude into master

Reviewed-on: #20

client/src/components/ViolationHistory.jsx

@@ -2,19 +2,19 @@ import React, { useState } from 'react';
 
 const s = {
     wrapper:  { marginTop: '24px' },
-    title:    { color: '#2c3e50', fontSize: '16px', fontWeight: 700, marginBottom: '10px' },
-    table:    { width: '100%', borderCollapse: 'collapse', fontSize: '13px' },
-    th:       { background: '#2c3e50', color: 'white', padding: '8px 10px', textAlign: 'left' },
-    td:       { padding: '8px 10px', borderBottom: '1px solid #dee2e6' },
-    trEven:   { background: '#f8f9fa' },
-    trOdd:    { background: 'white' },
+    title:    { color: '#b5b5c0', fontSize: '16px', fontWeight: 700, marginBottom: '10px' },
+    table:    { width: '100%', borderCollapse: 'collapse', fontSize: '13px', background: '#111217', borderRadius: '6px', overflow: 'hidden', border: '1px solid #222' },
+    th:       { background: '#000000', color: '#f8f9fa', padding: '8px 10px', textAlign: 'left', fontSize: '12px', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.5px' },
+    td:       { padding: '8px 10px', borderBottom: '1px solid #1c1d29', color: '#f8f9fa', verticalAlign: 'middle' },
+    trEven:   { background: '#111217' },
+    trOdd:    { background: '#151622' },
     pts:      { fontWeight: 700, color: '#667eea' },
     toggle:   { background: 'none', border: 'none', color: '#667eea', cursor: 'pointer', fontSize: '13px', padding: 0, textDecoration: 'underline' },
-    empty:    { color: '#888', fontStyle: 'italic', fontSize: '13px', marginTop: '8px' },
+    empty:    { color: '#77798a', fontStyle: 'italic', fontSize: '13px', marginTop: '8px' },
 };
 
 function formatDate(d) {
-    if (!d) return '—';
+    if (!d) return '–';
     const dt = new Date(d + 'T12:00:00');
     return dt.toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric', timeZone: 'America/Chicago' });
 }
@@ -44,9 +44,9 @@ export default function ViolationHistory({ history, loading }) {
                         <tr key={v.id} style={i % 2 === 0 ? s.trEven : s.trOdd}>
                             <td style={s.td}>{formatDate(v.incident_date)}</td>
                             <td style={s.td}>{v.violation_name}</td>
-                            <td style={s.td}>{v.category}</td>
+                            <td style={{ ...s.td, color: '#c0c2d6' }}>{v.category}</td>
                             <td style={{ ...s.td, ...s.pts }}>{v.points}</td>
-                            <td style={s.td}>{v.details || '—'}</td>
+                            <td style={{ ...s.td, color: '#c0c2d6' }}>{v.details || '–'}</td>
                         </tr>
                     ))}
                 </tbody>