From dd671fa01d5cd48e8b42d886797561d76136a367 Mon Sep 17 00:00:00 2001
From: Nikita <nikita.develops.work@gmail.com>
Date: Wed, 20 Nov 2024 18:32:29 +0200
Subject: [PATCH] fix(thecurve): remove +/- from slider picker, improve
 histogram layout

---
 .../forecast_maker/binary_slider.tsx          |  4 +++-
 .../curve_histogram/curve_histogram.tsx       | 20 +++++++++----------
 .../components/forecast_maker/index.tsx       |  1 +
 3 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/front_end/src/app/(main)/questions/[id]/components/forecast_maker/binary_slider.tsx b/front_end/src/app/(main)/questions/[id]/components/forecast_maker/binary_slider.tsx
index 2166e6a6e7..756a6204c7 100644
--- a/front_end/src/app/(main)/questions/[id]/components/forecast_maker/binary_slider.tsx
+++ b/front_end/src/app/(main)/questions/[id]/components/forecast_maker/binary_slider.tsx
@@ -23,6 +23,7 @@ type Props = {
   helperDisplay?: boolean;
   className?: string;
   styles?: Partial<Record<SemanticName, CSSProperties>>;
+  withArrowStep?: boolean;
 };
 
 const BinarySlider: FC<Props> = ({
@@ -35,6 +36,7 @@ const BinarySlider: FC<Props> = ({
   helperDisplay = false,
   className,
   styles,
+  withArrowStep = true,
 }) => {
   const inputDisplayValue = forecast ? forecast.toString() + "%" : "—";
   const [, setInputValue] = useState(inputDisplayValue);
@@ -87,7 +89,7 @@ const BinarySlider: FC<Props> = ({
           defaultValue={forecast ?? DEFAULT_SLIDER_VALUE}
           onChange={handleSliderForecastChange}
           step={1}
-          arrowStep={0.1}
+          arrowStep={withArrowStep ? 0.1 : undefined}
           shouldSyncWithDefault
           marks={
             communityForecast
diff --git a/front_end/src/app/(thecurve)/components/curve_histogram/curve_histogram.tsx b/front_end/src/app/(thecurve)/components/curve_histogram/curve_histogram.tsx
index 929e37727e..627739eb54 100644
--- a/front_end/src/app/(thecurve)/components/curve_histogram/curve_histogram.tsx
+++ b/front_end/src/app/(thecurve)/components/curve_histogram/curve_histogram.tsx
@@ -54,6 +54,16 @@ const CurveHistogram: FC<Props> = ({
         padding={{ top: 0, bottom: 25, left: 10, right: 10 }}
         height={height}
       >
+        <VictoryBar
+          data={histogramData}
+          style={{
+            data: {
+              fill: "light" + color,
+            },
+          }}
+          barRatio={1.7}
+          x={(d) => d.x + 0.5}
+        />
         <VictoryAxis
           tickValues={range(0, 101)}
           tickFormat={(x: number) => (x % 10 === 0 ? `${x}%` : "")}
@@ -65,16 +75,6 @@ const CurveHistogram: FC<Props> = ({
             grid: { stroke: "none" },
           }}
         />
-        <VictoryBar
-          data={histogramData}
-          style={{
-            data: {
-              fill: "light" + color,
-            },
-          }}
-          barRatio={1.7}
-          x={(d) => d.x + 0.5}
-        />
         {choiceOptions[0].forecast && (
           <VictoryScatter
             data={[{ y: 0, x: choiceOptions[0].forecast * 100 }]}
diff --git a/front_end/src/app/(thecurve)/components/forecast_maker/index.tsx b/front_end/src/app/(thecurve)/components/forecast_maker/index.tsx
index 04cc09ff49..6f4aa2a82e 100644
--- a/front_end/src/app/(thecurve)/components/forecast_maker/index.tsx
+++ b/front_end/src/app/(thecurve)/components/forecast_maker/index.tsx
@@ -120,6 +120,7 @@ const CurveForecastMaker: FC<Props> = ({
                 rail: { backgroundColor: "white", height: "3px" },
                 track: { backgroundColor: "white", height: "3px" },
               }}
+              withArrowStep={false}
             />
           </React.Fragment>
         ))}