From 63db9983bca498e5d6ce3e29a305423a6d1c63a4 Mon Sep 17 00:00:00 2001
From: Yannick Le Duc <y@le-duc.com>
Date: Mon, 25 Aug 2025 16:44:29 +0200
Subject: [PATCH] fine tune la page de vote

---
 .../[id]/vote/[participantId]/page.tsx        | 63 ++++++++++---------
 src/app/globals.css                           |  2 +
 2 files changed, 37 insertions(+), 28 deletions(-)

diff --git a/src/app/campaigns/[id]/vote/[participantId]/page.tsx b/src/app/campaigns/[id]/vote/[participantId]/page.tsx
index c7903ae..55d6cf3 100644
--- a/src/app/campaigns/[id]/vote/[participantId]/page.tsx
+++ b/src/app/campaigns/[id]/vote/[participantId]/page.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { useState, useEffect } from 'react';
-import { useParams } from 'next/navigation';
+import { useParams, useRouter } from 'next/navigation';
 import Link from 'next/link';
 import { Campaign, Proposition, Participant, Vote, PropositionWithVote } from '@/types';
 import { campaignService, participantService, propositionService, voteService } from '@/lib/services';
@@ -11,6 +11,7 @@ export const dynamic = 'force-dynamic';
 
 export default function PublicVotePage() {
   const params = useParams();
+  const router = useRouter();
   const campaignId = params.id as string;
   const participantId = params.participantId as string;
   
@@ -210,12 +211,12 @@ export default function PublicVotePage() {
             <p className="mt-2 text-sm text-gray-600">
               Votre vote a été enregistré avec succès. Vous pouvez revenir modifier vos choix tant que la campagne est en cours.
             </p>
-            <Link
-              href="/"
+            <button
+              onClick={() => window.location.reload()}
               className="mt-4 inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700"
             >
-              Retour à l'accueil
-            </Link>
+              Retour à mon vote
+            </button>
           </div>
         </div>
       </div>
@@ -232,18 +233,9 @@ export default function PublicVotePage() {
         <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
           <div className="flex items-center justify-between">
             <div className="flex items-center space-x-4">
-              <Link
-                href="/"
-                className="inline-flex items-center text-sm text-indigo-600 hover:text-indigo-500"
-              >
-                <svg className="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 19l-7-7m0 0l7-7m-7 7h18" />
-                </svg>
-                Retour
-              </Link>
               <div>
                 <h1 className="text-lg font-semibold text-gray-900">Vote - {campaign?.title}</h1>
-                <p className="text-sm text-gray-600">
+                <p className="text-lg font-bold text-indigo-600">
                   {participant?.first_name} {participant?.last_name}
                 </p>
               </div>
@@ -337,26 +329,41 @@ export default function PublicVotePage() {
                         />
                         
                         {/* Marqueurs des paliers */}
-                        <div className="flex justify-between mt-3 px-2">
-                          <div className="text-center">
+                        <div className="relative mt-3 mb-16" style={{ marginLeft: '12px', marginRight: '12px' }}>
+                          {/* Marqueur 0€ */}
+                          <div className="absolute text-center" style={{ left: '0%', transform: 'translateX(-12px)' }}>
                             <div className="w-3 h-3 bg-gray-400 rounded-full mx-auto mb-2"></div>
                             <span className="text-xs text-gray-600 font-medium">0€</span>
                           </div>
-                          {spendingTiers.map((tier, index) => (
-                            <div key={tier} className="text-center">
-                              <div className="w-3 h-3 bg-indigo-500 rounded-full mx-auto mb-2"></div>
-                              <span className="text-xs text-gray-600 font-medium">{tier}€</span>
-                            </div>
-                          ))}
+                          
+                          {/* Marqueurs des paliers */}
+                          {spendingTiers.map((tier, index) => {
+                            const position = ((index + 1) / spendingTiers.length) * 100;
+                            return (
+                              <div 
+                                key={tier} 
+                                className="absolute text-center" 
+                                style={{ 
+                                  left: `${position}%`,
+                                  transform: 'translateX(-12px)'
+                                }}
+                              >
+                                <div className="w-3 h-3 bg-indigo-500 rounded-full mx-auto mb-2"></div>
+                                <span className="text-xs text-gray-600 font-medium">{tier}€</span>
+                              </div>
+                            );
+                          })}
                         </div>
                       </div>
                       
                       {/* Valeur sélectionnée */}
-                      <div className="text-center">
-                        <span className="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-indigo-100 text-indigo-800">
-                          Vote sélectionné : {localVotes[proposition.id] || 0}€
-                        </span>
-                      </div>
+                      {(localVotes[proposition.id] && localVotes[proposition.id] > 0) && (
+                        <div className="text-center mt-12">
+                          <span className="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-indigo-100 text-indigo-800">
+                            Vote sélectionné : {localVotes[proposition.id]}€
+                          </span>
+                        </div>
+                      )}
                     </div>
                   </div>
                 </div>
diff --git a/src/app/globals.css b/src/app/globals.css
index 37e4e12..66a4683 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -74,6 +74,7 @@
   border: 2px solid #ffffff;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
   transition: all 0.2s ease;
+  margin-top: -8px; /* Centre le thumb verticalement sur la track */
 }
 
 .slider::-webkit-slider-thumb:hover {
@@ -100,6 +101,7 @@
   border: 2px solid #ffffff;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
   transition: all 0.2s ease;
+  margin-top: -8px; /* Centre le thumb verticalement sur la track */
 }
 
 .slider::-moz-range-thumb:hover {