update styles in visx components - root and rectangles, increase font sizes, accessibility color changes

Author: ElDuke717

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

@@ -165,7 +165,7 @@ export default function ComponentMap({
       />
 
       <svg ref={containerRef} width={totalWidth} height={totalHeight}>
-        <LinearGradient id='links-gradient' from='#fd9b93' to='#fe6e9e' />
+        <LinearGradient id='links-gradient' from='#e75e62' to='#f00008' />
         <rect
           onClick={() => {
             hideTooltip();
@@ -188,18 +188,19 @@ export default function ComponentMap({
                     key={i}
                     data={link}
                     percent={stepPercent}
-                    stroke='#ff6569'
+                    stroke='#F00008'
                     strokeWidth='1'
                     fill='none'
                   />
                 ))}
 
                 {tree.descendants().map((node, key) => {
                   const widthFunc:number = (name) => {
+                    // is this the name of the component - so if it's longer it will make the box wider?
                     const nodeLength = name.length;
-                    if (nodeLength < 5) return nodeLength + 40;
-                    if (nodeLength < 10) return nodeLength + 60;
-                    return nodeLength + 70;
+                    if (nodeLength < 5) return nodeLength + 80; // change from 40 to 80, to see what's affected
+                    if (nodeLength < 10) return nodeLength + 120; // change from 60 to 120 to see what's affected
+                    return nodeLength + 140;  // change from 70 to 140 to see what happens
                   };
                   const width:number = widthFunc(node.data.name);
                   const height:number = 25;
@@ -236,9 +237,9 @@ export default function ComponentMap({
                     <Group top={top} left={left} key={key} className='rect'>
                       {node.depth === 0 && (
                         <circle
-                          r={12}
+                          r={25} // increase from 12 to 25 to improve visibility
                           fill="url('#links-gradient')"
-                          stroke='#ff6569'
+                          stroke='#F00008' // changing to red #F00008 to increase readability with sharper contrast
                           onClick={() => {
                             dispatch(toggleExpanded(node.data));
                             hideTooltip();
@@ -256,7 +257,7 @@ export default function ComponentMap({
                           fill={node.children ? '#161521' : '#62d6fb'}
                           stroke={
                             node.data.isExpanded && node.data.children.length > 0
-                              ? '#ff6569'
+                              ? '#F00008' // changed to #F00008 for higher contrast
                               : '#4D4D4D'
                           }
                           strokeWidth={1.5}

src/app/components/StateRoute/StateRoute.tsx

@@ -23,13 +23,13 @@ const NO_STATE_MSG = 'No state change detected. Trigger an event to change state
 
 const StateRoute = (props: StateRouteProps) => {
   const { snapshot, hierarchy, snapshots, viewIndex, webMetrics, currLocation } = props;
-  console.log(props);
+  // console.log(props);
   console.log('snapshot props', snapshot);
-  console.log('hierarchy props', hierarchy);
-  console.log('snapshots props', snapshots);
+  // console.log('hierarchy props', hierarchy);
+  // console.log('snapshots props', snapshots);
   console.log('viewIndex props', viewIndex);
-  console.log('webMetrics props', webMetrics);
-  console.log('currentLocation props', currLocation)
+  // console.log('webMetrics props', webMetrics);
+  // console.log('currentLocation props', currLocation)
   const [{ tabs, currentTab }, dispatch] = useStoreContext();
   const { hierarchy, sliderIndex, viewIndex } = tabs[currentTab];
   console.log()

src/app/styles/components/_buttons.scss

@@ -12,7 +12,7 @@
   border-radius: 5px;
   cursor: pointer;
   line-height: 1.5em;
-  font: 400 14px 'Roboto', sans-serif;
+  font: 400 16px 'Roboto', sans-serif;
   // font-size: $button-text-size;
   width: 120px;
   background: $red-color-gradient;
@@ -107,7 +107,7 @@
   border-radius: 3px;
   background-color: #565a61;
   font: normal 11px 'Roboto', sans-serif;
-  color: #b0b0b0;
+  color: #FFFFFF;
   transform: rotateX(90deg);
   transition: opacity 300ms, transform 0.15s linear;
   opacity: 0;
@@ -143,6 +143,8 @@
   border-color: transparent;
   background: $blue-color-gradient;
   border-radius: 5px;
+  font-weight: 500;
+  font-size: 16px;
 }
 
 .play-button:hover {

src/app/styles/main.scss

@@ -3,6 +3,7 @@
 
 * {
   font-family: 'Roboto', sans-serif;
+  font-size: 16px;
 }
 
 /* width */