Merge pull request #2 from Nkmai/reactime7

Reactime7

Author: Nkmai

src/app/components/PerformanceVisx.tsx

@@ -76,6 +76,7 @@ const tooltipStyles = {
 
 // traverses a snapshot for data: rendering time, component type, or rtid 
 const traverse = (snapshot, fetchData, data = {}) => {
+  console.log("data in beg of traverse: ", data )
   if (!snapshot.children[0]) return;
   snapshot.children.forEach((child, idx) => {
     const componentName = child.name + -[idx + 1];
@@ -94,6 +95,7 @@ const traverse = (snapshot, fetchData, data = {}) => {
     }
     traverse(snapshot.children[idx], fetchData, data);
   })
+  console.log("data in end of traverse: ", data )
   return data;
 };
 
@@ -215,7 +217,7 @@ const PerformanceVisx = (props: BarStackProps) => {
                     key={`bar-stack-${barStack.index}-${bar.index}`}
                     x={bar.x}
                     y={bar.y}
-                    height={bar.height === 0 ? idx + 1 : bar.height}
+                    height={bar.height === 0 ? null : bar.height}
                     width={bar.width}
                     fill={bar.color}
                     /* TIP TOOL EVENT HANDLERS */

src/app/containers/ButtonsContainer.tsx

@@ -55,7 +55,7 @@ function ButtonsContainer() {
   const [{ tabs, currentTab }, dispatch] = useStoreContext();
   const {
     snapshots,
-    mode: { paused, locked, persist },
+    mode: { paused, persist },
   } = tabs[currentTab];
 
   return (
@@ -68,13 +68,6 @@ function ButtonsContainer() {
         {paused? <FontAwesomeIcon icon={faUnlock} /> : <FontAwesomeIcon icon={faLock} />}
 				{paused ? 'Unlock' : 'Lock'}
 			</button>
-			{/* <button
-				className="lock-button"
-				type="button"
-				onClick={() => dispatch(toggleMode('locked'))}
-			>
-				{locked ? 'Unlocked': 'Locked'}
-			</button> */}
 			<button
 				className="persist-button"
 				type="button"

src/app/reducers/mainReducer.js

@@ -185,9 +185,6 @@ export default (state, action) => produce(state, draft => {
         case 'paused':
           actionText = 'setPause';
           break;
-        case 'locked':
-          actionText = 'setLock';
-          break;
         case 'persist':
           actionText = 'setPersist';
           break;

src/app/styles/abstracts/_variables.scss

@@ -5,27 +5,38 @@ $text-font-stack: 'Roboto', sans-serif !default;
 
 /// @type Color
 $fiery-rose: #ff6569;
+$blue-brand: #62d6fb;
 
 /// @type Color
 $blue-color-gradient: linear-gradient(145deg, #69e5ff, #58c1e2);
+$red-color-gradient: linear-gradient(145deg, #ff6569, #e65558);
+$grey-color-gradient: linear-gradient(145deg, #5c6068, #4d5157);
 
 /// @type Color:
 $box-shadow-blue: inset 5px 5px 10px #53b6d5, inset -5px -5px 10px #71f6ff;
+$box-shadow-red: inset 5px 5px 10px #d95053, inset -5px -5px 10px #ff6c71;
 
 /// @type Color
 $text-color: #e7e7e7;
 
 /// @type Color
 $brand-color: #242529 !default;
 
+/// @type Color
+$background-color: #333333 !default;
+$medium-background-color: #51565e !default;
+$light-background-color: #585d65 !default;
+
 /// Light grey
 /// @type Color
 $light-grey-one: #474c55 !default;
 
 /// @type Color
 $light-grey-two: #5f6369 !default;
 
-$light-grey-three: rgb(101, 104, 110) !default;
+$light-grey-three: #65686e !default;
+
+$light-grey-four: #4c4c4d !default;
 
 /// @type Color
 $navbar-color: #44484e !default;
@@ -34,7 +45,14 @@ $navbar-color: #44484e !default;
 $head-color: #242529 !default;
 
 /// @type Color
-$border-color: rgb(41, 41, 41) !default;
+$border-color: #292929 !default;
+
+/// @type Color
+$border-slider: #57c5f7 !default;
+
+/// @type Color
+$border-rc: #373737 !default;
+$background-rc-color: #e9e9e9 !default;
 
 /// @type Color
 $highlight-color: rgba(224, 224, 224, 0.5) !default;

src/app/styles/base/_typography.scss

@@ -1,5 +1,4 @@
 body {
-  color: $text-color;
-  font: normal 13px $text-font-stack;
-  // font: normal 125% / 1.4 $text-font-stack;
+	color: $text-color;
+	font: normal 13px $text-font-stack;
 }

src/app/styles/components/_buttons.scss

@@ -14,11 +14,11 @@
 	font: 300 14px 'Roboto', sans-serif;
 	font-size: $button-text-size;
 	width: 120px;
-	background: linear-gradient(145deg, #ff6569, #e65558);
+	background: $red-color-gradient;
 }
 .empty-button:hover {
 	color: black;
-	box-shadow: inset 5px 5px 10px #d95053, inset -5px -5px 10px #ff6c71;
+	box-shadow: $box-shadow-red;
 }
 
 .state-dropdown {
@@ -43,7 +43,7 @@
 	width: 70px;
 	border: none;
 	border-radius: 3px;
-	background: linear-gradient(145deg, #5c6068, #4d5157);
+	background: $grey-color-gradient;
 	font: normal 11px 'Roboto', sans-serif;
 	color: #b0b0b0;
 }
@@ -66,7 +66,6 @@
 .jump-button:hover {
 	// remove the blue border when button is clicked
 	color: white;
-	// color: black;
 	background-color: $fiery-rose;
 
 	cursor: pointer;
@@ -127,7 +126,6 @@
 .import-button,
 .howToUse-button,
 .export-button,
-.lock-button,
 .pause-button,
 .persist-button {
 	@extend %button-shared;
@@ -138,7 +136,6 @@
 .import-button:hover,
 .howToUse-button:hover,
 .export-button:hover,
-.lock-button:hover,
 .pause-button:hover,
 .persist-button:hover {
 	@extend %button-shared;
@@ -148,7 +145,7 @@
 }
 
 .svg-inline--fa {
-	color: #62d6fb;
+	color: $blue-brand;
 	margin-right: 0.75em;
 	display: inline-block;
 	font-size: inherit;
@@ -167,10 +164,10 @@
 	font: 300 14px 'Roboto', sans-serif;
 	font-size: $button-text-size;
 
-	background: rgb(36, 37, 41);
+	background: $brand-color;
 	border-radius: 5px;
 	position: relative;
-	border: 1px solid rgba(184, 196, 194, 0.25);
+	border: 1px solid #b8c4c240;
 
 	@extend %disable-highlight;
 }