add webmetric button style changes

Author: ElDuke717

high-contrast-colors.md

@@ -0,0 +1,17 @@
+## High Contrast Colors to Help with Color Blindness
+- Dark Blue (#000080)
+- Light Blue (#ADD8E6)
+- Dark Green (#006400)
+- Light Green (#90EE90)
+- Dark Red (#8B0000)
+- Light Red (#FFC0CB)
+- Dark Purple (#800080)
+- Light Purple (#BA55D3)
+- Dark Yellow (#FFD700)
+- Light Yellow (#FFFFE0)
+- Dark Orange (#FF8C00)
+- Light Orange (#FFA500)
+- Dark Brown (#8B4513)
+- Light Brown (#D2691E)
+- Dark Gray (#A9A9A9)
+- Light Gray (#D3D3D3)

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

@@ -7,7 +7,7 @@ import { AxisBottom, AxisLeft } from '@visx/axis';
 import { scaleBand, scaleLinear, scaleOrdinal } from '@visx/scale';
 import { useTooltip, useTooltipInPortal, defaultStyles } from '@visx/tooltip';
 import { Text } from '@visx/text';
-import { schemeSet3 } from 'd3-scale-chromatic';
+import { schemeSet1 } from 'd3-scale-chromatic';
 import { onHover, onHoverExit, save } from '../../../actions/actions';
 import { useStoreContext } from '../../../store';
 import { snapshot, TooltipData, Margin, BarGraphProps } from '../../../FrontendTypes';
@@ -19,14 +19,14 @@ const margin = {
   bottom: 0,
   left: 50,
 };
-const axisColor = '#FF6569';
+const axisColor = '#F00008';
 const background = '#242529';
 const tooltipStyles = {
   ...defaultStyles,
   minWidth: 60,
   backgroundColor: 'rgba(0,0,0,0.9)',
   color: 'white',
-  fontSize: '14px',
+  fontSize: '16px',
   lineHeight: '18px',
   fontFamily: 'Roboto',
 };
@@ -75,10 +75,10 @@ const BarGraph = (props: BarGraphProps): JSX.Element => {
     domain: [0, data.maxTotalRender],
     nice: true,
   });
-  // Gives each bar on the graph a color using schemeSet3 imported from D3
+  // Gives each bar on the graph a color using schemeSet1 imported from D3
   const colorScale = scaleOrdinal<string>({
     domain: keys,
-    range: schemeSet3,
+    range: schemeSet1,
   });
 
   // setting max dimensions and scale ranges
@@ -268,16 +268,16 @@ const BarGraph = (props: BarGraphProps): JSX.Element => {
             textAnchor: 'middle',
           })}
         />
-        <Text x={-yMax / 2 - 75} y='15' transform='rotate(-90)' fontSize={12} fill='#FFFFFF'>
+        <Text x={-yMax / 2 - 75} y='15' transform='rotate(-90)' fontSize={16} fill='#FFFFFF'>
           Rendering Time (ms)
         </Text>
         <br />
         {snapshot === 'All Snapshots' ? (
-          <Text x={xMax / 2 + 15} y={yMax + 70} fontSize={12} fill='#FFFFFF'>
+          <Text x={xMax / 2 + 15} y={yMax + 70} fontSize={16} fill='#FFFFFF'>
             Snapshot ID
           </Text>
         ) : (
-          <Text x={xMax / 2 + 15} y={yMax + 70} fontSize={12} fill='#FFFFFF'>
+          <Text x={xMax / 2 + 15} y={yMax + 70} fontSize={16} fill='#FFFFFF'>
             Components
           </Text>
         )}

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

@@ -9,7 +9,7 @@ import { AxisBottom, AxisLeft } from '@visx/axis';
 import { scaleBand, scaleLinear, scaleOrdinal } from '@visx/scale';
 import { useTooltip, useTooltipInPortal, defaultStyles } from '@visx/tooltip';
 import { Text } from '@visx/text';
-import { schemeSet3 } from 'd3-scale-chromatic';
+import { schemeTableau10 } from 'd3-scale-chromatic';
 import { makeStyles } from '@material-ui/core/styles';
 import Select from '@material-ui/core/Select';
 import MenuItem from '@material-ui/core/MenuItem';
@@ -104,7 +104,7 @@ const BarGraphComparison = (props: BarGraphComparisonProps): JSX.Element => {
   });
   // the domain array will assign each key a different color to make rectangle boxes
   // and use range to set the color scheme each bar
-  const duplicate = schemeSet3.slice();
+  const duplicate = schemeTableau10.slice();
   const colorScale = scaleOrdinal<string, string>({
     domain: keys,
     range: duplicate,

src/app/components/StateRoute/StateRoute.tsx

@@ -107,31 +107,31 @@ const StateRoute = (props: StateRouteProps) => {
           formatted={(val) =>
             Number.isNaN(val) ? '- ms' : `${((val / 100) * 2500).toFixed(2)} ms`
           }
-          label='LCP'
+          label='Largest Contentful Paint'
           name='Largest Contentful Paint'
           description='Measures loading performance. The benchmark is less than 2500 ms.'
         />
         <WebMetrics
           color={FIDColor}
           series={webMetrics.FID * 25}
           formatted={(val) => (Number.isNaN(val) ? '- ms' : `${(val / 25).toFixed(2)} ms`)}
-          label='FID'
+          label='First Input Delay'
           name='First Input Delay'
           description='Measures interactivity. The benchmark is less than 100 ms.'
         />
         <WebMetrics
           color={FCPColor}
           series={(webMetrics.FCP / 1000) * 100}
           formatted={(val) => `${((val / 100) * 1000).toFixed(2)} ms`}
-          label='FCP'
+          label='First Contentful Paint'
           name='First Contentful Paint'
           description='Measures the time it takes the browser to render the first piece of DOM content. No benchmark.'
         />
         <WebMetrics
           color={TTFBColor}
           series={(webMetrics.TTFB / 10) * 100}
           formatted={(val) => `${((val / 100) * 10).toFixed(2)} ms`}
-          label='TTFB'
+          label='Time To First Byte'
           name='Time to First Byte'
           description='Measures the time it takes for a browser to receive the first byte of page content. The benchmark is 600 ms.'
         />

src/app/components/StateRoute/Tree.tsx

@@ -48,7 +48,7 @@ const Tree = (props: TreeProps) => {
         // @ts-ignore
         <JSONTree
           // @ts-ignore
-          data={snapshots[currLocation.index] || snapshot}
+          data={snapshots[currLocation.index] || snapshot} 
           theme={{ extend: colors, tree: () => ({ className: 'json-tree' }) }}
           shouldExpandNode={() => true}
           getItemString={getItemString}

src/app/components/WebMetrics.tsx

@@ -108,8 +108,8 @@ const radialGraph = (props) => {
               options={state.options}
               series={state.series}
               type='radialBar'
-              height={200}
-              width={200}
+              height={350}
+              width={350}
             />
           </div>
         </Trigger>

src/app/styles/components/_buttons.scss

@@ -91,12 +91,16 @@
   outline: none;
   height: 20px;
   margin-bottom: 8px;
-  width: 70px;
+  width: 100px;
   border: none;
-  border-radius: 3px;
-  background: $grey-color-gradient;
-  font: normal 16px 'Roboto', sans-serif;
+  /* border-radius: 3px; */
+  background: linear-gradient(145deg, #5c6068, #4d5157);
+  font: normal 16px "Roboto", sans-serif;
   color: #FFFFFF;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 5px;
 }
 
 .jump-button {
@@ -107,11 +111,16 @@
   border: transparent;
   border-radius: 3px;
   background-color: #232529;
-  font: normal 16px 'Roboto', sans-serif;
+  font: normal 16px "Roboto", sans-serif;
   color: #FFFFFF;
   transform: rotateX(90deg);
   transition: opacity 300ms, transform 0.15s linear;
   opacity: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 2px;
+  padding-bottom: 5px;
 }
 
 .jump-button:hover {