From ce2ad201510b1e8ba6f3671b8bc8dcbbc7362863 Mon Sep 17 00:00:00 2001
From: "ildar.timerbaev" <dkildar@gmail.com>
Date: Fri, 29 Mar 2024 23:20:17 +0600
Subject: [PATCH] Vote 2.1: Fixed min/max, styling and layout

---
 .../decks/columns/helpers/_helpers.scss       |  5 +++
 .../components/entry-vote-btn/index.tsx       |  6 ++-
 src/common/features/ui/input/input-vote.tsx   | 38 +++++++++++++++++--
 3 files changed, 44 insertions(+), 5 deletions(-)

diff --git a/src/common/components/decks/columns/helpers/_helpers.scss b/src/common/components/decks/columns/helpers/_helpers.scss
index b32161607a8..12ca96a7382 100644
--- a/src/common/components/decks/columns/helpers/_helpers.scss
+++ b/src/common/components/decks/columns/helpers/_helpers.scss
@@ -34,6 +34,11 @@
       .estimated {
         grid-area: price;
         text-align: left;
+        position: absolute;
+        top: 1.5rem;
+        right: 7.5rem;
+        z-index: 20;
+        font-size: .675rem;
       }
 
       .percentage {
diff --git a/src/common/components/entry-vote-btn/index.tsx b/src/common/components/entry-vote-btn/index.tsx
index 0acdc6a9540..b9705696864 100644
--- a/src/common/components/entry-vote-btn/index.tsx
+++ b/src/common/components/entry-vote-btn/index.tsx
@@ -374,7 +374,11 @@ export class VoteDialog extends Component<VoteDialogProps, VoteDialogState> {
                 <FormattedCurrency {...this.props} value={this.estimate(downSliderVal)} fixAt={3} />
               </div>
               <div className="slider slider-down">
-                <InputVote value={downSliderVal} setValue={(x) => this.downSliderChanged(x)} />
+                <InputVote
+                  mode="negative"
+                  value={downSliderVal}
+                  setValue={(x) => this.downSliderChanged(x)}
+                />
               </div>
               <div className="space" />
               <div className="percentage" />
diff --git a/src/common/features/ui/input/input-vote.tsx b/src/common/features/ui/input/input-vote.tsx
index 5c33d049694..f0b72cfffc3 100644
--- a/src/common/features/ui/input/input-vote.tsx
+++ b/src/common/features/ui/input/input-vote.tsx
@@ -1,13 +1,22 @@
 import { Input } from "@ui/input/form-controls/input";
-import React, { MouseEvent, PropsWithChildren, TouchEvent, useRef, useState } from "react";
+import React, {
+  MouseEvent,
+  PropsWithChildren,
+  TouchEvent,
+  useEffect,
+  useRef,
+  useState
+} from "react";
 import { UilArrowDown, UilArrowUp } from "@iconscout/react-unicons";
 import "./_input-vote.scss";
 import { InputGroup } from "@ui/input/input-group";
 import useInterval from "react-use/lib/useInterval";
+import { classNameObject } from "../../../helper/class-name-object";
 
 interface Props {
   value: number;
   setValue: (v: number) => void;
+  mode?: "positive" | "negative";
 }
 
 function ArrowButton({ children, onClick }: PropsWithChildren<{ onClick: () => void }>) {
@@ -29,12 +38,22 @@ function ArrowButton({ children, onClick }: PropsWithChildren<{ onClick: () => v
   );
 }
 
-export function InputVote({ value, setValue }: Props) {
+export function InputVote({ value, setValue, mode = "positive" }: Props) {
   const mouseDownInitiatedRef = useRef(false);
 
   const [startPosition, setStartPosition] = useState(0);
   const [originalValue, setOriginalValue] = useState(0);
 
+  useEffect(() => {
+    if (value < 0) {
+      setValue(0);
+    } else if (value > 100) {
+      setValue(100);
+    } else {
+      setValue(value);
+    }
+  }, [value]);
+
   const onTouchMove = (e: TouchEvent) => {
     const touch = e.touches.item(0);
     if (touch) {
@@ -69,11 +88,22 @@ export function InputVote({ value, setValue }: Props) {
       onMouseUp={(e) => (mouseDownInitiatedRef.current = false)}
     >
       <InputGroup append="%" className="relative z-10">
-        <Input type="number" step="0.1" value={value} onChange={(e) => setValue(+e.target.value)} />
+        <Input
+          min={0}
+          max={100}
+          type="number"
+          step="0.1"
+          value={value}
+          onChange={(e) => setValue(+e.target.value)}
+        />
       </InputGroup>
 
       <div
-        className="absolute bg-blue-dark-sky bg-opacity-25 top-[1px] left-[1px] bottom-[1px]"
+        className={classNameObject({
+          "absolute bg-opacity-25 top-[1px] left-[1px] bottom-[1px]": true,
+          "bg-blue-dark-sky": mode === "positive",
+          "bg-red": mode === "negative"
+        })}
         style={{
           width: `${value * 0.86}%`
         }}