decreased width for small child nodes in Component Map, dropdown color and margin changed

Author: leebology

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

@@ -239,12 +239,12 @@ export default function ComponentMap({
 
                 {tree.descendants().map((node, key) => {
                   const widthFunc: number = (name) => {
-                    // function that takes in a node's name and returns a number that is related to the length of the name. Used for determining the node width.
+                    //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;
-                    if (nodeLength <= 5) return nodeLength + 80; // returns a number between 80-85
-                    if (nodeLength <= 10) return nodeLength + 120; // returns a number between 125-130
-                    return nodeLength + 140; // returns a number greater than 150
+                    //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

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

@@ -8,14 +8,14 @@ const controlStyles: ControlStyles = {
 };
 
 const dropDownStyle: DropDownStyle = {
-  margin: '0.5em',
+  margin: '0.1em',
   //fontSize: '16px',
   fontFamily: 'Roboto, sans-serif',
   borderRadius: '4px',
   borderStyle: 'solid',
   borderWidth: '1px',
-  backgroundColor: '#242529',
-  color: 'white',
+  backgroundColor: '#d9d9d9',
+  color: '#161617',
   padding: '2px',
 };
 

src/app/styles/abstracts/_variablesLM.scss

@@ -103,8 +103,8 @@ $state-background: $background-color-strong;
 $state-cont-border: $contrasting-color;
 
 //MAP TAB
-$map-options-dropdown: $primary-color;
 $map-options-label: $dark-text;
+//the dropdown colors are determined in the dropDownStyle object in LinkControls.tsx
 $map-link: $contrasting-color;
 // $map-root-fill: $primary-color; //root fill is currently a visx LinearGradient defined in ComponentMap.tsx
 $map-root-stroke: $primary-color;

src/app/styles/components/_componentMap.scss

@@ -6,11 +6,12 @@
   color: $map-options-label;
 }
 
-.comp-map-dropdown {
-  background-color: #ff0000;
-  color: #ff0000;
-  background: #ff0000;
-}
+//this was supposed to control the dropDownStyle object in LinkControls.tsx (the dropdown menus in ComponentMap)
+// .comp-map-dropdown {
+//   backgroundColor: #ff0008;
+//   color: #ff0007;
+//   background: #ff0006;
+// }
 
 // .compMapParent {
 //   //fill: $map-parent-fill;