some styling

Author: FreyaWu

src/app/components/ComponentMap.tsx

@@ -220,7 +220,7 @@ export default function ComponentMap({
       if (data[key] !== 'reactFiber' && typeof data[key] !== 'object' && exclude.includes(key) !== true) {
         propsFormat.push(<p className="stateprops">
           {`${key}: ${data[key]}`}
-                         </p>);
+        </p>);
       } else if (data[key] !== 'reactFiber' && typeof data[key] === 'object' && exclude.includes(key) !== true) {
         const result = makePropsPretty(data[key]);
         nestedObj.push(result);
@@ -359,7 +359,7 @@ export default function ComponentMap({
                             forceUpdate();
                           }}
                         />
-                        )}
+                      )}
                       {/* This creates the rectangle boxes for each component and sets it relative position to other parent nodes of the same level. */}
                       {node.depth !== 0 && (
                         <rect
@@ -371,9 +371,7 @@ export default function ComponentMap({
                           fill={node.children ? '#161521' : '#62d6fb'}
                           // node.data.isExpanded = if node is collapsed
                           // stroke={(node.data.isExpanded && node.child) ? '#95fb62' : '#a69ff5'} => node.child is gone when clicked, even if it actually has children. Maybe better call node.children => node.leaf
-                          stroke={(node.data.isExpanded && node.data.children.length > 0) ? '#95fb62' : '#a69ff5'}
-
-                          // if already child in fill do not all stroke to change change color later but it works!!!!!!!!
+                          stroke={(node.data.isExpanded && node.data.children.length > 0) ? '#ff6569' : 'none'}
                           strokeWidth={3}
                           // strokeDasharray={node.children ? '0' : '2,2'}
                           strokeOpacity="1"
@@ -403,25 +401,25 @@ export default function ComponentMap({
                           onMouseEnter={() => dispatch(onHover(node.data.rtid))} // fix this not working
                           onMouseLeave={() => dispatch(onHoverExit(node.data.rtid))}
                         />
-                        )}
+                      )}
                       {/* Display text inside of each component node */}
                       <text
-                          dy=".33em"
-                          fontSize={10}
-                          fontFamily="Roboto"
-                          textAnchor="middle"
-                          style={{ pointerEvents: 'none' }}
-                          fill={
+                        dy=".33em"
+                        fontSize={10}
+                        fontFamily="Roboto"
+                        textAnchor="middle"
+                        style={{ pointerEvents: 'none' }}
+                        fill={
                           node.depth === 0
                             ? '#161521'
                             : node.children
                               ? 'white'
                               : '#161521'
                         }
-                          z
-                        >
-                          {node.data.name}
-                        </text>
+                        z
+                      >
+                        {node.data.name}
+                      </text>
                     </Group>
                   );
                 })}

src/app/components/LinkControls.tsx

@@ -10,7 +10,10 @@ const controlStyles = {
 const dropDownStyle = {
   margin: '0.5em',
   fontSize: '12px',
+  fontFamily: 'Roboto, sans-serif',
   borderRadius: '4px',
+  borderStyle: 'solid',
+  borderWidth: '1px',
   backgroundColor: '#242529',
   color: 'white',
   padding: '2px',
@@ -112,12 +115,11 @@ export default function LinkControls({
       </select>
 
       {/* Controls for the select selections. */}
-      <label>Select:</label>
+      <label> Select:</label>
       &nbsp; {/*This is a non-breaking space - Prevents an automatic line break at this position */}
-      <input list='nodeOptions' type='text' name="nodeOptions"
-        onChange={e => {
-          setSelectedNode(e.target.value)
-        }}
+      <input id='selectInput' list='nodeOptions' type='text' name="nodeOptions"
+        onChange={e => { setSelectedNode(e.target.value) }}
+        style={dropDownStyle}
       />
       <datalist id='nodeOptions'>
         {nodeList.map(node => (

src/app/components/RenderingFrequency.tsx

@@ -93,13 +93,19 @@ const ComponentCard = props => {
         </div>
       </div>
       <div className="DataComponent">
-        {expand === true ? dataComponentArray : null}
+        {expand && dataComponentArray}
       </div>
 
     </div>
   );
 };
 
+// const dataComponentContainer = (
+//   <div> 
+//     {dataComponentArray.}
+//   </div>  
+// );
+
 const DataComponent = props => {
   const {
     header,

src/app/styles/components/_buttons.scss

@@ -1,4 +1,5 @@
 @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
+
 .save-series-button {
   padding: 3px;
   outline: transparent;
@@ -23,6 +24,7 @@
     background: rgb(41, 164, 41);
   }
 }
+
 .delete-button {
   padding: 3px;
   outline: transparent;
@@ -63,6 +65,7 @@
   width: 120px;
   background: $red-color-gradient;
 }
+
 .empty-button:hover {
   color: black;
   box-shadow: $box-shadow-red;
@@ -114,10 +117,19 @@
   // remove the blue border when button is clicked
   color: white;
   background-color: $fiery-rose;
-
   cursor: pointer;
 }
 
+.current-location {
+  outline: none;
+  height: 20px;
+  margin-bottom: 8px;
+  width: 70px;
+  border: transparent;
+  border-radius: 3px;
+  font: normal 11px 'Roboto', sans-serif;
+}
+
 .empty-button:hover {
   color: white;
   background-color: $highlight-color;
@@ -158,6 +170,7 @@
   background: $blue-color-gradient;
   border-radius: 5px;
 }
+
 .play-button:focus,
 .backward-button:focus,
 .forward-button:focus {
@@ -182,6 +195,7 @@
   border-color: transparent;
   background: $blue-color-gradient;
 }
+
 .import-button:hover,
 .howToUse-button:hover,
 .export-button:hover,
@@ -202,6 +216,7 @@
   overflow: visible;
   vertical-align: -0.125em;
 }
+
 %button-shared {
   padding: 5px;
   outline: none;
@@ -225,11 +240,9 @@
 .dropdown-dark {
   background: #444;
   border-color: #111111 #0a0a0a black;
-  background-image: -webkit-linear-gradient(
-    top,
-    transparent,
-    rgba(0, 0, 0, 0.4)
-  );
+  background-image: -webkit-linear-gradient(top,
+      transparent,
+      rgba(0, 0, 0, 0.4));
   background-image: -moz-linear-gradient(top, transparent, rgba(0, 0, 0, 0.4));
   background-image: -o-linear-gradient(top, transparent, rgba(0, 0, 0, 0.4));
   background-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.4));
@@ -249,21 +262,23 @@
 .dropdown-dark .dropdown-select {
   color: #aaa;
   text-shadow: 0 1px black;
-  background: #444; /* Fallback for IE 8 */
+  background: #444;
+  /* Fallback for IE 8 */
 }
 
 .dropdown-dark .dropdown-select:focus {
   color: #ccc;
 }
 
-.dropdown-dark .dropdown-select > option {
+.dropdown-dark .dropdown-select>option {
   background: #444;
   text-shadow: 0 1px rgba(0, 0, 0, 0.4);
 }
 
 .MuiSelect-icon {
   color: lightgrey !important;
 }
+
 .series-options-container {
   display: flex;
   justify-content: space-between;
@@ -274,29 +289,35 @@
 .snapshotId-header {
   font-size: 1rem;
 }
+
 .dropdown-and-delete-series-container {
   display: flex;
   align-items: center;
 }
+
 .close-button-container {
   display: flex;
   justify-content: flex-end;
 }
+
 .closebtn {
   font-size: 20px;
   color: #818181;
   background-color: transparent;
   border: none;
   box-shadow: none;
 }
+
 .closebtn:hover {
   color: #f1f1f1;
 }
+
 .side-bar-button {
   width: 80px;
   height: 30px;
   padding: 0 2rem;
 }
+
 /* sidebar button open and closing functionality */
 aside {
   width: 250px;
@@ -308,13 +329,15 @@ aside {
 .no-aside {
   width: 30px;
 }
+
 .toggle {
   // width: 40px;
   // height: 10px;
   display: block;
   position: relative;
   margin-top: 1rem;
 }
+
 /* toggle i handles arrow animation */
 .toggle i,
 .toggle i::after,
@@ -360,7 +383,9 @@ aside {
 .no-aside .toggle i::after {
   transform: none;
 }
+
 #arrow {
   margin-bottom: 40px;
 }
-/* ^ sidebar button open and closing functionality */
+
+/* ^ sidebar button open and closing functionality */

src/app/styles/components/_renderingFrequency.scss

@@ -1,21 +1,24 @@
-.borderStyling{
+.borderStyling {
 	border-radius: 5px;
 	border: 1px solid rgba(184, 196, 194, 0.25);
 	box-shadow: 2px 3px 4px 2px rgba(0, 0, 0, 0.2);
 	width: 40vh;
 }
-.DataComponent{
+
+.DataComponent {
 	display: flex;
 	flex-direction: row;
-	width: 40vh
+	flex-wrap: wrap;
+	width: 80vw;
 }
+
 .StyledGridElement {
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
 	background: #242529;
 	padding: 20px;
-	width: 40vh;
+	width: 80vw;
 	height: 5vh;
 	margin: 20px 10px;
 	font-family: 'Roboto', sans-serif;
@@ -45,6 +48,7 @@
 		line-height: 18px;
 	}
 }
+
 .ExpandStyledGridElement {
 	display: flex;
 	align-items: center;
@@ -80,9 +84,10 @@
 		line-height: 18px;
 	}
 }
+
 .RenderRight {
 	border-radius: 5px;
 	background: $blue-color-gradient;
 	width: 10%;
 	padding: 0 0.5em;
-}
+}