fix: fix header date, fix vote btn effects overflowing

src/Components/Portal/Portal.jsx

@@ -1,17 +1,17 @@
-import React from "react";
+import React, { useMemo } from "react";
 import ReactDOM from "react-dom";
 
-export const Portal = ({ children, className = "root-portal", el = "div" }) => {
-  const [container] = React.useState(document.createElement(el));
+const getContainer = (id) => {
+  const el = document.getElementById(id);
+  if (el) return el;
 
-  container.classList.add(className);
+  const newEl = document.createElement("div");
+  newEl.id = id;
+  document.body.appendChild(newEl);
+};
 
-  React.useEffect(() => {
-    document.body.appendChild(container);
-    return () => {
-      document.body.removeChild(container);
-    };
-  }, [container]);
+export const Portal = ({ children, id = "root-id" }) => {
+  const container = useMemo(() => getContainer(id), [id]);
 
   return ReactDOM.createPortal(children, container);
 };

src/Components/VoteButton/VoteButton.tsx

@@ -4,8 +4,9 @@ import { useAppSelector, usePressHolder } from 'src/utils/hooks'
 import { ComponentProps, useRef, useState } from 'react'
 import styles from './styles.module.scss'
 import { random, randomItem, numberFormatter } from 'src/utils/helperFunctions'
-import { useDebouncedCallback, useThrottledCallback } from '@react-hookz/web'
+import { useDebouncedCallback, useMountEffect, useThrottledCallback } from '@react-hookz/web'
 import { UnionToObjectKeys } from 'src/utils/types/utils'
+import { Portal } from '../Portal/Portal'
 
 
 
@@ -62,11 +63,10 @@ export default function VoteButton({
     const [incrementsCount, setIncrementsCount] = useState(0);
     const totalIncrementsCountRef = useRef(0)
     const currentIncrementsCountRef = useRef(0);
-    const [increments, setIncrements] = useState<Array<{ id: string, value: number }>>([])
+    const [increments, setIncrements] = useState<Array<{ id: string, value: number }>>([]);
+    const [btnBoundingRect, setBtnBoundingRect] = useState<DOMRect>()
 
     const isMobileScreen = useAppSelector(s => s.ui.isMobileScreen);
-
-
     const resetCounterOnRelease = resetCounterOnReleaseProp;
 
     const doVote = useDebouncedCallback(() => {
@@ -77,8 +77,6 @@ export default function VoteButton({
     }, [], 2000)
 
     const clickIncrement = () => {
-
-
         if (!disableShake)
             setBtnShakeClass(s => s === styles.clicked_2 ? styles.clicked_1 : styles.clicked_2)
 
@@ -154,6 +152,10 @@ export default function VoteButton({
                     currentIncrementsCountRef.current = 0, 150)
     }
 
+    useMountEffect(() => {
+        setBtnBoundingRect(btnContainerRef.current.getBoundingClientRect())
+    })
+
     return (
         <button
             onMouseDown={handlePressDown}
@@ -210,28 +212,39 @@ export default function VoteButton({
                     /><span className="align-middle w-[4ch]"> {numberFormatter(votes + voteCnt)}</span>
                 </div>
             </div>
-            {increments.map(increment => <span
-                key={increment.id}
-                className={styles.vote_counter}
-            >+{increment.value}</span>)}
 
-            <div className="relative z-50">
+            <Portal id='effects-container'>
+                <div
+                    style={btnBoundingRect && {
+                        position: 'absolute',
+                        top: btnBoundingRect.top + window.scrollY,
+                        left: btnBoundingRect.left + window.scrollX,
+                        width: btnBoundingRect.width,
+                        height: btnBoundingRect.height,
+                        pointerEvents: 'none'
+                    }}
 
-                {sparks.map(spark =>
-                    <div
-                        key={spark.id}
-                        className={styles.spark}
-                        style={{
-                            "--offsetX": spark.offsetX,
-                            "--offsetY": spark.offsetY,
-                            "--animationSpeed": spark.animationSpeed,
-                            "--scale": spark.scale,
-                            "animationName": spark.animation,
-                            "color": spark.color
-                        } as any}
-                    ><MdLocalFireDepartment className='' /></div>)
-                }
-            </div>
+                >
+                    {increments.map(increment => <span
+                        key={increment.id}
+                        className={styles.vote_counter}
+                    >+{increment.value}</span>)}
+                    {sparks.map(spark =>
+                        <div
+                            key={spark.id}
+                            className={styles.spark}
+                            style={{
+                                "--offsetX": spark.offsetX,
+                                "--offsetY": spark.offsetY,
+                                "--animationSpeed": spark.animationSpeed,
+                                "--scale": spark.scale,
+                                "animationName": spark.animation,
+                                "color": spark.color
+                            } as any}
+                        ><MdLocalFireDepartment className='' /></div>)
+                    }
+                </div>
+            </Portal>
             <div
                 className={styles.spark}
 

src/features/Posts/pages/PostDetailsPage/Components/PostActions/PostActions.tsx

@@ -48,6 +48,7 @@ export default function PostActions({ post }: Props) {
                 </li>
             </ul> */}
             <ul className="bg-white rounded-12 p-16 border flex justify-around md:flex-col gap-32 mt-32">
+                <VoteButton votes={post.votes_count} onVote={vote} direction='vertical' fillType="upDown" />
                 {actions.map((action, idx) => <li
                     key={idx}
                     className={`py-8 px-20 text-body5 flex flex-col justify-center items-center cursor-pointer rounded-8 
@@ -55,7 +56,6 @@ export default function PostActions({ post }: Props) {
                     <action.icon className={"text-body4 mb-8"}></action.icon>
                     <span>{action.value}</span>
                 </li>)}
-                <VoteButton votes={post.votes_count} onVote={vote} direction='vertical' fillType="upDown" />
             </ul>
         </div>
     )

src/features/Projects/Components/ProjectCardMini/ProjectCardMini.tsx

@@ -20,12 +20,12 @@ export default function ProjectCardMini({ project, onClick }: Props) {
 
     return (
         <div
-            className="py-16 select-none px-16 flex items-center gap-16 border-2 border-gray-100 rounded-16 hover:cursor-pointer bg-white hover:bg-gray-250"
+            className="py-16 select-none px-16 flex items-center gap-16 border-2 border-gray-100 rounded-16  bg-white hover:bg-gray-250"
             onKeyDown={e => e.key !== 'Enter' || onClick(project.id)}
             tabIndex={0}
         >
-            <img src={project.thumbnail_image} alt={project.title} onClick={() => onClick(project.id)} draggable="false" className="flex-shrink-0 w-64 h-64 bg-gray-200 border-0 rounded-full"></img>
-            <div className="justify-around items-start min-w-0 flex-1" onClick={() => onClick(project.id)}>
+            <img src={project.thumbnail_image} alt={project.title} onClick={() => onClick(project.id)} draggable="false" className="flex-shrink-0 w-64 h-64 bg-gray-200 border-0 rounded-full hover:cursor-pointer"></img>
+            <div className="justify-around items-start min-w-0 flex-1 hover:cursor-pointer" onClick={() => onClick(project.id)}>
                 <p className="text-body4 w-full font-bold overflow-ellipsis overflow-hidden whitespace-nowrap">{project.title}</p>
                 <p className="text-body5 text-gray-600 font-light my-[5px]">{project.category.title}</p>
                 {/* <span className="chip-small bg-warning-50 text-yellow-700 font-light text-body5 py-[3px] px-10"> <MdLocalFireDepartment className='inline-block text-fire transform text-body4 align-middle' /> {numberFormatter(project.votes_count)} </span> */}

src/features/Projects/pages/ExplorePage/Header/Header.tsx

@@ -20,7 +20,7 @@ const headerLinks = [
     title:
       <>
         <p className="text-body1 font-bolder text-white">Take part in BOLT🔩FUN’s Shock the Web 2 ⚡️</p>
-        <p className="text-body3 font-medium text-white mt-8">22nd - 28th March, 2022</p>
+        <p className="text-body3 font-medium text-white mt-8">16th - 19th June, 2022</p>
       </>,
     img: Assets.Images_ExploreHeader2,
     link: {