diff --git a/app/src/components/icons/analysis.tsx b/app/src/components/icons/analysis.tsx index 1c48b25..001787e 100644 --- a/app/src/components/icons/analysis.tsx +++ b/app/src/components/icons/analysis.tsx @@ -11,8 +11,8 @@ export function ThroughputSummaryIcon() { @@ -24,9 +24,9 @@ export function ThroughputSummaryIcon() { width="33.6927" height="33.6927" filterUnits="userSpaceOnUse" - color-interpolation-filters="sRGB" + colorInterpolationFilters="sRGB" > - + - - - + - + - + - + { document.removeEventListener("mousemove", handleMouseMove); document.removeEventListener("mouseup", handleMouseUp); }; + // eslint-disable-next-line react-hooks/exhaustive-deps }, []); // Slider function ends @@ -310,25 +311,29 @@ const SimulationPlayer: React.FC = () => { - - - {speed.toFixed(1)}x - - + + + + {speed.toFixed(1)}x + + + + 4x - 4x @@ -369,6 +374,7 @@ const SimulationPlayer: React.FC = () => { {/* {subModule === "analysis" && ( */} + {subModule === "analysis" && ( @@ -376,6 +382,7 @@ const SimulationPlayer: React.FC = () => { + )} {/* )} */} > ); diff --git a/app/src/styles/components/simulation/analysis.scss b/app/src/styles/components/simulation/analysis.scss index 4e10bf4..70defeb 100644 --- a/app/src/styles/components/simulation/analysis.scss +++ b/app/src/styles/components/simulation/analysis.scss @@ -45,8 +45,7 @@ .sub-header { font-weight: 300; font-size: var(--font-size-tiny); - color: var(--text-color); - opacity: 0.8; + color: var(--text-button-color); } } @@ -98,6 +97,7 @@ .metrics-section { padding-top: 16px; + border-top: 1px solid var(--background-color-gray); .metric { display: flex; @@ -164,9 +164,6 @@ .footer-card { width: 100%; - background: var(--background-color-gray); - - border: 1px solid var(--border-color); background: var(--background-color); border-radius: 6px; padding: 8px; @@ -231,7 +228,6 @@ width: 100%; gap: 6px; padding-top: 3px; - .shift-wrapper { display: flex; align-items: center; @@ -275,11 +271,6 @@ } } - .roiSummary-container { - max-height: 60vh; - overflow-y: auto; - } - .roiSummary-wrapper { max-width: 470px; background-color: var(--background-color); @@ -300,19 +291,15 @@ border: 1px solid var(--border-color); .info { - opacity: 0.8; - span { font-size: var(--font-size-xlarge); &:first-child { color: #31c756; - opacity: 1; } &:last-child { color: var(--text-color); - opacity: 1; } } } @@ -363,8 +350,6 @@ &:last-child { align-items: center; - - } .metric-label { @@ -382,21 +367,13 @@ } } - .metric-item.net-profit { - .metric-label { - - span { - color: #21ad50; - } - } - } - .metric-wrapper { display: flex; gap: 6px; .metric-item { - border-radius: #{$border-radius-small}; + padding: 8px; + border-radius: #{$border-radius-large}; background: var(--background-color); border: 1px solid var(--border-color); } @@ -461,7 +438,6 @@ padding: 8px; text-align: left; border: 1px solid var(--border-color); - font-size: var(--font-size-small); } th { @@ -502,24 +478,6 @@ color: #488ef6; } } - - .placeHolder-wrapper { - display: flex; - flex-direction: column; - gap: 6px; - padding-top: 6px; - - .placeHolder { - height: 11px; - width: 100%; - background: #EAEAEA; - border-radius: 4px; - - &:nth-child(2) { - width: 50%; - } - } - } } } diff --git a/app/src/styles/components/simulation/simulation.scss b/app/src/styles/components/simulation/simulation.scss index 9b6c93d..37a87a8 100644 --- a/app/src/styles/components/simulation/simulation.scss +++ b/app/src/styles/components/simulation/simulation.scss @@ -144,14 +144,21 @@ &::after { content: ""; - background-color: #e5e5ea; + background: var(--background-color-solid); + opacity: 0.4; position: absolute; top: 50%; transform: translate(0, -50%); width: 100%; height: 3px; } - + .custom-slider-wrapper { + height: 100%; + width: 100%; + padding: 0 26px; + background: transparent; + border-radius: #{$border-radius-large}; + } .custom-slider { height: 100%; width: 100%; @@ -185,11 +192,13 @@ .marker { position: absolute; - background-color: var(--text-disabled); + background: var(--background-color-solid); + opacity: 0.6; width: 2px; height: 12px; border-radius: 1px; top: 8px; + z-index: 1; } .marker.marker-10 {