color edits for collapse, toggle record, and performance bar graphs

Author: leebology

src/app/components/StateRoute/PerformanceVisx/BarGraph.tsx

@@ -26,7 +26,9 @@ const margin = {
   bottom: 0,
   left: 50,
 };
-const axisColor = '#F00008';
+const axisColor = '#161617';
+const axisTickLabelColor = '#363638';
+const axisLabelColor = '#363638';
 const background = '#242529';
 const tooltipStyles = {
   ...defaultStyles,
@@ -260,42 +262,44 @@ const BarGraph = (props: BarGraphProps): JSX.Element => {
           </BarStack>
         </Group>
         <AxisLeft
+          className="BarGraphAxis"
           top={margin.top}
           left={margin.left}
           scale={renderingScale}
           stroke={axisColor}
           tickStroke={axisColor}
           strokeWidth={2}
           tickLabelProps={() => ({
-            fill: 'rgb(231, 231, 231)',
+            fill: axisTickLabelColor,
             fontSize: 11,
             verticalAnchor: 'middle',
             textAnchor: 'end',
           })}
         />
         <AxisBottom
+          className="BarGraphAxis"
           top={yMax + margin.top}
           left={margin.left}
           scale={snapshotIdScale}
           stroke={axisColor}
           tickStroke={axisColor}
           strokeWidth={2}
           tickLabelProps={() => ({
-            fill: 'rgb(231, 231, 231)',
+            fill: axisTickLabelColor,
             fontSize: 11,
             textAnchor: 'middle',
           })}
         />
-        <Text x={-yMax / 2 - 75} y='15' transform='rotate(-90)' fontSize={16} fill='#FFFFFF'>
+        <Text x={-yMax / 2 - 75} y='15' transform='rotate(-90)' fontSize={16} fill={axisLabelColor}>
           Rendering Time (ms)
         </Text>
         <br />
         {snapshot === 'All Snapshots' ? (
-          <Text x={xMax / 2 + 15} y={yMax + 70} fontSize={16} fill='#FFFFFF'>
+          <Text x={xMax / 2 + 15} y={yMax + 70} fontSize={16} fill={axisLabelColor}>
             Snapshot ID
           </Text>
         ) : (
-          <Text x={xMax / 2 + 15} y={yMax + 70} fontSize={16} fill='#FFFFFF'>
+          <Text x={xMax / 2 + 15} y={yMax + 70} fontSize={16} fill={axisLabelColor}>
             Components
           </Text>
         )}

src/app/components/StateRoute/PerformanceVisx/BarGraphComparison.tsx

@@ -33,7 +33,7 @@ const margin: Margin = {
   bottom: 0,
   left: 50,
 };
-const axisColor = '#62d6fb';
+const axisColor = '#ff0000'; //#62d6fb
 const background = '#242529';
 const tooltipStyles = {
   ...defaultStyles,

src/app/components/StateRoute/PerformanceVisx/BarGraphComparisonActions.tsx

@@ -25,7 +25,7 @@ const margin: Margin = {
   bottom: 0,
   left: 50,
 };
-const axisColor = '#62d6fb';
+const axisColor = '#ff0000'; //#62d6fb
 const background = '#242529';
 const tooltipStyles = {
   ...defaultStyles,
@@ -274,6 +274,7 @@ const BarGraphComparisonActions = (props: BarGraphComparisonAction) => {
           {/* Insert Action Comparison Barstack here */}
         </Group>
         <AxisLeft
+          //className="perf-axis"
           top={margin.top}
           left={margin.left}
           scale={renderingScale}

src/app/containers/ActionContainer.tsx

@@ -199,7 +199,7 @@ function ActionContainer(props: ActionContainerProps): JSX.Element {
         </div>
         <a type='button' id='recordBtn' onClick={toggleRecord}>
           <i />
-          <div style={{ display: 'flex', alignItems: 'center', textAlign: 'right' }}>
+          <div className="toggle-record" style={{ display: 'flex', alignItems: 'center', textAlign: 'right' }}>
             Toggle Record
           </div>
           {recordingActions ? <Switch defaultChecked /> : <Switch />}

src/app/styles/abstracts/_variablesLM.scss

@@ -47,6 +47,11 @@ $launch-button: $primary-color-strong;
 $launch-button-hover: $primary-color;
 $launch-button-text: $light-text;
 
+//Collapse and Toggle Record labels
+$collapse-text: $dark-text;
+$toggle-record-text: $dark-text;
+
+
 //drop-down menu for selecting which tab Reactime is observing
 $tab-select-background: $primary-color;
 $tab-select-background-2: $primary-color;
@@ -114,7 +119,8 @@ $performance-options-dropdown: $primary-color-strong;
 $performance-options-label: $dark-text;
 $performance-save-series-button: $primary-color;
 $performance-save-series-button-text: $light-text;
-$perf-background: $background-color;
+$perf-background: $background-color-strong;
+//axis tick colors and labels determined in BarGraph.tsx on line 29
 
 $history-node: $primary-color; //this is currently set in History.tsx line 291
 $history-link: $contrasting-color; // this is currently set in d3graph.css line 26

src/app/styles/components/_buttons.scss

@@ -306,7 +306,7 @@
 
 /* sidebar button open and closing functionality */
 aside {
-  background: #242529;
+  //background: #242529;
   color: #fff;
   transition: width 1s;
   width: 100%; //JR
@@ -319,10 +319,10 @@ aside {
 
 //JR added for collapse label
 .collapse {
+  color: $collapse-text;
   display: flex;
   align-items: center;
   justify-content: flex-start;
-  background: #242529;
 }
 
 .hidden {
@@ -360,7 +360,7 @@ aside {
 }
 
 .toggle i::before {
-  top: -5px;
+  top: -6px;
 }
 
 .toggle i::after {

src/app/styles/layout/_actionContainer.scss

@@ -39,3 +39,7 @@
   padding-top: 5px;
   padding-bottom: 5px;
 }
+
+.toggle-record {
+  color: $toggle-record-text;
+}

src/app/styles/layout/_headContainer.scss

@@ -21,7 +21,7 @@
 }
 
 div .tab-select-container {
-  background-color: #ff0002;
+  //background-color: #ff0002;
   font-size: 14px;
   height: 40px;
   width: 100%;
@@ -35,18 +35,12 @@ div .tab-select-container {
 }
 
 .tab-select-container:active {
-  background-color: #ff0005;
-
   outline: none;
   border-color: transparent;
 }
 
-// svg {
-// 	color: #58c1e2;
-// }
-
 .tab-select-container {
-  background-color: #ff0004;
+  //background-color: #ff0004;
   height: 70%;
 
   .tab-select__control:focus {

src/app/styles/layout/_stateContainer.scss

@@ -215,6 +215,10 @@
   margin-top: 1rem;
 }
 
+.bar-graph-axis {
+  stroke: cornflowerblue;
+}
+
 #hover-box {
   max-width: 230px;
   background-color: #51565e;