styled component map to white nodes and light gray background

Author: garrettlchow

src/app/components/StateRoute/ComponentMap/ComponentMap.tsx

@@ -311,14 +311,14 @@ export default function ComponentMap({
                   const widthFunc: number = (name) => {
                     //returns a number that is related to the length of the name. Used for determining the node width.
                     const nodeLength = name.length;
-                    //return nodeLength * 7 + 20; //uncomment this line if we want each node to be directly proportional to the name.length (instead of nodes of similar sizes to snap to the same width)
+                    // return nodeLength * 7 + 20; //uncomment this line if we want each node to be directly proportional to the name.length (instead of nodes of similar sizes to snap to the same width)
                     if (nodeLength <= 5) return nodeLength + 50;
                     if (nodeLength <= 10) return nodeLength + 120;
                     return nodeLength + 140;
                   };
 
                   const width: number = widthFunc(node.data.name); // the width is determined by the length of the node.name
-                  const height: number = 25;
+                  const height: number = 35;
                   let top: number;
                   let left: number;
 
@@ -492,7 +492,6 @@ export default function ComponentMap({
                         fontFamily='Roboto'
                         textAnchor='middle'
                         style={{ pointerEvents: 'none' }}
-                        //fill={node.depth === 0 ? '#161521' : node.children ? 'white' : '#161521'}
                       >
                         {node.data.name}
                       </text>

src/app/styles/components/_componentMap.scss

@@ -1,49 +1,54 @@
 /* Component Map Container */
 .componentMapContainer {
-  fill: white;
-  border-radius: 8px;
+  fill: #f9fafb;
   transition: all 0.3s ease;
 }
+.componentMapContainer svg {
+  background-color: #f9fafb;
+}
 
-/* Base Node Styling - Shared properties */
+/* Node Styling */
 .compMapParent,
-.compMapChild,
-.compMapRoot {
-  fill: #3c6e71;
-  stroke: #2c5152;
-  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
+.compMapChild {
+  fill: #ffffff;
+  stroke: #e5e7eb;
+  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.05));
   transition: all 0.2s ease;
 }
 
-/* Individual Node Variations */
-.compMapParent {
-  opacity: 0.95;
-}
-
-.compMapChild {
-  opacity: 0.9;
+.compMapParent:hover,
+.compMapChild:hover {
+  stroke: #14b8a6;
+  stroke-width: 2px;
+  cursor: pointer;
+  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));
 }
 
+/* Root Node Styling */
 .compMapRoot {
-  opacity: 1;
+  fill: #14b8a6;
+  stroke: #0d9488;
+  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
+  transition: all 0.2s ease;
 }
 
-/* Hover Effects - Shared across all nodes */
-.compMapParent:hover,
-.compMapChild:hover,
 .compMapRoot:hover {
-  fill: #14b8a6;
-  stroke: #0d9488;
-  cursor: pointer;
   filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.15));
-  transform: scale(1.02);
+  cursor: pointer;
+  transform: scale(1.05);
 }
 
 /* Text Styling */
-.compMapRootText,
+.compMapRootText {
+  fill: #ffffff;
+  font-family: 'Outfit', sans-serif;
+  font-weight: 500;
+  user-select: none;
+}
+
 .compMapParentText,
 .compMapChildText {
-  fill: #ffffff;
+  fill: #374151;
   font-family: 'Outfit', sans-serif;
   font-weight: 500;
   user-select: none;
@@ -55,12 +60,18 @@
   transition: all 0.3s ease;
 }
 
+.compMapLink:hover {
+  stroke-width: 2;
+  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
+}
+
 .link-controls {
   display: flex;
   align-items: center;
   gap: 16px;
-  padding: 16px;
+  padding: 12px 16px;
   background: white;
+  border-bottom: 1px solid #e5e7eb;
   justify-content: space-between;
   max-width: 1200px;
 }