client/src/components/PedigreeTree.jsx

@@ -46,13 +46,13 @@ const PedigreeTree = ({ dogId, pedigreeData, coi }) => {
       : (isMale ? 'rgba(59,130,246,0.3)' : 'rgba(236,72,153,0.3)')
     const ringColor   = isRoot ? rootAccent : nodeColor
 
-    const r = isRoot ? 34 : 28
+    const r = isRoot ? 46 : 38
 
     return (
       <g>
         {/* Glow halo */}
         <circle
-          r={r + 10}
+          r={r + 12}
           fill={glowColor}
           style={{ filter: 'blur(6px)' }}
         />
@@ -95,10 +95,10 @@ const PedigreeTree = ({ dogId, pedigreeData, coi }) => {
 
         {/* Gender / crown icon */}
         <text
-          fill={isRoot ? '#fff' : '#fff'}
+          fill="#fff"
-          fontSize={isRoot ? 22 : 18}
+          fontSize={isRoot ? 26 : 22}
           textAnchor="middle"
-          dy="7"
+          dy="8"
           style={{ pointerEvents: 'none', userSelect: 'none' }}
         >
           {isRoot ? '👑' : (isMale ? '♂' : '♀')}
@@ -106,14 +106,14 @@ const PedigreeTree = ({ dogId, pedigreeData, coi }) => {
 
         {/* Name label */}
         <text
-          fill="var(--text-primary, #f5f0e8)"
+          fill="var(--text-primary, #ffffff)"
-          fontSize={isRoot ? 15 : 13}
+          fontSize={isRoot ? 18 : 15}
           fontWeight={isRoot ? '700' : '600'}
           fontFamily="Inter, sans-serif"
           textAnchor="middle"
           x="0"
-          y={r + 18}
+          y={r + 24}
-          style={{ pointerEvents: 'none' }}
+          style={{ pointerEvents: 'none', textShadow: '0 2px 4px rgba(0,0,0,0.8)' }}
         >
           {nodeDatum.name}
         </text>
@@ -121,13 +121,13 @@ const PedigreeTree = ({ dogId, pedigreeData, coi }) => {
         {/* Breed label (subtle) */}
         {breed && (
           <text
-            fill="var(--text-muted, #8c8472)"
+            fill="var(--text-muted, #d1d5db)"
-            fontSize="10"
+            fontSize="12"
             fontFamily="Inter, sans-serif"
             textAnchor="middle"
             x="0"
-            y={r + 31}
+            y={r + 42}
-            style={{ pointerEvents: 'none' }}
+            style={{ pointerEvents: 'none', textShadow: '0 1px 3px rgba(0,0,0,0.8)' }}
           >
             {breed}
           </text>
@@ -136,13 +136,13 @@ const PedigreeTree = ({ dogId, pedigreeData, coi }) => {
         {/* Registration number */}
         {nodeDatum.attributes?.registration && (
           <text
-            fill="var(--text-muted, #8c8472)"
+            fill="var(--text-muted, #d1d5db)"
-            fontSize="10"
+            fontSize="12"
             fontFamily="Inter, sans-serif"
             textAnchor="middle"
             x="0"
-            y={r + (breed ? 44 : 31)}
+            y={r + (breed ? 58 : 42)}
-            style={{ pointerEvents: 'none' }}
+            style={{ pointerEvents: 'none', textShadow: '0 1px 3px rgba(0,0,0,0.8)' }}
           >
             {nodeDatum.attributes.registration}
           </text>
@@ -151,13 +151,13 @@ const PedigreeTree = ({ dogId, pedigreeData, coi }) => {
         {/* Birth year */}
         {nodeDatum.attributes?.birth_year && (
           <text
-            fill="var(--text-muted, #8c8472)"
+            fill="var(--text-muted, #d1d5db)"
-            fontSize="10"
+            fontSize="12"
             fontFamily="Inter, sans-serif"
             textAnchor="middle"
             x="0"
-            y={r + (breed ? 57 : (nodeDatum.attributes?.registration ? 44 : 31))}
+            y={r + (breed ? 74 : (nodeDatum.attributes?.registration ? 58 : 42))}
-            style={{ pointerEvents: 'none' }}
+            style={{ pointerEvents: 'none', textShadow: '0 1px 3px rgba(0,0,0,0.8)' }}
           >
             ({nodeDatum.attributes.birth_year})
           </text>
@@ -232,8 +232,8 @@ const PedigreeTree = ({ dogId, pedigreeData, coi }) => {
             }}
             orientation="horizontal"
             pathFunc="step"
-            separation={{ siblings: 1.6, nonSiblings: 2.2 }}
+            separation={{ siblings: 1.8, nonSiblings: 2.4 }}
-            nodeSize={{ x: 220, y: 160 }}
+            nodeSize={{ x: 280, y: 200 }}
             renderCustomNodeElement={renderCustomNode}
             enableLegacyTransitions
             transitionDuration={300}

client/src/components/PedigreeView.css

@@ -2,7 +2,8 @@
   position: relative;
   width: 95vw;
   height: 90vh;
-  background: white;
+  background: var(--bg-primary, #1e1e24);
+  border: 1px solid var(--border, #333);
   border-radius: 12px;
   display: flex;
   flex-direction: column;
@@ -11,7 +12,7 @@
 
 .pedigree-container {
   flex: 1;
-  background: linear-gradient(to bottom, #f8fafc 0%, #e2e8f0 100%);
+  background: var(--bg-primary, #1e1e24);
   position: relative;
   overflow: hidden;
 }
@@ -26,8 +27,8 @@
   display: flex;
   gap: 2rem;
   padding: 0.75rem 1.5rem;
-  background: #f1f5f9;
+  background: var(--bg-elevated, #2a2a35);
-  border-bottom: 1px solid #e2e8f0;
+  border-bottom: 1px solid var(--border, #333);
   justify-content: center;
 }
 
@@ -35,8 +36,8 @@
   display: flex;
   align-items: center;
   gap: 0.5rem;
-  font-size: 0.875rem;
+  font-size: 1rem;
-  color: #475569;
+  color: var(--text-secondary, #a1a1aa);
 }
 
 .legend-color {
@@ -57,10 +58,10 @@
 
 .pedigree-info {
   padding: 0.75rem 1.5rem;
-  background: #f8fafc;
+  background: var(--bg-elevated, #2a2a35);
-  border-top: 1px solid #e2e8f0;
+  border-top: 1px solid var(--border, #333);
-  font-size: 0.875rem;
+  font-size: 1rem;
-  color: #64748b;
+  color: var(--text-muted, #a1a1aa);
   text-align: center;
 }
 
@@ -69,7 +70,7 @@
 }
 
 .pedigree-info strong {
-  color: #334155;
+  color: var(--text-primary, #ffffff);
 }
 
 /* Override react-d3-tree styles */
@@ -94,12 +95,12 @@
 
 .rd3t-label__title {
   font-weight: 600;
-  fill: #1e293b;
+  fill: var(--text-primary, #ffffff);
 }
 
 .rd3t-label__attributes {
-  font-size: 0.875rem;
+  font-size: 1rem;
-  fill: #64748b;
+  fill: var(--text-muted, #a1a1aa);
 }
 
 /* Loading state */