From 8dcc2d8ba17f6117f76a9f19226031736943ab91 Mon Sep 17 00:00:00 2001
From: alma <alma@governance-labs.org>
Date: Sun, 4 May 2025 23:58:15 +0200
Subject: [PATCH] missions

---
 app/missions/layout.tsx | 17 +++++---
 app/missions/page.tsx   | 93 ++++++++++++++++++-----------------------
 2 files changed, 51 insertions(+), 59 deletions(-)

diff --git a/app/missions/layout.tsx b/app/missions/layout.tsx
index f7ab68f5..9ee151b1 100644
--- a/app/missions/layout.tsx
+++ b/app/missions/layout.tsx
@@ -12,21 +12,26 @@ export default function MissionsLayout({
   const pathname = usePathname();
   
   return (
-    <main className="w-full h-screen bg-black">
+    <main className="w-full h-screen bg-white">
       <div className="w-full h-full px-4 pt-12 pb-4 flex">
-        {/* Sidebar */}
-        <div className="w-[234px] min-w-[234px] bg-white border-r border-gray-100 overflow-y-auto">
+        {/* Sidebar with light pink background */}
+        <div className="w-[234px] min-w-[234px] bg-pink-50 border-r border-gray-100 overflow-y-auto">
           <nav>
             <Link href="/missions" passHref>
-              <div className={`px-6 py-[10px] ${pathname === "/missions" ? "bg-gray-50" : ""} hover:bg-gray-50`}>
+              <div className={`px-6 py-[10px] ${pathname === "/missions" ? "bg-white" : ""} hover:bg-white`}>
                 <span className="text-sm font-normal text-gray-700">Mes Missions</span>
               </div>
             </Link>
+            <Link href="/missions/new" passHref>
+              <div className={`px-6 py-[10px] ${pathname === "/missions/new" ? "bg-white" : ""} hover:bg-white`}>
+                <span className="text-sm font-normal text-gray-700">Nouvelle Mission</span>
+              </div>
+            </Link>
           </nav>
         </div>
         
-        {/* Main content - matches artlab spacing */}
-        <div className="flex-1 overflow-auto">
+        {/* Main content - white background */}
+        <div className="flex-1 overflow-auto bg-white">
           {children}
         </div>
       </div>
diff --git a/app/missions/page.tsx b/app/missions/page.tsx
index bbe090c8..964ac153 100644
--- a/app/missions/page.tsx
+++ b/app/missions/page.tsx
@@ -1,10 +1,10 @@
 "use client";
 
 import { useState } from "react";
-import { Plus, Search } from "lucide-react";
-import { Button } from "@/components/ui/button";
+import { Search } from "lucide-react";
 import { Input } from "@/components/ui/input";
 import Link from "next/link";
+import { Button } from "@/components/ui/button";
 
 // Mock mission data until we implement the database
 const mockMissions = [
@@ -47,72 +47,59 @@ export default function MissionsPage() {
   );
   
   return (
-    <div className="flex flex-col h-full w-full">
-      <div className="flex justify-between items-center bg-black/30 py-[6px] px-4">
-        <h1 className="text-white text-xs font-normal">Gérez vos missions et opportunités de bénévolat</h1>
-        <div className="flex items-center gap-2">
+    <div className="flex flex-col h-full w-full bg-white">
+      <div className="bg-white border-b border-gray-100 py-2 px-4">
+        <div className="flex items-center justify-between">
+          <h1 className="text-gray-700 text-sm font-medium">Gérez vos missions et opportunités de bénévolat</h1>
           <div className="relative">
             <Search className="absolute left-2 top-1/2 transform -translate-y-1/2 h-3.5 w-3.5 text-gray-500" />
             <Input
               placeholder="Rechercher une mission..."
-              className="h-8 pl-7 pr-2 py-1 text-xs bg-white border-0 rounded-none w-48"
+              className="h-8 pl-7 pr-2 py-1 text-xs bg-white border-gray-200 rounded-sm w-48"
               value={searchTerm}
               onChange={(e) => setSearchTerm(e.target.value)}
             />
           </div>
-          <Link href="/missions/new">
-            <Button className="h-8 rounded-none bg-blue-600 hover:bg-blue-700 text-white px-3 py-0 text-xs">
-              <Plus className="h-3.5 w-3.5 mr-1" />
-              Nouvelle Mission
-            </Button>
-          </Link>
         </div>
       </div>
       
-      <div 
-        className="flex-1 bg-cover bg-center overflow-auto"
-        style={{
-          backgroundImage: "url('https://images.unsplash.com/photo-1483921020237-2ff51e8e4b22?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80')"
-        }}
-      >
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-0 p-0">
+      <div className="flex-1 overflow-auto bg-white p-4">
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
           {filteredMissions.map((mission, index) => (
-            <div key={mission.id} className="p-4">
-              <div className="bg-white shadow-md overflow-hidden h-full">
-                <div className="p-0">
-                  <div className="flex justify-between items-center px-4 pt-4 pb-2">
-                    <span className="bg-gray-100 px-2 py-1 text-xs rounded-sm font-normal text-gray-800">
-                      {mission.category}
-                    </span>
-                    <span className="text-xs text-gray-500 px-2 py-1 border border-gray-200 rounded-sm font-normal">
-                      {mission.duration}
-                    </span>
-                  </div>
+            <div key={mission.id} className="bg-white shadow-sm border border-gray-200 overflow-hidden h-full rounded-sm">
+              <div className="p-0">
+                <div className="flex justify-between items-center px-4 pt-4 pb-2">
+                  <span className="bg-gray-100 px-2 py-1 text-xs rounded-sm font-normal text-gray-800">
+                    {mission.category}
+                  </span>
+                  <span className="text-xs text-gray-500 px-2 py-1 border border-gray-200 rounded-sm font-normal">
+                    {mission.duration}
+                  </span>
+                </div>
+                
+                <div className="px-4 pb-4">
+                  <h2 className="text-base font-medium mb-2">{mission.title}</h2>
+                  <p className="text-sm text-gray-600 mb-4">Location: {mission.location}</p>
                   
-                  <div className="px-4 pb-4">
-                    <h2 className="text-base font-medium mb-2">{mission.title}</h2>
-                    <p className="text-sm text-gray-600 mb-4">Location: {mission.location}</p>
-                    
-                    <div className="flex flex-wrap gap-1 mb-4">
-                      {mission.skills.map(skill => (
-                        <span key={skill} className="bg-gray-100 text-gray-700 px-2 py-1 rounded-sm text-xs">
-                          {skill}
-                        </span>
-                      ))}
-                    </div>
-                  </div>
-                  
-                  <div className="flex justify-between items-center px-4 py-2 border-t border-gray-100">
-                    <span className="text-xs text-gray-500">
-                      Créée le {mission.createdAt.replace('2023-', '')}
-                    </span>
-                    <Link href={`/missions/${mission.id}`}>
-                      <Button className="bg-black text-white text-xs px-3 py-1 h-6 rounded-none">
-                        Voir détails
-                      </Button>
-                    </Link>
+                  <div className="flex flex-wrap gap-1 mb-4">
+                    {mission.skills.map(skill => (
+                      <span key={skill} className="bg-gray-100 text-gray-700 px-2 py-1 rounded-sm text-xs">
+                        {skill}
+                      </span>
+                    ))}
                   </div>
                 </div>
+                
+                <div className="flex justify-between items-center px-4 py-2 border-t border-gray-100">
+                  <span className="text-xs text-gray-500">
+                    Créée le {mission.createdAt.replace('2023-', '')}
+                  </span>
+                  <Link href={`/missions/${mission.id}`}>
+                    <Button className="bg-black text-white text-xs px-3 py-1 h-6 rounded-sm">
+                      Voir détails
+                    </Button>
+                  </Link>
+                </div>
               </div>
             </div>
           ))}