merging consolidated-colors from origin

Author: jrosengrant

src/app/FrontendTypes.ts

@@ -247,6 +247,7 @@ export interface HandleProps {
 }
 
 export interface MainSliderProps {
+  className: string;
   snapshotsLength: number;
 }
 
@@ -309,13 +310,12 @@ export interface LinkControlProps {
 }
 
 export interface ControlStyles {
-  fontSize: string;
+  //fontSize: string;
   padding: string;
 }
 
 export interface DropDownStyle {
   margin: string;
-  fontSize: string;
   fontFamily: string;
   borderRadius: string;
   borderStyle: string;

src/app/components/Action.tsx

@@ -117,9 +117,9 @@ const Action = (props: ActionProps): JSX.Element => {
             >
               <div className='action-component-text'>
                 <input
+                  className='actionname'
                   key={`ActionInput${displayName}`}
                   type='text'
-                  className='actionname'
                   placeholder={`Snapshot: ${displayName}`}
                 />
               </div>

src/app/components/MainSlider.tsx

@@ -12,6 +12,7 @@ const handle = (props: HandleProps): JSX.Element => {
 
   return (
     <Tooltip // Tooltip that pop's up when clicking/dragging the slider thumb/handle that displays the current snapshot index
+      className='travel-tooltip'
       prefixCls='rc-slider-tooltip'
       overlay={value} // the currentIndex
       visible={dragging} // tooltip only visible when slider thumb is click and/or dragged
@@ -45,6 +46,8 @@ function MainSlider(props: MainSliderProps): JSX.Element {
 
   return (
     <Slider
+      className='travel-slider'
+      color= '#0af548'
       min={0} // index of our first snapshot
       max={snapshotsLength - 1} // index of our last snapshot
       value={sliderIndex} // currently slider thumb position

src/app/components/StateRoute/ComponentMap/ComponentMap.tsx

@@ -22,6 +22,13 @@ import { toggleExpanded, setCurrentTabInApp } from '../../../slices/mainSlice';
 import { useDispatch } from 'react-redux';
 import { LinkTypesProps, DefaultMargin, ToolTipStyles } from '../../../FrontendTypes';
 
+const linkStroke = '#F00008'; //#F00008 original
+const rootStroke = '#F00008'; //#F00008 original
+const nodeParentFill = '#161521'; //#161521 original
+const nodeChildFill = '#62d6fb'; //#62d6fb original
+const nodeParentStroke = '#F00008'; //#F00008 original
+const nodeChildStroke = '#4D4D4D'; //#4D4D4D original
+
 const defaultMargin: DefaultMargin = {
   top: 30,
   left: 30,
@@ -191,15 +198,17 @@ export default function ComponentMap({
       />
 
       <svg ref={containerRef} width={totalWidth} height={totalHeight}>
-        <LinearGradient id='links-gradient' from='#e75e62' to='#f00008' />
+        {/* <LinearGradient id='root-gradient' from='#e75e62' to='#f00008' /> */}
+        <LinearGradient id='root-gradient' from='#488689' to='#3c6e71' />
+        <LinearGradient id='parent-gradient' from='#488689' to='#3c6e71' />
         <rect
+          className='componentMapContainer'
           onClick={() => {
             hideTooltip();
           }}
           width={totalWidth}
           height={totalHeight}
           rx={14}
-          fill='#242529'
         />
         <Group top={margin.top} left={margin.left}>
           <Tree
@@ -211,10 +220,11 @@ export default function ComponentMap({
               <Group top={origin.y} left={origin.x}>
                 {tree.links().map((link, i) => (
                   <LinkComponent
+                    className='compMapLink'
                     key={i}
                     data={link}
                     percent={stepPercent}
-                    stroke='#F00008'
+                    //stroke={linkStroke}
                     strokeWidth='1'
                     fill='none'
                   />
@@ -264,9 +274,10 @@ export default function ComponentMap({
                     <Group top={top} left={left} key={key} className='rect'>
                       {node.depth === 0 && (
                         <circle
+                          className='compMapRoot'
                           r={25} // increase from 12 to 25 to improve visibility
-                          fill="url('#links-gradient')"
-                          stroke='#F00008' // changing to red #F00008 to increase readability with sharper contrast
+                          fill="url('#root-gradient')"
+                          //stroke={rootStroke}
                           onClick={() => {
                             dispatch(toggleExpanded(node.data));
                             hideTooltip();
@@ -278,16 +289,19 @@ export default function ComponentMap({
                        and sets it relative position to other parent nodes of the same level. */}
                       {node.depth !== 0 && (
                         <rect
+                          className={node.children ? 'compMapParent' : 'compMapChild'}
                           height={height}
                           width={width}
                           y={-height / 2}
                           x={-width / 2}
-                          fill={node.children ? '#161521' : '#62d6fb'}
-                          stroke={
-                            node.data.isExpanded && node.data.children.length > 0
-                              ? '#F00008'
-                              : '#4D4D4D'
-                          }
+                          fill="url('#parent-gradient')"
+                          //color={'#ff0000'}
+                          //fill={node.children ? nodeParentFill : nodeChildFill}
+                          //stroke={
+                          //   node.data.isExpanded && node.data.children.length > 0
+                          //     ? nodeParentStroke
+                          //     : nodeChildStroke
+                          // }
                           strokeWidth={1.5}
                           strokeOpacity='1'
                           rx={node.children ? 4 : 10}
@@ -333,12 +347,19 @@ export default function ComponentMap({
 
                       {/* Display text inside of each component node */}
                       <text
+                        className={
+                          node.depth === 0
+                            ? 'compMapRootText'
+                            : node.children
+                            ? 'compMapParentText'
+                            : 'compMapChildText'
+                        }
                         dy='.33em'
-                        fontSize={10}
+                        fontSize='20px'
                         fontFamily='Roboto'
                         textAnchor='middle'
                         style={{ pointerEvents: 'none' }}
-                        fill={node.depth === 0 ? '#161521' : node.children ? 'white' : '#161521'}
+                        //fill={node.depth === 0 ? '#161521' : node.children ? 'white' : '#161521'}
                       >
                         {node.data.name}
                       </text>

src/app/components/StateRoute/ComponentMap/LinkControls.tsx

@@ -3,13 +3,13 @@ import React from 'react';
 import { LinkControlProps, ControlStyles, DropDownStyle, Node } from '../../../FrontendTypes';
 // Font size of the Controls label and Dropdowns
 const controlStyles: ControlStyles = {
-  fontSize: '16px',
+  //fontSize: '16px',
   padding: '10px',
 };
 
 const dropDownStyle: DropDownStyle = {
   margin: '0.5em',
-  fontSize: '16px',
+  //fontSize: '16px',
   fontFamily: 'Roboto, sans-serif',
   borderRadius: '4px',
   borderStyle: 'solid',
@@ -49,13 +49,14 @@ export default function LinkControls({
   collectNodes(snapShots);
 
   return (
-    <div style={controlStyles}>
+    <div className="comp-map-options" style={controlStyles}>
       {' '}
       {/* Controls for the layout selection */}
       <label>Layout:</label>
       &nbsp;{' '}
       {/* This is a non-breaking space - Prevents an automatic line break at this position */}
       <select
+        className="comp-map-dropdown"
         onClick={(e) => e.stopPropagation()}
         onChange={(e) => setLayout(e.target.value)}
         // value={layout}

src/app/components/StateRoute/History.tsx

@@ -195,6 +195,8 @@ function History(props: Record<string, unknown>): JSX.Element {
       .enter()
       .append('path')
       .attr('class', 'link')
+      .attr('stroke', '#161617')
+      .attr('fill', 'none')
       .attr(
         //defines the path attribute (d) for each link (edge) between nodes, using a Bézier curve (C) to connect the source node's coordinates (d.x, d.y) to the midpoint between the source and target nodes and then to the target node's coordinates (d.parent.x, d.parent.y)
         'd',
@@ -293,7 +295,7 @@ function History(props: Record<string, unknown>): JSX.Element {
       .append('circle')
       .attr('fill', (d) => {
         if (d.data.index === currLocation.index) {
-          return 'red';
+          return '#284b63';
         }
         return d.color ? d.color : '#555';
       })
@@ -303,6 +305,7 @@ function History(props: Record<string, unknown>): JSX.Element {
       .append('text')
       .attr('dy', '0.31em')
       .attr('text-anchor', 'middle')
+      .attr('fill', 'white')
       .text((d) => `${d.data.name}.${d.data.branch}`)
       .clone(true)
       .lower()

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

@@ -89,10 +89,12 @@ const BarGraph = (props: BarGraphProps): JSX.Element => {
     nice: true,
   });
 
+  const LMcolorScale = ['#a0c1d6','#669bbc','#105377','#003049','#55a8ac','#3c6e71','#1c494b','#c1676d','#c1121f','#780000']
+
   const colorScale = scaleOrdinal<string>({
     // Gives each bar on the graph a color using schemeSet1 imported from D3
     domain: keys,
-    range: schemeSet1,
+    range: LMcolorScale,
   });
 
   // setting max dimensions and scale ranges
@@ -155,6 +157,7 @@ const BarGraph = (props: BarGraphProps): JSX.Element => {
         <form className='routesForm' id='routes-formcontrol'>
           <label id='routes-dropdown'>Select Route: </label>
           <select
+            className='performance-dropdown'
             labelId='demo-simple-select-label'
             id='routes-select'
             onChange={(e) => {
@@ -185,7 +188,7 @@ const BarGraph = (props: BarGraphProps): JSX.Element => {
         </form>
       </div>
       <svg ref={containerRef} width={width} height={height}>
-        <rect x={0} y={0} width={width} height={height} fill={background} rx={14} />
+        <rect className='perf-rect' x={0} y={0} width={width} height={height} rx={14} />
         <Grid
           top={margin.top}
           left={margin.left}

src/app/components/Tutorial.tsx

@@ -365,7 +365,7 @@ export default class Tutorial extends Component<TutorialProps, TutorialState> {
           type='button'
           onClick={() => startIntro()}
         >
-          <HelpOutlineIcon sx={{ pr: 1 }} /> Tutorial
+          <HelpOutlineIcon className="button-icon" sx={{ pr: 1 }} /> Tutorial
         </Button>
       </>
     );

src/app/components/WebMetrics.tsx

@@ -49,7 +49,7 @@ const radialGraph = (props) => {
             },
           },
           track: {
-            background: '#fff',
+            background: '#161617',
             strokeWidth: '3%',
             margin: 0, // margin is in pixels
             dropShadow: {
@@ -66,12 +66,12 @@ const radialGraph = (props) => {
             name: {
               offsetY: -10,
               show: true,
-              color: '#fff',
+              color: '#161617',
               fontSize: '24px',
             },
             value: {
               formatter: props.formatted,
-              color: '#fff',
+              color: '#3c6e71',
               fontSize: '16px',
               show: true,
             },

src/app/components/theme.ts

@@ -1,11 +1,14 @@
 import { createTheme } from '@mui/material/styles';
 const theme = createTheme({
+  // typography: {
+  //   fontSize: 2,
+  // },
   palette: {
     primary: {
-      main: '#b2f7a1',
+      main: '#3c6e71',
     },
     secondary: {
-      main: '#BF6DD2',
+      main: '#3c6e71',
     },
   },
   components: {