Merge branch 'staging' of github.com:Network-Goods/impact-evaluator-t…

…ool into staging
Network-Goods · Aug 18, 2023 · eddf753 · eddf753
2 parents 55ebe7e + daa9448
commit eddf753
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 41 deletions.
diff --git a/src/components/voting/Voting.tsx b/src/components/voting/Voting.tsx
@@ -11,10 +11,7 @@ import { useVotingStore } from "./VotingStore";
 import { useUserProfileStore } from "src/lib/UserProfileStore";
 import Link from "next/link";
 import LoadingSpinner from "../shared/LoadingSpinner";
-
-const VotingCreditCounter = dynamic(() => import("./VotingCreditCounter"), {
-  ssr: false,
-});
+import VotingCreditCounter from "./VotingCreditCounter";
 
 export default function Voting() {
   const [openModal, setOpenModal] = useState(false);

diff --git a/src/components/voting/VotingCreditCounter.tsx b/src/components/voting/VotingCreditCounter.tsx
@@ -10,46 +10,22 @@ type VotingCreditCounterProps = {
 };
 
 export default function VotingCreditCounter({ handleReset, credits, allocatedCredits }: VotingCreditCounterProps) {
-  const div = useRef<HTMLDivElement>(null);
-  const { width } = useWindowDimensions();
-
-  useLayoutEffect(() => {
-    if ((width && width < 1024) || !div.current) return;
-    const divAnimate = div.current.getBoundingClientRect().top - 97.44;
-    const divLeftSide = div.current.getBoundingClientRect().left;
-    const onScroll = () => {
-      if (!div.current) return;
-      if (divAnimate < window.scrollY) {
-        div.current.style.position = "fixed";
-        div.current.style.top = "73.44px";
-        div.current.style.left = divLeftSide + "px";
-      } else {
-        div.current.style.position = "relative";
-        div.current.style.top = "auto";
-        div.current.style.left = "auto";
-      }
-    };
-    window.addEventListener("scroll", onScroll);
-    return () => window.removeEventListener("scroll", onScroll);
-  }, [width]);
   return (
     <div className="lg:relative lg:min-w-[263px]">
-      <div ref={div}>
-        <div className="rounded-lg bg-white border border-gray p-12 mt-4 lg:mt-6 lg:ml-6 text-center">
-          <SmallTitle text="VOICE CREDITS" />
-          <div className="text-4xl mt-2 min-w-[141.08px]">
-            <span className="font-semibold">{credits}</span>/{allocatedCredits}
-          </div>
-          <button
-            className={`transition-colors duration-200 ease-in-out transform  outline-none focus:outline-none flex flex-row items-center justify-center rounded-md font-semibold mx-auto border border-blue hover:bg-white focus:bg-white text-blue text-lg px-4 py-2 mt-5`}
-            onClick={() => handleReset()}
-          >
-            <span className="mr-3">
-              <Reset className="fill-blue w-4 h-4" />
-            </span>
-            <span>Reset</span>
-          </button>
+      <div className="rounded-lg bg-white border border-gray p-12 mt-4 lg:mt-6 lg:ml-6 text-center sticky top-[104px]">
+        <SmallTitle text="VOICE CREDITS" />
+        <div className="text-4xl mt-2 min-w-[141.08px]">
+          <span className="font-semibold">{credits}</span>/{allocatedCredits}
         </div>
+        <button
+          className={`transition-colors duration-200 ease-in-out transform  outline-none focus:outline-none flex flex-row items-center justify-center rounded-md font-semibold mx-auto border border-blue hover:bg-white focus:bg-white text-blue text-lg px-4 py-2 mt-5`}
+          onClick={() => handleReset()}
+        >
+          <span className="mr-3">
+            <Reset className="fill-blue w-4 h-4" />
+          </span>
+          <span>Reset</span>
+        </button>
       </div>
     </div>
   );