Merge pull request #10 from oslabs-beta/nick

Trying UI updates again

Author: j-mccoll

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/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;
@@ -60,8 +60,8 @@
   border-radius: 3px;
   cursor: pointer;
   line-height: 1.5em;
-  font: 300 14px 'Roboto', sans-serif;
-  font-size: $button-text-size;
+  font: 500 16px 'Roboto', sans-serif;
+  // font-size: $button-text-size; increase the font size and contrast for readability
   width: 120px;
   background: #62d6fb;
 }
@@ -94,7 +94,7 @@
   border: none;
   border-radius: 3px;
   background: $grey-color-gradient;
-  font: normal 11px 'Roboto', sans-serif;
+  font: normal 16px 'Roboto', sans-serif;
   color: #b0b0b0;
 }
 
@@ -106,8 +106,8 @@
   border: transparent;
   border-radius: 3px;
   background-color: #565a61;
-  font: normal 11px 'Roboto', sans-serif;
-  color: #b0b0b0;
+  font: normal 16px 'Roboto', sans-serif;
+  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/components/_renderingFrequency.scss

@@ -40,7 +40,7 @@
 	font-family: 'Roboto', sans-serif;
 
 	h3 {
-		color: $text-color;
+		color: #FFFFFF;
 		margin-bottom: 5px;
 		margin-top: 5px;
 		text-transform: uppercase;

src/app/styles/layout/_actionContainer.scss

@@ -27,7 +27,7 @@
 }
 
 .route {
-  background-color: #ff6569;
+  background-color: #F00008;
   padding-left: 10px;
   padding-top: 5px;
   padding-bottom: 5px;

src/app/styles/main.scss

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