ui/ux changes in tabs, and play buttons

Co-authored-by: Nkmai <[email protected]>
Co-authored-by: lind-tania <[email protected]>
Co-authored-by: rtviner <[email protected]>
Co-authored-by: caitlinchan23 <[email protected]>

Author: 4 people

src/app/components/BarGraph.tsx

@@ -40,7 +40,7 @@ interface TooltipData {
 }
 
 /* DEFAULTS */
-const margin = { top: 60, right: 30, bottom: 0, left: 50 };
+const margin = { top: 30, right: 30, bottom: 0, left: 50 };
 const axisColor = '#62d6fb';
 const background = '#242529';
 const tooltipStyles = {
@@ -194,7 +194,7 @@ const BarGraph = (props) => {
         })}
       />
       <Text x={-xMax / 2} y="15" transform="rotate(-90)" fontSize={12} fill="#FFFFFF"> Rendering Time (ms) </Text>
-      <Text x={xMax / 2} y={yMax + 100} fontSize={12} fill="#FFFFFF"> Snapshot Id </Text>
+      <Text x={xMax / 2} y={yMax + 65} fontSize={12} fill="#FFFFFF"> Snapshot Id </Text>
     </svg>
     {/* FOR HOVER OVER DISPLAY */}
     {tooltipOpen && tooltipData && (

src/app/components/PerformanceVisx.tsx

@@ -104,15 +104,15 @@ const PerformanceVisx = (props: BarStackProps) => {
     // if performance tab is too small it will not return VISX component
     return  (
       <div className='renderTab'>
-        <FormControlLabel style={{"margin-left":"30px", "margin-top": "20px"}}
+        <FormControlLabel style={{"margin-left":"30px", "margin-top": "0px"}}
         control={
           <Switch
             onChange={toggleView}
             name="checkedB"
             color="primary"
           />
         }
-        label="Renders"
+        label="Component Details"
       />
       {/* <button onClick={toggleView}>Toggle Button</button> */}
         <div style={{"display": "flex", "justify-content": "center"}}>

src/app/components/legend.tsx

@@ -154,7 +154,7 @@ function LegendVisual({
             with: 120px;
             line-height: 0.9em;
             color: #efefef;
-            font-size: 9px;
+            font-size: 11px;
             font-family: arial;
             padding: 10px 10px;
             float: left;
@@ -166,6 +166,7 @@ function LegendVisual({
             font-size: 12px;
             margin-bottom: 10px;
             font-weight: 100;
+            font-family: arial;
           }
         `}
       </style>

src/app/styles/components/_buttons.scss

@@ -89,6 +89,7 @@
 .play-button:hover {
 	background: $blue-color-gradient;
 	transform: translate3d(0, -3px, 0);
+	cursor: pointer;
 }
 
 .backward-button {
@@ -121,6 +122,7 @@
 .backward-button:hover {
 	background: $blue-color-gradient;
 	transform: translate3d(0, -3px, 0);
+	cursor: pointer;
 }
 
 .import-button,

src/app/styles/components/_performanceVisx.scss

@@ -13,4 +13,8 @@
 
 .MuiSwitch-track {
 	background-color: #e7e7e7 !important;
-}
+}
+
+.MuiTypography-body1 {
+	font-size: 1em !important;
+	}

src/app/styles/components/_renderingFrequency.scss

@@ -13,6 +13,7 @@
 	border: 1px solid rgba(184, 196, 194, 0.25);
 	box-shadow: 2px 3px 4px 2px rgba(0, 0, 0, 0.2);
 
+
 	h3 {
 		color: $text-color;
 		margin-bottom: 5px;

src/app/styles/layout/_travelContainer.scss

@@ -12,18 +12,19 @@
 	justify-content: space-around;
 }
 
+
 .react-select-container {
 	font-size: 12px;
 	min-width: 90px;
 	margin: 8px;
-}
-
-.react-select-container {
 	.react-select__control {
 		background-color: $light-grey-four;
 		border-color: transparent;
 		@extend %disable-highlight;
 	}
+	.react-select__control:hover {
+		cursor: pointer;
+	}
 	.react-select__menu {
 		background-color: $light-grey-four;
 		@extend %disable-highlight;
@@ -33,10 +34,13 @@
 	}
 	.react-select__option:hover {
 		background-color: $fiery-rose;
+		cursor: pointer;
 	}
 	.react-select__option--is-selected,
 	.react-select__option--is-focused {
 		background-color: transparent;
+		cursor: pointer;
+
 	}
 
 	// removes the cursor from blinking