light mode added. More colors consolidated into _VariablesLM.scss file

leebology · leebology · commit 2eafd9456ea7 · 2024-01-07T04:23:11.000-05:00
diff --git a/src/app/components/StateRoute/ComponentMap/LinkControls.tsx b/src/app/components/StateRoute/ComponentMap/LinkControls.tsx
@@ -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}
diff --git a/src/app/components/StateRoute/History.tsx b/src/app/components/StateRoute/History.tsx
@@ -190,6 +190,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',
@@ -288,7 +290,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';
       })
@@ -298,6 +300,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()
diff --git a/src/app/components/StateRoute/PerformanceVisx/BarGraph.tsx b/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
@@ -186,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}
diff --git a/src/app/components/WebMetrics.tsx b/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,
             },
diff --git a/src/app/containers/ActionContainer.tsx b/src/app/containers/ActionContainer.tsx
@@ -196,8 +196,8 @@ function ActionContainer(props: ActionContainerProps): JSX.Element {
           <SwitchAppDropdown />
           <div className='action-component exclude'>
             <Button
+              className='clear-button'
               variant='contained'
-              className='empty-button'
               //style={{ backgroundColor: '#ff6569' }}
               onClick={() => {
                 dispatch(emptySnapshots()); // set slider back to zero, visually
diff --git a/src/app/containers/TravelContainer.tsx b/src/app/containers/TravelContainer.tsx
@@ -75,7 +75,7 @@ function TravelContainer(props: TravelContainerProps): JSX.Element {
       <Button
         className='play-button'
         variant='contained'
-        sx={{ height: 25, p: 0, mr: 1, ml: 1}}
+        sx={{ height: 25, p: 0, mr: 1, ml: 1 }}
         type='button'
         // data-testid, prop for testing in RTL
         data-testid='play-button-test'
diff --git a/src/app/styles/abstracts/_variablesLM.scss b/src/app/styles/abstracts/_variablesLM.scss
@@ -37,13 +37,19 @@ $tab-select-background: $primary-color;
 $tab-select-text: $light-text;
 $tab-dropdown-background: $background-color-weak;
 
-$launch-background: $background-color;
+$loader-background: $background-color;
+$loader-text: $dark-text;
+$loader-checks-border: $primary-color-strong;
+$launch-button: $primary-color-strong;
+$launch-button-hover: $primary-color;
+$launch-button-text: $light-text;
 
 $action-tab-background: $background-color;
-$action-clear-button: $primary-color;
-$action-clear-button-text: $background-color;
+//$action-clear-button: $primary-color; //currently being handled by mui theme.ts file
+//$action-clear-button-text: $background-color; //currently being handled by mui theme.ts file
 $route-bar: $primary-color-strong;
 $route-bar-text: $light-text;
+$indiv-action-input-bg: $background-color;
 $indiv-action-selected: $primary-color-strong;
 $indiv-action-selected-text: $light-text;
 $indiv-action-filler-text: $contrasting-color-weak;
@@ -53,7 +59,7 @@ $indiv-action-time-text: $light-text;
 $current: $contrasting-color-weak;
 $current-text: $light-text;
 $jump: $contrasting-color-weak;
-$jump-hover: $secondary-color;
+$jump-hover: $primary-color;
 $jump-text: $light-text;
 
 $header-background: $background-color;
@@ -70,7 +76,7 @@ $navbar-unselected-text: $dark-text;
 
 $state-background: $background-color-strong;
 
-$map-options-dropdown: $primary-color-strong;
+$map-options-dropdown: $primary-color;
 $map-options-label: $dark-text;
 $map-link: $contrasting-color;
 //root fill is currently a visx LinearGradient defined in ComponentMap.tsx
@@ -87,41 +93,57 @@ $map-child-text: $dark-text;
 
 $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;
 
-$history-node: $primary-color;
-$history-text: $light-text;
+$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
+//$history-text: $light-text;
 
+//web metrics colors are selected in WebMetrics.tsx (text color line 69)
 $web-circles: $contrasting-color;
 $web-text: $dark-text;
 
-$tree-key: $primary-color;
-$tree-expanded-key: $contrasting-color-weak;
-$tree-string: $primary-color-strong;
-$tree-boolean: $secondary-color;
-$tree-number: $secondary-color;
-$tree-other: $secondary-color;
+$tree-background: $background-color;
+//the following colors have not been adjusted 
+// $tree-key: $primary-color;
+// $tree-expanded-key: $contrasting-color-weak;
+// $tree-string: $primary-color-strong;
+// $tree-boolean: $secondary-color;
+// $tree-number: $secondary-color;
+// $tree-other: $secondary-color;
 
 $travel-background: $background-color;
 $travel-top-border: lighten($contrasting-color, 50%);
-$play-button: $primary-color;
-$play-button-text: $primary-strong-gradient;
+$play-button: $primary-strong-gradient;
+$play-button-text: $light-text;
 $slider-handle: $primary-strong-gradient;
 $slider-rail-left: $primary-color;
 $slider-rail-right: $background-color-weak;
 $scrub-button: $primary-strong-gradient;
 $scrub-icon: $light-text;
 $speed-dropdown: $primary-color-strong;
-$speed-dropdown-selected: $secondary-color;
 $speed-dropdown-text: $light-text;
+$speed-dropdown-expanded: lighten($primary-color-strong, 20%);
+$speed-dropdown-expanded-hover: $primary-color;
+$speed-dropdown-expanded-text: $light-text;
 
 $function-bar-background: $background-color;
 //outline color currently handled in mui theme.ts file
 $function-bar-button-outlines: $primary-color;
 $function-bar-text: $primary-color-strong;
 $function-bar-text-hover: $primary-color;
 $function-bar-text-highlight: $primary-color-strong;
+//icons
 $function-bar-icons: $primary-color-strong;
 
+//colors for pop-up window that opens when clicking the reconnect button
+$pop-up-window-background: $background-color;
+$pop-up-window-text: $dark-text;
+$reconnect-button: $primary-color-strong;
+$reconnect-button-text: $light-text;
+
 /// @type Color
 /// fiery-rose changed from ff6569 to F00008 globally to improve contrast
 $fiery-rose: #fd0011;
@@ -234,10 +256,15 @@ $highlight-color: rgba(224, 224, 224, 0.5) !default;
 $button-text-size: 16px;
 
 //https://coolors.co/780000-c1121f-f6d5bf-fdf0d5-003049-669bbc-a0c1d6
+//colors used in the performance tab bar graphs
 /// @type Color
 $color1: #780000;
 $color2: #c1121f;
-$color3: #fdf0d5;
-$color4: #003049;
-$color5: #669bbc;
-$color6: #a0c1d6;
+$color3: #c1676d;
+$color4: #55a8ac;
+$color5: #3c6e71;
+$color6: #1c494b;
+$color7: #003049;
+$color8: #105377;
+$color9: #669bbc;
+$color10: #a0c1d6;
diff --git a/src/app/styles/base/_base.scss b/src/app/styles/base/_base.scss
@@ -20,6 +20,11 @@ body {
   grid-area: actions;
   transition: 0.5s;
 }
+
+.perf-rect {
+  fill: $perf-background;
+}
+
 .state-container-container {
   grid-area: states;
 }
diff --git a/src/app/styles/components/_actionComponent.scss b/src/app/styles/components/_actionComponent.scss
@@ -15,6 +15,11 @@
   @extend %disable-highlight;
 }
 
+.clear-button {
+  background-color:#187924;
+  color:#187924;
+}
+
 .action-component-text {
   margin-bottom: 8px;
   color: $indiv-action-custom-text
diff --git a/src/app/styles/components/_buttons.scss b/src/app/styles/components/_buttons.scss
@@ -4,7 +4,7 @@
 .save-series-button {
   padding: 3px;
   outline: transparent;
-  color: white;
+  color: $performance-save-series-button-text;
   font-size: 16px;
   display: flex;
   justify-content: center;
@@ -16,7 +16,7 @@
   line-height: 1.5em;
   font: 400 16px 'Outfit', sans-serif;
   width: 120px;
-  background: $red-color-gradient;
+  background: $performance-save-series-button;
   height: 30px;
   position: absolute;
   right: 3rem;
@@ -65,6 +65,13 @@
   //background: #ff0000;
 }
 
+.clear-button {
+  background:#3256f1;
+  background-color: #050787;
+  color:#3256f1
+}
+
+
 .empty-button:hover {
   color: black;
   box-shadow: $box-shadow-red;
@@ -176,10 +183,10 @@
   cursor: pointer;
 }
 
-.pause-button {
-  color: #ff0000;
-  background-color: #ff0000;
-}
+// .pause-button {
+//   color: #ff0000;
+//   background-color: #ff0000;
+// }
 
 .import-button:hover,
 .howToUse-button:hover,
@@ -371,8 +378,8 @@ aside {
 .reconnect-button-pop-up {
   padding: 3px;
   outline: transparent;
-  background: $red-color-gradient; 
-  color: $text-color !important;
+  background-color: #050787; 
+  color: $reconnect-button-text !important;
   border: none;
   border-radius: 3px;
   cursor: pointer;
diff --git a/src/app/styles/components/_componentMap.scss b/src/app/styles/components/_componentMap.scss
@@ -2,6 +2,16 @@
   stroke: $map-link;
 }
 
+.comp-map-options {
+  color: $map-options-label;
+}
+
+.comp-map-dropdown {
+  background-color: #ff0000;
+  color: #ff0000;
+  background: #ff0000;
+}
+
 // .compMapParent {
 //   //fill: $map-parent-fill;
 //   //stroke: $map-parent-stroke;
diff --git a/src/app/styles/components/_jsonTree.scss b/src/app/styles/components/_jsonTree.scss
@@ -4,6 +4,6 @@
   margin: 10px;
   padding: 0;
   width: 900px;
-  background-color: $brand-color;
+  background-color: $tree-background;
   list-style: none;
 }
diff --git a/src/app/styles/components/d3graph.css b/src/app/styles/components/d3graph.css
@@ -23,7 +23,7 @@ body {
 }
 .link {
 	fill: none;
-	stroke: #fae6e4;
+	stroke: #161617;
 	stroke-opacity: 0.4;
 	stroke-width: 3px;
 }
diff --git a/src/app/styles/components/diff.css b/src/app/styles/components/diff.css
@@ -33,12 +33,12 @@ ul.jsondiffpatch-delta {
 .jsondiffpatch-deleted pre,
 .jsondiffpatch-modified .jsondiffpatch-left-value pre,
 .jsondiffpatch-textdiff-deleted {
-  background: #7E5C69;
+  background: #fccdda;
   text-decoration: line-through;
 }
 .jsondiffpatch-unchanged,
 .jsondiffpatch-movedestination {
-  color: white;
+  color: #f7f2f2;
 }
 .jsondiffpatch-unchanged,
 .jsondiffpatch-movedestination > .jsondiffpatch-value {
diff --git a/src/app/styles/layout/_actionContainer.scss b/src/app/styles/layout/_actionContainer.scss
@@ -5,9 +5,9 @@
 }
 
 .actionname {
-  background-color: inherit;
+  background-color: $indiv-action-input-bg;
   border: 1px solid $light-background-color;
-  color: #ffffff;
+  color: $indiv-action-custom-text;
 }
 
 #recordBtn {
diff --git a/src/app/styles/layout/_buttonsContainer.scss b/src/app/styles/layout/_buttonsContainer.scss
diff --git a/src/app/styles/layout/_errorContainer.scss b/src/app/styles/layout/_errorContainer.scss
diff --git a/src/app/styles/layout/_travelContainer.scss b/src/app/styles/layout/_travelContainer.scss

Original file line number	Diff line number	Diff line change
`@@ -20,6 +20,11 @@ body {`
`20`	`20`	`grid-area: actions;`
`21`	`21`	`transition: 0.5s;`
`22`	`22`	`}`
	`23`	`+`
	`24`	`+.perf-rect {`
	`25`	`+ fill: $perf-background;`
	`26`	`+}`
	`27`	`+`
`23`	`28`	`.state-container-container {`
`24`	`29`	`grid-area: states;`
`25`	`30`	`}`