Merge pull request #1568 from ecency/bugfix/voting-buttons

Fixed down-voting and error messages styles in entry voting
ecency · Mar 5, 2024 · f2d267f · f2d267f
2 parents 6c44d7e + 9081417
commit f2d267f
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 98 deletions.
diff --git a/src/common/components/comment/__snapshots__/index.spec.tsx.snap b/src/common/components/comment/__snapshots__/index.spec.tsx.snap
@@ -219,7 +219,7 @@ exports[`(1) Default render 1`] = `
     </div>
     <div
       className="editor-tool"
-      id="editor-tool-emoji-picker-2137a8b2-7697-4ab4-91d9-4a5203dcb738"
+      id="editor-tool-emoji-picker-074f17f0-0b9e-4c5f-ad68-6e462e23fb8b"
       role="none"
       title="Emoji"
     >
@@ -584,7 +584,7 @@ exports[`(2) Cancellable, in progress 1`] = `
     </div>
     <div
       className="editor-tool"
-      id="editor-tool-emoji-picker-d85947f8-110b-4884-987c-562e744cdc28"
+      id="editor-tool-emoji-picker-15c51e4e-8605-497a-87f3-ae6f7bca17a6"
       role="none"
       title="Emoji"
     >

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
@@ -42,102 +42,34 @@ Array [
       className="slider slider-up"
     >
       <div
-        style={
-          Object {
-            "height": "40px",
-            "paddingRight": "13px",
-          }
-        }
+        className="css-yvszuv-Slider"
+        onMouseDown={[Function]}
+        onTouchStart={[Function]}
       >
         <div
-          className="slide"
+          className="css-3g5hux-Slider"
+          style={
+            Object {
+              "width": "100%",
+            }
+          }
+        />
+        <div
+          onClick={[Function]}
           onMouseDown={[Function]}
-          onMouseUp={[Function]}
-          onTouchMove={[Function]}
           onTouchStart={[Function]}
+          style={
+            Object {
+              "left": "100%",
+              "position": "absolute",
+              "top": "50%",
+              "transform": "translate(-50%, -50%)",
+            }
+          }
         >
           <div
-            className="slide-background-line"
-          >
-            <div
-              className="slider-line"
-              style={
-                Object {
-                  "background": "#357ce6",
-                  "width": "100%",
-                  "zIndex": 100,
-                }
-              }
-            />
-            <span
-              className="slider-dot pointer-dot"
-              style={
-                Object {
-                  "background": "#357ce6",
-                  "left": "100%",
-                }
-              }
-            />
-            <div
-              className="dots-container"
-            >
-              <div
-                style={
-                  Object {
-                    "width": "25%",
-                  }
-                }
-              />
-              <div
-                style={
-                  Object {
-                    "width": "25%",
-                  }
-                }
-              >
-                <span
-                  className="slider-dot"
-                  style={
-                    Object {
-                      "background": "#357ce6",
-                    }
-                  }
-                />
-              </div>
-              <div
-                style={
-                  Object {
-                    "width": "25%",
-                  }
-                }
-              >
-                <span
-                  className="slider-dot"
-                  style={
-                    Object {
-                      "background": "#357ce6",
-                    }
-                  }
-                />
-              </div>
-              <div
-                style={
-                  Object {
-                    "width": "25%",
-                  }
-                }
-              >
-                <span
-                  className="slider-dot"
-                  style={
-                    Object {
-                      "background": "#357ce6",
-                    }
-                  }
-                />
-              </div>
-            </div>
-          </div>
+            className="css-1ldz52l-Slider"
+          />
         </div>
       </div>
     </div>

diff --git a/src/common/components/entry-vote-btn/_index.scss b/src/common/components/entry-vote-btn/_index.scss
@@ -40,6 +40,7 @@
   z-index: 2;
   left: -12px;
   top: -19px;
+  white-space: pre-wrap;
 
   @media screen and (max-width: 1700px) {
     width: 50vw;

diff --git a/src/common/components/entry-vote-btn/index.tsx b/src/common/components/entry-vote-btn/index.tsx
@@ -263,8 +263,9 @@ export class VoteDialog extends Component<VoteDialogProps, VoteDialogState> {
       dynamicProps,
       entry: { post_id }
     } = this.props;
-    const { downSliderVal, initialVoteValues } = this.state;
+    const { downSliderVal: downSliderAbsoluteVal, initialVoteValues } = this.state;
     const { downVoted } = this.props.isVoted();
+    const downSliderVal = downSliderAbsoluteVal * -1;
 
     if (!downVoted || (downVoted && initialVoteValues.down !== downSliderVal)) {
       const estimated = Number(this.estimate(downSliderVal).toFixed(3));
@@ -274,7 +275,7 @@ export class VoteDialog extends Component<VoteDialogProps, VoteDialogState> {
       setVoteValue("downPrevious", `${activeUser?.username!}-${post_id}`, downSliderVal);
       ls.set(
         this.props.isPostSlider ? "post_downSlider_value" : "comment_downSlider_value",
-        downSliderVal
+        downSliderAbsoluteVal
       );
     } else if (downVoted && initialVoteValues.down === downSliderVal) {
       this.setState({ wrongValueDown: true, wrongValueUp: false });

diff --git a/src/style/_mixins.scss b/src/style/_mixins.scss
@@ -400,6 +400,10 @@
 
     .btn-inner {
       @apply text-red-020-50;
+
+      svg {
+        transform: rotate(180deg);
+      }
     }
 
     &:hover,
@@ -410,10 +414,6 @@
         @apply text-white;
       }
     }
-
-    svg {
-      transform: rotate(180deg);
-    }
   }
 
   &.vote-btn-lg {