Merge pull request #17 from oslabs-beta/45/styling_updates

45/styling updates

Author: vnguyen95

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"
@@ -412,16 +410,16 @@ export default function ComponentMap({
                         textAnchor="middle"
                         style={{ pointerEvents: 'none' }}
                         fill={
-                        node.depth === 0
-                          ? '#161521'
-                          : node.children
-                            ? 'white'
-                            : '#161521'
-                      }
+                          node.depth === 0
+                            ? '#161521'
+                            : node.children
+                              ? 'white'
+                              : '#161521'
+                        }
                         z
-                        >
-                          {node.data.name}
-                        </text>
+                      >
+                        {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

@@ -98,6 +98,12 @@ const ComponentCard = props => {
   );
 };
 
+// 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,7 +117,6 @@
   // remove the blue border when button is clicked
   color: white;
   background-color: $fiery-rose;
-
   cursor: pointer;
 }
 
@@ -168,6 +170,7 @@
   background: $blue-color-gradient;
   border-radius: 5px;
 }
+
 .play-button:focus,
 .backward-button:focus,
 .forward-button:focus {
@@ -192,6 +195,7 @@
   border-color: transparent;
   background: $blue-color-gradient;
 }
+
 .import-button:hover,
 .howToUse-button:hover,
 .export-button:hover,
@@ -212,6 +216,7 @@
   overflow: visible;
   vertical-align: -0.125em;
 }
+
 %button-shared {
   padding: 5px;
   outline: none;
@@ -235,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));
@@ -259,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;
@@ -284,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;
@@ -318,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,
@@ -370,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

@@ -9,19 +9,20 @@
 	border-radius: 5px;
 	border: 1px solid rgba(184, 196, 194, 0.25);
 	box-shadow: 2px 3px 4px 2px rgba(0, 0, 0, 0.2);
-	padding:5px;
+	padding: 5px;
 	width: 10vw;
-	height:25vw;
+	height: 25vw;
 	overflow-y: scroll;
 	overflow-wrap: break-word;
 }
-.DataComponent{
+
+.DataComponent {
 	padding-left: 30px;
 	display: flex;
 	flex-direction: row;
 	flex-wrap: wrap;
 	width: 50vw;
-	height:40vw;
+	height: 40vw;
 	overflow-y: scroll;
 	overflow-wrap: break-word;
 }
@@ -32,7 +33,7 @@
 	align-items: center;
 	justify-content: space-between;
 	background: #242529;
-	padding: 20px; 
+	padding: 20px;
 	width: 50vw;
 	height: 5vh;
 	margin: 20px 10px;
@@ -65,6 +66,7 @@
 		line-height: 18px;
 	}
 }
+
 .ExpandStyledGridElement {
 	display: flex;
 	flex-direction: row;
@@ -105,6 +107,7 @@
 		line-height: 18px;
 	}
 }
+
 .RenderRight {
 	padding-right: 5px;
 	background: $blue-color-gradient;