From d054b615b129634f815e93f90c6712834e97686a Mon Sep 17 00:00:00 2001
From: "ildar.timerbaev" <dkildar@gmail.com>
Date: Sun, 24 Mar 2024 22:39:05 +0600
Subject: [PATCH 1/6] Vote 2.1: Added input type of voting

---
 .../comment/__snapshots__/index.spec.tsx.snap |  6 +-
 .../__snapshots__/index.spec.tsx.snap         |  5 ++
 .../decks/columns/helpers/_helpers.scss       | 18 ----
 .../__snapshots__/index.spec.tsx.snap         | 89 ++++++++++++-------
 .../components/entry-vote-btn/index.tsx       | 16 ++--
 .../__snapshots__/index.spec.tsx.snap         |  3 +
 src/common/features/ui/input/_input-vote.scss | 18 ++++
 src/common/features/ui/input/index.ts         |  1 +
 src/common/features/ui/input/input-vote.tsx   | 39 ++++++++
 9 files changed, 130 insertions(+), 65 deletions(-)
 create mode 100644 src/common/features/ui/input/_input-vote.scss
 create mode 100644 src/common/features/ui/input/input-vote.tsx

diff --git a/src/common/components/comment/__snapshots__/index.spec.tsx.snap b/src/common/components/comment/__snapshots__/index.spec.tsx.snap
index f48ce3fbf62..aaa5cf63152 100644
--- a/src/common/components/comment/__snapshots__/index.spec.tsx.snap
+++ b/src/common/components/comment/__snapshots__/index.spec.tsx.snap
@@ -7,6 +7,7 @@ exports[`(1) Default render 1`] = `
 >
   <div
     className="editor-toolbar toolbar-sm"
+    id="editor-toolbar"
   >
     <div
       className="editor-tool"
@@ -219,7 +220,7 @@ exports[`(1) Default render 1`] = `
     </div>
     <div
       className="editor-tool"
-      id="editor-tool-emoji-picker-eb89ac22-2702-4311-9bb6-70a8f5e909f8"
+      id="editor-tool-emoji-picker-e5a42640-c9b5-428e-9d26-7a6fcab63b93"
       role="none"
       title="Emoji"
     >
@@ -372,6 +373,7 @@ exports[`(2) Cancellable, in progress 1`] = `
 >
   <div
     className="editor-toolbar toolbar-sm"
+    id="editor-toolbar"
   >
     <div
       className="editor-tool"
@@ -584,7 +586,7 @@ exports[`(2) Cancellable, in progress 1`] = `
     </div>
     <div
       className="editor-tool"
-      id="editor-tool-emoji-picker-01be801c-eb95-4ea8-b8cd-9a74f7a3ffac"
+      id="editor-tool-emoji-picker-4ccdcb56-8dff-4dfe-9898-dfdf7c3d7fc6"
       role="none"
       title="Emoji"
     >
diff --git a/src/common/components/community-selector/__snapshots__/index.spec.tsx.snap b/src/common/components/community-selector/__snapshots__/index.spec.tsx.snap
index d4d0648b17a..9b184fb47aa 100644
--- a/src/common/components/community-selector/__snapshots__/index.spec.tsx.snap
+++ b/src/common/components/community-selector/__snapshots__/index.spec.tsx.snap
@@ -4,6 +4,7 @@ exports[`(1) Empty tags. 1`] = `
 <a
   className="community-selector"
   href="#"
+  id="community-picker"
   onClick={[Function]}
 >
   <span
@@ -27,6 +28,7 @@ exports[`(2) Tags with no community 1`] = `
 <a
   className="community-selector"
   href="#"
+  id="community-picker"
   onClick={[Function]}
 >
   <span
@@ -59,6 +61,7 @@ exports[`(3) Tags with community. but in the end 1`] = `
 <a
   className="community-selector"
   href="#"
+  id="community-picker"
   onClick={[Function]}
 >
   <span
@@ -91,6 +94,7 @@ exports[`(4) Tags with community. 1`] = `
 <a
   className="community-selector"
   href="#"
+  id="community-picker"
   onClick={[Function]}
 >
   <span
@@ -123,6 +127,7 @@ exports[`(5) Tags with community. But not valid 1`] = `
 <a
   className="community-selector"
   href="#"
+  id="community-picker"
   onClick={[Function]}
 >
   <span
diff --git a/src/common/components/decks/columns/helpers/_helpers.scss b/src/common/components/decks/columns/helpers/_helpers.scss
index 145a8a751f3..b32161607a8 100644
--- a/src/common/components/decks/columns/helpers/_helpers.scss
+++ b/src/common/components/decks/columns/helpers/_helpers.scss
@@ -29,14 +29,6 @@
 
       .slider {
         grid-area: slider;
-
-        > div {
-          @apply w-full bg-gray-300 dark:bg-dark-default;
-
-          > div:first-child {
-            @apply bg-blue-dark-sky;
-          }
-        }
       }
 
       .estimated {
@@ -58,16 +50,6 @@
       }
     }
 
-    .voting-controls-down {
-      .slider {
-        > div {
-          > div:first-child {
-            @apply bg-red;
-          }
-        }
-      }
-    }
-
     @media screen and (max-width: 560px) {
       width: calc(100vw - 67px - 24px);
       left: -12px;
diff --git a/src/common/components/entry-vote-btn/__snapshots__/index.spec.tsx.snap b/src/common/components/entry-vote-btn/__snapshots__/index.spec.tsx.snap
index 25ae346ad6a..718e88faa75 100644
--- a/src/common/components/entry-vote-btn/__snapshots__/index.spec.tsx.snap
+++ b/src/common/components/entry-vote-btn/__snapshots__/index.spec.tsx.snap
@@ -41,50 +41,67 @@ Array [
     <div
       className="slider slider-up"
     >
-      <span
-        className="w-full flex [&>div]:w-full"
-        onClick={[Function]}
-        onKeyUp={[Function]}
-        tabIndex={0}
+      <div
+        className="ecency-vote-input relative"
       >
         <div
-          className="css-yvszuv-Slider"
-          onMouseDown={[Function]}
-          onTouchStart={[Function]}
+          className="ecency-input-group flex items-stretch w-full [&>input]:rounded-[0] [&>input:first-child]:rounded-l-full [&>input:last-child]:rounded-r-full [&>.ecency-input-group-part>button]:rounded-tl-none [&>.ecency-input-group-part>button]:rounded-bl-none [&>.ecency-input-group-part>button]:h-[2.75rem]"
         >
-          <div
-            className="css-3g5hux-Slider"
-            style={
-              Object {
-                "width": "100%",
-              }
-            }
+          <input
+            className="border-2 rounded-3xl py-2 px-3 w-full outline-none shadow-0 focus:border-gray-500 hover:border-gray-300 duration-300 dark:border-gray-700 dark:hover:border-gray-600 dark:bg-gray-800 aria-invalid:border-red"
+            onChange={[Function]}
+            step="0.1"
+            type="number"
+            value={100}
           />
           <div
+            className="ecency-input-group-part ecency-input-group-append border-l-0 rounded-tr-full rounded-br-full dark:border-gray-600 flex items-center justify-center px-2.5 border-2 bg-gray-200 dark:bg-gray-600"
             onClick={[Function]}
-            onMouseDown={[Function]}
-            onTouchStart={[Function]}
-            style={
-              Object {
-                "left": "100%",
-                "position": "absolute",
-                "top": "50%",
-                "transform": "translate(-50%, -50%)",
-              }
-            }
           >
-            <div
-              className="css-1ldz52l-Slider"
-            />
+            %
           </div>
         </div>
-      </span>
+        <div
+          className="absolute right-10 top-0 bottom-0 flex flex-col justify-center items-center"
+        >
+          <div
+            className="cursor-pointer h-4 flex items-center text-blue-dark-sky opacity-75 hover:opacity-100"
+            onClick={[Function]}
+          >
+            <svg
+              fill="currentColor"
+              height="24"
+              viewBox="0 0 24 24"
+              width="24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M17.71,11.29l-5-5a1,1,0,0,0-.33-.21,1,1,0,0,0-.76,0,1,1,0,0,0-.33.21l-5,5a1,1,0,0,0,1.42,1.42L11,9.41V17a1,1,0,0,0,2,0V9.41l3.29,3.3a1,1,0,0,0,1.42,0A1,1,0,0,0,17.71,11.29Z"
+              />
+            </svg>
+          </div>
+          <div
+            className="cursor-pointer h-4 flex items-center text-blue-dark-sky opacity-75 hover:opacity-100"
+            onClick={[Function]}
+          >
+            <svg
+              fill="currentColor"
+              height="24"
+              viewBox="0 0 24 24"
+              width="24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M17.71,11.29a1,1,0,0,0-1.42,0L13,14.59V7a1,1,0,0,0-2,0v7.59l-3.29-3.3a1,1,0,0,0-1.42,1.42l5,5a1,1,0,0,0,.33.21.94.94,0,0,0,.76,0,1,1,0,0,0,.33-.21l5-5A1,1,0,0,0,17.71,11.29Z"
+              />
+            </svg>
+          </div>
+        </div>
+      </div>
     </div>
     <div
       className="percentage"
-    >
-      100.0%
-    </div>
+    />
     <button
       className="cursor-pointer rounded-full duration-300 no-wrap border-[1.25px] border-solid flex items-center justify-center gap-2 border-red hover:border-red-020 focus:border-red-030 text-red hover:text-red-020 focus:text-red-030 h-[2rem] text-sm font-[500] px-2 text-xs w-8 !p-0"
       onClick={[Function]}
@@ -153,7 +170,9 @@ Array [
 `;
 
 exports[`(2) Btn - No active user (1) Render 1`] = `
-<div>
+<div
+  onClick={[Function]}
+>
   <div>
     <div
       className="entry-vote-btn"
@@ -186,7 +205,9 @@ exports[`(2) Btn - No active user (1) Render 1`] = `
 `;
 
 exports[`(3) Btn - Up voted (1) Render 1`] = `
-<div>
+<div
+  onClick={[Function]}
+>
   <div>
     <div
       className="entry-vote-btn"
diff --git a/src/common/components/entry-vote-btn/index.tsx b/src/common/components/entry-vote-btn/index.tsx
index 959ac5e691d..0acdc6a9540 100644
--- a/src/common/components/entry-vote-btn/index.tsx
+++ b/src/common/components/entry-vote-btn/index.tsx
@@ -27,7 +27,7 @@ import { _t } from "../../i18n";
 import "./_index.scss";
 import { useMappedStore } from "../../store/use-mapped-store";
 import { Button } from "@ui/button";
-import { ReactInputSliderWrapper } from "../../features/packages-helpers";
+import { InputVote } from "@ui/input";
 
 const setVoteValue = (
   type: "up" | "down" | "downPrevious" | "upPrevious",
@@ -324,12 +324,9 @@ export class VoteDialog extends Component<VoteDialogProps, VoteDialogState> {
               </div>
               <div className="space" />
               <div className="slider slider-up">
-                <ReactInputSliderWrapper
-                  value={upSliderVal}
-                  onChange={(x) => this.upSliderChanged(x)}
-                />
+                <InputVote value={upSliderVal} setValue={(x) => this.upSliderChanged(x)} />
               </div>
-              <div className="percentage">{`${upSliderVal && upSliderVal.toFixed(1)}%`}</div>
+              <div className="percentage" />
               <Button
                 noPadding={true}
                 className="w-8"
@@ -377,13 +374,10 @@ export class VoteDialog extends Component<VoteDialogProps, VoteDialogState> {
                 <FormattedCurrency {...this.props} value={this.estimate(downSliderVal)} fixAt={3} />
               </div>
               <div className="slider slider-down">
-                <ReactInputSliderWrapper
-                  value={downSliderVal}
-                  onChange={(x) => this.downSliderChanged(x)}
-                />
+                <InputVote value={downSliderVal} setValue={(x) => this.downSliderChanged(x)} />
               </div>
               <div className="space" />
-              <div className="percentage">{`${downSliderVal.toFixed(1)}%`}</div>
+              <div className="percentage" />
               <Button
                 noPadding={true}
                 className="w-8"
diff --git a/src/common/components/tag-selector/__snapshots__/index.spec.tsx.snap b/src/common/components/tag-selector/__snapshots__/index.spec.tsx.snap
index 8e7caee7799..e46322852c2 100644
--- a/src/common/components/tag-selector/__snapshots__/index.spec.tsx.snap
+++ b/src/common/components/tag-selector/__snapshots__/index.spec.tsx.snap
@@ -3,6 +3,7 @@
 exports[`(1) No tags 1`] = `
 <div
   className="tag-selector"
+  id="submit-tags-selector"
 >
   <div
     className="suggestion relative z-[11]"
@@ -32,6 +33,7 @@ exports[`(1) No tags 1`] = `
 exports[`(2) With tags 1`] = `
 <div
   className="tag-selector has-tags"
+  id="submit-tags-selector"
 >
   <div
     className="suggestion relative z-[11]"
@@ -115,6 +117,7 @@ exports[`(2) With tags 1`] = `
 exports[`(3) No tags with focus 1`] = `
 <div
   className="tag-selector"
+  id="submit-tags-selector"
 >
   <div
     className="suggestion relative z-[11]"
diff --git a/src/common/features/ui/input/_input-vote.scss b/src/common/features/ui/input/_input-vote.scss
new file mode 100644
index 00000000000..505aeece164
--- /dev/null
+++ b/src/common/features/ui/input/_input-vote.scss
@@ -0,0 +1,18 @@
+.entry-list-item .item-body .item-controls .ecency-vote-input svg {
+  max-width: 16px;
+  width: 16px;
+  height: 16px !important;
+  max-height: 16px;
+}
+
+.ecency-vote-input {
+  input::-webkit-outer-spin-button,
+  input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+
+  input[type=number] {
+    -moz-appearance: textfield;
+  }
+}
\ No newline at end of file
diff --git a/src/common/features/ui/input/index.ts b/src/common/features/ui/input/index.ts
index c55a778e1b0..a6ad43ed63d 100644
--- a/src/common/features/ui/input/index.ts
+++ b/src/common/features/ui/input/index.ts
@@ -2,3 +2,4 @@ export * from "./input-group";
 export * from "./input-group-copy-clipboard";
 export * from "./form-controls";
 export * from "./code-input";
+export * from "./input-vote";
diff --git a/src/common/features/ui/input/input-vote.tsx b/src/common/features/ui/input/input-vote.tsx
new file mode 100644
index 00000000000..990811ac977
--- /dev/null
+++ b/src/common/features/ui/input/input-vote.tsx
@@ -0,0 +1,39 @@
+import { Input } from "@ui/input/form-controls/input";
+import React, { PropsWithChildren } from "react";
+import { UilArrowDown, UilArrowUp } from "@iconscout/react-unicons";
+import "./_input-vote.scss";
+import { InputGroup } from "@ui/input/input-group";
+
+interface Props {
+  value: number;
+  setValue: (v: number) => void;
+}
+
+function ArrowButton({ children, onClick }: PropsWithChildren<{ onClick: () => void }>) {
+  return (
+    <div
+      className="cursor-pointer h-4 flex items-center text-blue-dark-sky opacity-75 hover:opacity-100"
+      onClick={onClick}
+    >
+      {children}
+    </div>
+  );
+}
+
+export function InputVote({ value, setValue }: Props) {
+  return (
+    <div className="ecency-vote-input relative">
+      <InputGroup append="%">
+        <Input type="number" step="0.1" value={value} onChange={(e) => setValue(+e.target.value)} />
+      </InputGroup>
+      <div className="absolute right-10 top-0 bottom-0 flex flex-col justify-center items-center">
+        <ArrowButton onClick={() => setValue(value + 0.1)}>
+          <UilArrowUp />
+        </ArrowButton>
+        <ArrowButton onClick={() => setValue(value - 0.1)}>
+          <UilArrowDown />
+        </ArrowButton>
+      </div>
+    </div>
+  );
+}

From dec32894f679a2f5ea2070230ccc734aa67865e3 Mon Sep 17 00:00:00 2001
From: "ildar.timerbaev" <dkildar@gmail.com>
Date: Tue, 26 Mar 2024 10:42:03 +0600
Subject: [PATCH 2/6] Vote 2.1: Added press and hold

---
 src/common/features/ui/input/input-vote.tsx | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/common/features/ui/input/input-vote.tsx b/src/common/features/ui/input/input-vote.tsx
index 990811ac977..641328e4d63 100644
--- a/src/common/features/ui/input/input-vote.tsx
+++ b/src/common/features/ui/input/input-vote.tsx
@@ -1,8 +1,9 @@
 import { Input } from "@ui/input/form-controls/input";
-import React, { PropsWithChildren } from "react";
+import React, { PropsWithChildren, 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";
 
 interface Props {
   value: number;
@@ -10,10 +11,18 @@ interface Props {
 }
 
 function ArrowButton({ children, onClick }: PropsWithChildren<{ onClick: () => void }>) {
+  const [fireInterval, setFireInterval] = useState(false);
+
+  useInterval(() => onClick(), fireInterval ? 300 : null);
+
   return (
     <div
       className="cursor-pointer h-4 flex items-center text-blue-dark-sky opacity-75 hover:opacity-100"
-      onClick={onClick}
+      onClick={() => {
+        setFireInterval(false);
+        onClick();
+      }}
+      onMouseDown={() => setFireInterval(true)}
     >
       {children}
     </div>

From 0da9e6e90f60e9cc8008f4a6f6a6c6dba6aa8de2 Mon Sep 17 00:00:00 2001
From: "ildar.timerbaev" <dkildar@gmail.com>
Date: Wed, 27 Mar 2024 23:16:01 +0600
Subject: [PATCH 3/6] Vote 2.1: Added slidering on mobile

---
 src/common/features/ui/input/_input-vote.scss |  1 +
 src/common/features/ui/input/input-vote.tsx   | 34 ++++++++++++++++---
 src/common/pages/onboard.tsx                  | 20 +++++++----
 3 files changed, 45 insertions(+), 10 deletions(-)

diff --git a/src/common/features/ui/input/_input-vote.scss b/src/common/features/ui/input/_input-vote.scss
index 505aeece164..4c24125b10f 100644
--- a/src/common/features/ui/input/_input-vote.scss
+++ b/src/common/features/ui/input/_input-vote.scss
@@ -13,6 +13,7 @@
   }
 
   input[type=number] {
+    background-color: transparent;
     -moz-appearance: textfield;
   }
 }
\ No newline at end of file
diff --git a/src/common/features/ui/input/input-vote.tsx b/src/common/features/ui/input/input-vote.tsx
index 641328e4d63..0e0b1123932 100644
--- a/src/common/features/ui/input/input-vote.tsx
+++ b/src/common/features/ui/input/input-vote.tsx
@@ -1,5 +1,5 @@
 import { Input } from "@ui/input/form-controls/input";
-import React, { PropsWithChildren, useState } from "react";
+import React, { PropsWithChildren, TouchEvent, useState } from "react";
 import { UilArrowDown, UilArrowUp } from "@iconscout/react-unicons";
 import "./_input-vote.scss";
 import { InputGroup } from "@ui/input/input-group";
@@ -30,12 +30,38 @@ function ArrowButton({ children, onClick }: PropsWithChildren<{ onClick: () => v
 }
 
 export function InputVote({ value, setValue }: Props) {
+  const [startPosition, setStartPosition] = useState(0);
+  const [originalValue, setOriginalValue] = useState(0);
+
+  const onTouchMove = (e: TouchEvent) => {
+    const touch = e.touches.item(0);
+    if (touch) {
+      const diff = Math.max(-200, Math.min(200, touch.clientX - startPosition));
+      setValue(Math.min(100, Math.max(0, originalValue + diff)));
+    }
+  };
+
   return (
-    <div className="ecency-vote-input relative">
-      <InputGroup append="%">
+    <div
+      className="ecency-vote-input rounded-full overflow-hidden relative"
+      onTouchStart={(e) => {
+        setStartPosition(e.touches.item(0)?.clientX);
+        setOriginalValue(value);
+      }}
+      onTouchMove={onTouchMove}
+    >
+      <InputGroup append="%" className="relative z-10">
         <Input type="number" step="0.1" value={value} onChange={(e) => setValue(+e.target.value)} />
       </InputGroup>
-      <div className="absolute right-10 top-0 bottom-0 flex flex-col justify-center items-center">
+
+      <div
+        className="absolute bg-blue-dark-sky bg-opacity-25 top-[1px] left-[1px] bottom-[1px]"
+        style={{
+          width: `${value * 0.86}%`
+        }}
+      />
+
+      <div className="absolute z-[11] right-10 top-0 bottom-0 flex flex-col justify-center items-center">
         <ArrowButton onClick={() => setValue(value + 0.1)}>
           <UilArrowUp />
         </ArrowButton>
diff --git a/src/common/pages/onboard.tsx b/src/common/pages/onboard.tsx
index dc400d501bb..4388c2b5987 100644
--- a/src/common/pages/onboard.tsx
+++ b/src/common/pages/onboard.tsx
@@ -717,8 +717,8 @@ const Onboard = (props: Props) => {
                       }}
                     />
                     <span className="onboard-blinking-text">
-                    {_t("onboard.rc-to-new-acc")} {decodedInfo && decodedInfo!.username}{" "}
-                    {_t("onboard.minimum-rc")}
+                      {_t("onboard.rc-to-new-acc")} {decodedInfo && decodedInfo!.username}{" "}
+                      {_t("onboard.minimum-rc")}
                     </span>
                   </div>
                   {isChecked && (
@@ -737,10 +737,18 @@ const Onboard = (props: Props) => {
                         />
                       </InputGroup>
                       <div className="operation-amount d-flex mt-3">
-                        <span className="operations">{_t("onboard.posts-comments")} {commentAmount} |</span>
-                        <span className="operations">{_t("onboard.votes")} {voteAmount} |</span>
-                        <span className="operations">{_t("onboard.transfers")} {transferAmount} |</span>
-                        <span className="operations">{_t("onboard.reblogs-follows")} {customJsonAmount}</span>
+                        <span className="operations">
+                          {_t("onboard.posts-comments")} {commentAmount} |
+                        </span>
+                        <span className="operations">
+                          {_t("onboard.votes")} {voteAmount} |
+                        </span>
+                        <span className="operations">
+                          {_t("onboard.transfers")} {transferAmount} |
+                        </span>
+                        <span className="operations">
+                          {_t("onboard.reblogs-follows")} {customJsonAmount}
+                        </span>
                       </div>
                     </div>
                   )}

From e721913bc9bd062444349200bbb1e4c8ebb6a439 Mon Sep 17 00:00:00 2001
From: "ildar.timerbaev" <dkildar@gmail.com>
Date: Fri, 29 Mar 2024 22:22:46 +0600
Subject: [PATCH 4/6] Vote 2.1: Added slidering by mouse

---
 src/common/features/ui/input/input-vote.tsx | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/src/common/features/ui/input/input-vote.tsx b/src/common/features/ui/input/input-vote.tsx
index 0e0b1123932..c2d52d1086a 100644
--- a/src/common/features/ui/input/input-vote.tsx
+++ b/src/common/features/ui/input/input-vote.tsx
@@ -1,5 +1,5 @@
 import { Input } from "@ui/input/form-controls/input";
-import React, { PropsWithChildren, TouchEvent, useState } from "react";
+import React, { MouseEvent, PropsWithChildren, TouchEvent, useRef, useState } from "react";
 import { UilArrowDown, UilArrowUp } from "@iconscout/react-unicons";
 import "./_input-vote.scss";
 import { InputGroup } from "@ui/input/input-group";
@@ -30,6 +30,8 @@ function ArrowButton({ children, onClick }: PropsWithChildren<{ onClick: () => v
 }
 
 export function InputVote({ value, setValue }: Props) {
+  const mouseDownInitiatedRef = useRef(false);
+
   const [startPosition, setStartPosition] = useState(0);
   const [originalValue, setOriginalValue] = useState(0);
 
@@ -41,6 +43,13 @@ export function InputVote({ value, setValue }: Props) {
     }
   };
 
+  const onMouseMove = (e: MouseEvent) => {
+    if (mouseDownInitiatedRef.current) {
+      const diff = Math.max(-200, Math.min(200, e.clientX - startPosition));
+      setValue(Math.min(100, Math.max(0, originalValue + diff)));
+    }
+  };
+
   return (
     <div
       className="ecency-vote-input rounded-full overflow-hidden relative"
@@ -49,6 +58,13 @@ export function InputVote({ value, setValue }: Props) {
         setOriginalValue(value);
       }}
       onTouchMove={onTouchMove}
+      onMouseDown={(e) => {
+        mouseDownInitiatedRef.current = true;
+        setStartPosition(e.clientX);
+        setOriginalValue(value);
+      }}
+      onMouseMove={onMouseMove}
+      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)} />

From e263252619bb61517a3e1674d298a730eca756e8 Mon Sep 17 00:00:00 2001
From: "ildar.timerbaev" <dkildar@gmail.com>
Date: Fri, 29 Mar 2024 22:35:41 +0600
Subject: [PATCH 5/6] Vote 2.1: Removed body scroll on input-vote scrolling

---
 src/common/features/ui/input/input-vote.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/common/features/ui/input/input-vote.tsx b/src/common/features/ui/input/input-vote.tsx
index c2d52d1086a..5c33d049694 100644
--- a/src/common/features/ui/input/input-vote.tsx
+++ b/src/common/features/ui/input/input-vote.tsx
@@ -56,8 +56,10 @@ export function InputVote({ value, setValue }: Props) {
       onTouchStart={(e) => {
         setStartPosition(e.touches.item(0)?.clientX);
         setOriginalValue(value);
+        document.body.classList.add("overflow-hidden");
       }}
       onTouchMove={onTouchMove}
+      onTouchEnd={() => document.body.classList.remove("overflow-hidden")}
       onMouseDown={(e) => {
         mouseDownInitiatedRef.current = true;
         setStartPosition(e.clientX);

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 6/6] 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}%`
         }}