From 5036f298423ac2e00a8d23d4118de05a03d9b3a9 Mon Sep 17 00:00:00 2001
From: alma <alma@governance-labs.org>
Date: Tue, 6 May 2025 13:32:46 +0200
Subject: [PATCH] missions ui

---
 app/missions/page.tsx | 81 +++++++++++++++++++++----------------------
 1 file changed, 39 insertions(+), 42 deletions(-)

diff --git a/app/missions/page.tsx b/app/missions/page.tsx
index 4446a80c..7166d138 100644
--- a/app/missions/page.tsx
+++ b/app/missions/page.tsx
@@ -200,23 +200,23 @@ export default function MissionsPage() {
                 const niveauColor = getNiveauBadgeColor(mission.niveau);
                 
                 return (
-                  <div key={mission.id} className="bg-white shadow-sm hover:shadow-md transition-shadow duration-200 border border-gray-200 overflow-hidden h-full rounded-lg flex flex-col">
+                  <div key={mission.id} className="bg-white shadow-md hover:shadow-lg transition-all duration-200 border border-gray-100 overflow-hidden h-full rounded-lg flex flex-col">
                     {/* Card Header with Name and Level */}
-                    <div className="px-5 pt-4 pb-3 flex justify-between items-center border-b border-gray-100">
-                      <h2 className="text-base font-medium text-gray-900 line-clamp-2 flex-1">{mission.name}</h2>
-                      <span className={`ml-2 flex-shrink-0 text-sm font-bold px-2.5 py-1.5 rounded-md ${niveauColor}`}>
+                    <div className="px-6 pt-5 pb-4 flex justify-between items-center">
+                      <h2 className="text-lg font-semibold text-gray-800 line-clamp-2 flex-1 pr-3">{mission.name}</h2>
+                      <span className={`ml-2 flex-shrink-0 text-sm font-bold px-3 py-1.5 rounded-full ${niveauColor}`}>
                         {getNiveauLabel(mission.niveau)}
                       </span>
                     </div>
                     
                     {/* Centered Logo */}
-                    <div className="flex justify-center items-center p-6 flex-grow">
-                      <div className="w-40 h-40 relative">
+                    <div className="flex justify-center items-center px-6 pt-2 pb-6 flex-grow">
+                      <div className="w-40 h-40 relative shadow-sm rounded-md overflow-hidden">
                         {mission.logo ? (
                           <img 
                             src={mission.logo || ''} 
                             alt={mission.name}
-                            className="w-full h-full object-cover rounded-md border border-gray-200"
+                            className="w-full h-full object-cover"
                             onError={(e) => {
                               console.log("Logo failed to load:", mission.logo);
                               console.log("Full URL attempted:", mission.logo);
@@ -231,54 +231,51 @@ export default function MissionsPage() {
                           />
                         ) : null}
                         <div 
-                          className={`logo-fallback w-full h-full flex items-center justify-center bg-gray-100 rounded-md border border-gray-200 text-gray-500 text-3xl font-medium ${mission.logo ? 'hidden' : ''}`}
+                          className={`logo-fallback w-full h-full flex items-center justify-center bg-gradient-to-br from-gray-50 to-gray-200 text-gray-600 text-3xl font-medium ${mission.logo ? 'hidden' : ''}`}
                         >
                           {mission.name.slice(0, 2).toUpperCase()}
                         </div>
                       </div>
                     </div>
                       
-                    {/* Card Content - Only Services section */}
-                    <div className="px-5 pb-3">
-                      {mission.services && mission.services.length > 0 && (
-                        <div>
-                          <span className="text-sm font-medium text-gray-700 block mb-1">Services:</span>
-                          <div className="flex flex-wrap gap-1.5">
-                            {mission.services.map(service => (
-                              <span key={service} className="bg-blue-50 text-blue-700 px-2 py-1 rounded-md text-xs font-medium">
-                                {service}
-                              </span>
-                            ))}
-                          </div>
+                    {/* ODD scope icon - centered with nice styling */}
+                    {oddInfo.number && (
+                      <div className="flex justify-center mb-4">
+                        <div className="flex items-center justify-center p-2 rounded-full bg-white shadow-md border border-gray-100">
+                          <img 
+                            src={oddInfo.iconPath} 
+                            alt={oddInfo.label}
+                            className="w-12 h-12" 
+                            onError={(e) => {
+                              // Fallback if image fails to load
+                              (e.target as HTMLImageElement).style.display = 'none';
+                            }}
+                          />
                         </div>
-                      )}
-                      
-                      {/* ODD scope icon - moved here and enlarged */}
-                      {oddInfo.number && (
-                        <div className="flex justify-center mt-4">
-                          <div className="flex items-center justify-center bg-gray-100 p-2 rounded-md">
-                            <img 
-                              src={oddInfo.iconPath} 
-                              alt={oddInfo.label}
-                              className="w-10 h-10" 
-                              onError={(e) => {
-                                // Fallback if image fails to load
-                                (e.target as HTMLImageElement).style.display = 'none';
-                              }}
-                            />
-                          </div>
+                      </div>
+                    )}
+                    
+                    {/* Services section */}
+                    {mission.services && mission.services.length > 0 && (
+                      <div className="px-6 pb-4">
+                        <div className="flex flex-wrap gap-2 justify-center">
+                          {mission.services.map(service => (
+                            <span key={service} className="bg-blue-50 text-blue-700 px-3 py-1.5 rounded-md text-xs font-medium border border-blue-100">
+                              {service}
+                            </span>
+                          ))}
                         </div>
-                      )}
-                    </div>
+                      </div>
+                    )}
                       
                     {/* Card Footer */}
-                    <div className="mt-auto px-5 py-3 border-t border-gray-100 bg-gray-50 flex justify-between items-center">
-                      <span className="text-xs text-gray-500">
-                        Créée le {formatDate(mission.createdAt)}
+                    <div className="mt-auto px-6 py-4 border-t border-gray-100 bg-gray-50 flex justify-between items-center">
+                      <span className="text-xs text-gray-500 font-medium">
+                        {formatDate(mission.createdAt)}
                       </span>
                       
                       <Link href={`/missions/${mission.id}`}>
-                        <Button className="bg-black hover:bg-gray-800 text-white text-xs px-3 py-1 h-7 rounded-md">
+                        <Button className="bg-blue-600 hover:bg-blue-700 text-white text-xs px-4 py-2 h-8 rounded-md shadow-sm">
                           Voir détails
                         </Button>
                       </Link>