From 043033075bf3bda0686c6831fce9f2cb7d99a765 Mon Sep 17 00:00:00 2001
From: Pierre-Louis Guhur <pierre-louis.guhur@laposte.net>
Date: Wed, 4 Jan 2023 19:23:03 +0100
Subject: [PATCH] fix: ballot

---
 components/PatternedBackground.tsx |   8 +-
 components/WaitingBallot.tsx       | 139 +++++++++++++++--------------
 pages/vote/[pid]/[[...tid]].tsx    |   5 +-
 services/routes.ts                 |   2 +-
 styles/scss/_homePage.scss         |   2 +-
 5 files changed, 79 insertions(+), 77 deletions(-)

diff --git a/components/PatternedBackground.tsx b/components/PatternedBackground.tsx
index b2a1570..3cce881 100644
--- a/components/PatternedBackground.tsx
+++ b/components/PatternedBackground.tsx
@@ -1,5 +1,3 @@
-
-
-export default ({children}) => {
-  return <div className="waiting position-absolute w-100">{children}</div>
-}
+export default ({ children }) => {
+  return <div className="waiting min-vh-100 min-vw-100">{children}</div>;
+};
diff --git a/components/WaitingBallot.tsx b/components/WaitingBallot.tsx
index 618ae3b..64cff9c 100644
--- a/components/WaitingBallot.tsx
+++ b/components/WaitingBallot.tsx
@@ -31,9 +31,16 @@ const ButtonResults = ({ election }) => {
   if (!election.hideResults || isEnded(election.date_end)) {
     return (
       <Link href={getUrl(RouteTypes.RESULTS, router, election.ref)}>
-        <Button className="" icon={faArrowRight} position="right">
-          {t('vote.go-to-results')}
-        </Button>
+        <div className="w-100 d-grid">
+          <Button
+            color="light"
+            className="text-center border border-3 border-dark"
+            icon={faArrowRight}
+            position="right"
+          >
+            {t('vote.go-to-results')}
+          </Button>
+        </div>
       </Link>
     );
   } else {
@@ -99,13 +106,18 @@ const Thanks = () => {
   );
 };
 
-interface InfoInterface extends WaitingBallotInterface {
-  display: string;
-}
-
-const Info = ({ ballot, error, display }: InfoInterface) => {
+const Info = ({ ballot, error }: WaitingBallotInterface) => {
   const { t } = useTranslation();
 
+  const [ballotProperties, setBallot] = useState<CSSProperties>({
+    display: 'none',
+  });
+
+  useEffect(() => {
+    setTimeout(() => {
+      setBallot({ display: 'grid' });
+    }, 4500);
+  }, []);
   if (!ballot) return null;
 
   if (error) {
@@ -115,28 +127,27 @@ const Info = ({ ballot, error, display }: InfoInterface) => {
   return (
     <div
       style={{
-        display: display,
+        display: ballotProperties.display,
         transition: 'display 2s',
       }}
+      className="d-flex flex-column align-items-center"
     >
-      <div className="d-flex flex-column align-items-center">
+      <div>
         <h4 className="text-center">{t('vote.success-ballot')}</h4>
-
         <ButtonResults election={ballot.election} />
-        <Container>
-          <Row className="m-4 row-cols-1 row-cols-md-2 gx-4 justify-content-between">
-            <DiscoverMajorityJudgment />
-            <SupportBetterVote />
-          </Row>
-        </Container>
-        <Thanks />
-        <Share />
       </div>
+
+      <Container className="d-flex my-4 gap-4">
+        <DiscoverMajorityJudgment />
+        <SupportBetterVote />
+      </Container>
+      <Thanks />
+      <Share />
     </div>
   );
 };
 
-export default ({ ballot, error }: WaitingBallotInterface) => {
+const AnimationBallot = () => {
   const [_, dispatch] = useAppContext();
 
   const [urneProperties, setUrne] = useState<CSSProperties>({
@@ -153,9 +164,6 @@ export default ({ ballot, error }: WaitingBallotInterface) => {
   const [urneContainerProperties, setUrneContainer] = useState<CSSProperties>({
     height: '100vh',
   });
-  const [ballotProperties, setBallot] = useState<CSSProperties>({
-    display: 'none',
-  });
 
   useEffect(() => {
     dispatch({ type: AppTypes.FULLPAGE, value: true });
@@ -166,27 +174,26 @@ export default ({ ballot, error }: WaitingBallotInterface) => {
       height: 300,
     }));
 
-    const timer = setTimeout(() => {
+    setTimeout(() => {
       setStar((star) => ({
         ...star,
         width: 150,
         height: 150,
-        marginLeft: 150,
+        marginLeft: -150,
         marginBottom: 300,
       }));
     }, 1000);
 
-    const timer2 = setTimeout(() => {
-      // setBallot({display: "block"});
+    setTimeout(() => {
       setUrneContainer((urneContainer) => ({
         ...urneContainer,
-        height: '50vh',
+        height: 250,
       }));
       setStar((star) => ({
         ...star,
         width: 100,
         height: 100,
-        marginLeft: 100,
+        marginLeft: -100,
         marginBottom: 200,
       }));
       setUrne((urne) => ({
@@ -195,53 +202,49 @@ export default ({ ballot, error }: WaitingBallotInterface) => {
         height: 200,
       }));
     }, 3000);
-
-    const timer3 = setTimeout(() => {
-      setBallot({ display: 'grid' });
-    }, 4500);
-
-    return () => {
-      clearTimeout(timer);
-      clearTimeout(timer2);
-      clearTimeout(timer3);
-    };
   }, []);
 
   return (
-    <Container className="d-flex h-100 w-100 align-items-center flex-column">
+    <div
+      style={{
+        transition: 'width 2s, height 2s',
+        height: urneContainerProperties.height,
+      }}
+      className="mt-5 flex-fill d-flex align-items-center justify-content-center"
+    >
       <div
+        className="position-relative"
         style={{
-          transition: 'width 2s, height 2s',
-          height: urneContainerProperties.height,
+          transition: 'width 2s, height 2s, margin-bottom 2s',
+          zIndex: 2,
+          marginTop: urneProperties.marginBottom,
+          height: urneProperties.height,
+          width: urneProperties.width,
         }}
-        className="d-flex align-items-center"
       >
-        <div
-          className="position-relative"
-          style={{
-            transition: 'width 2s, height 2s, margin-bottom 2s',
-            zIndex: 2,
-            marginTop: urneProperties.marginBottom,
-            height: urneProperties.height,
-            width: urneProperties.width,
-          }}
-        >
-          <Image src={urne} alt="urne" fill={true} />
-        </div>
-        <div
-          className="position-absolute"
-          style={{
-            transition: 'width 2s, height 2s, margin-left 2s, margin-bottom 2s',
-            marginLeft: starProperties.marginLeft,
-            marginBottom: starProperties.marginBottom,
-            height: starProperties.height,
-            width: starProperties.width,
-          }}
-        >
-          <Image src={star} fill={true} alt="urne" />
-        </div>
+        <Image src={urne} alt="urne" fill={true} />
+      </div>
+      <div
+        className="position-relative"
+        style={{
+          transition: 'width 2s, height 2s, margin-left 2s, margin-bottom 2s',
+          marginLeft: starProperties.marginLeft,
+          marginBottom: starProperties.marginBottom,
+          height: starProperties.height,
+          width: starProperties.width,
+        }}
+      >
+        <Image src={star} fill={true} alt="urne" />
       </div>
-      <Info ballot={ballot} error={error} display={ballotProperties.display} />
+    </div>
+  );
+};
+
+export default ({ ballot, error }: WaitingBallotInterface) => {
+  return (
+    <Container className="d-flex min-vh-100 min-vw-100 align-items-between justify-content-center flex-column pb-5">
+      <AnimationBallot />
+      <Info ballot={ballot} error={error} />
     </Container>
   );
 };
diff --git a/pages/vote/[pid]/[[...tid]].tsx b/pages/vote/[pid]/[[...tid]].tsx
index 6570a49..069c3cd 100644
--- a/pages/vote/[pid]/[[...tid]].tsx
+++ b/pages/vote/[pid]/[[...tid]].tsx
@@ -11,6 +11,7 @@ import Logo from '@components/Logo';
 import { getUrl, RouteTypes } from '@services/routes';
 import { faArrowRight } from '@fortawesome/free-solid-svg-icons';
 import { displayRef, getLocaleShort } from '@services/utils';
+import { MAJORITY_JUDGMENT_LINK } from '@services/constants';
 
 export async function getServerSideProps({ query: { pid, tid }, locale }) {
   return {
@@ -63,7 +64,7 @@ const GoToBallotConfirmDesktop = ({ electionRef, token }) => {
             <p>{t('home.noAds')}</p>
           </Row>
           <Row>
-            <Link href="https://mieuxvoter.fr/le-jugement-majoritaire">
+            <Link href={MAJORITY_JUDGMENT_LINK}>
               <Button color="black" outline={true} className="mt-2 mb-5">
                 {t('common.about-mj')}
               </Button>
@@ -109,7 +110,7 @@ const GoToBallotConfirmMobile = ({ electionRef, token }) => {
           <p>{t('home.noAds')}</p>
         </Row>
         <Row>
-          <Link href="https://mieuxvoter.fr/le-jugement-majoritaire">
+          <Link href={MAJORITY_JUDGMENT_LINK}>
             <Button className="btn-black mt-2 mb-5">
               {t('common.about-mj')}
             </Button>
diff --git a/services/routes.ts b/services/routes.ts
index db57538..39ad9b5 100644
--- a/services/routes.ts
+++ b/services/routes.ts
@@ -27,7 +27,7 @@ export const getUrl = (
       const path = `/${locale}/${type}/${displayRef(ref)}/${token}`;
       return new URL(path, getWindowUrl());
     }
-    const path = `/${locale}/${type}/${ref}`;
+    const path = `/${locale}/${type}/${displayRef(ref)}`;
     return new URL(path, getWindowUrl());
   }
   const path = `/${locale}/${type}`;
diff --git a/styles/scss/_homePage.scss b/styles/scss/_homePage.scss
index 8b01be7..b61ea37 100644
--- a/styles/scss/_homePage.scss
+++ b/styles/scss/_homePage.scss
@@ -93,7 +93,7 @@ $desktop: 1680px;
   width: 100%;
   text-align: center;
   justify-content: center;
-  margin-top: 20%;
+  margin-top: 3em;
 }
 .sharing p {
   margin-right: 15px;