From 52c720d520009f7842f9f0414fdb02f24c6a33fb Mon Sep 17 00:00:00 2001
From: alma <alma@governance-labs.org>
Date: Sun, 11 Jan 2026 21:57:19 +0100
Subject: [PATCH] Groups ui team ui

---
 app/missions/equipe/page.tsx | 39 +++++++++++++++++++-----------------
 1 file changed, 21 insertions(+), 18 deletions(-)

diff --git a/app/missions/equipe/page.tsx b/app/missions/equipe/page.tsx
index ef59f0a..d4dd4fa 100644
--- a/app/missions/equipe/page.tsx
+++ b/app/missions/equipe/page.tsx
@@ -490,7 +490,7 @@ export default function EquipePage() {
                 </DialogTrigger>
                 <DialogContent className="sm:max-w-[500px] bg-white">
                   <DialogHeader>
-                    <DialogTitle>Nouvel utilisateur</DialogTitle>
+                    <DialogTitle className="text-gray-900">Nouvel utilisateur</DialogTitle>
                   </DialogHeader>
                   <div className="space-y-4 py-4">
                     <div>
@@ -574,13 +574,14 @@ export default function EquipePage() {
                       <Button
                         variant="outline"
                         onClick={() => setNewUserDialogOpen(false)}
+                        className="border-gray-300 text-gray-700 hover:bg-gray-50"
                       >
                         Annuler
                       </Button>
                       <Button
                         onClick={createUser}
                         disabled={actionLoading === "new-user" || !newUserData.username || !newUserData.email || !newUserData.password}
-                        className="bg-blue-600 hover:bg-blue-700"
+                        className="bg-blue-600 hover:bg-blue-700 text-white"
                       >
                         {actionLoading === "new-user" ? (
                           <Loader2 className="h-4 w-4 animate-spin mr-2" />
@@ -949,16 +950,16 @@ export default function EquipePage() {
                   <div className="space-y-4">
                     {/* Current Groups */}
                     <div>
-                      <label className="text-xs font-medium text-gray-600 mb-2 block">
+                      <label className="text-xs font-medium text-gray-900 mb-2 block">
                         Groupes actuels ({userGroups.length})
                       </label>
-                      <div className="max-h-40 overflow-y-auto space-y-1">
+                      <div className="max-h-40 overflow-y-auto space-y-1 border rounded-md p-2 bg-white">
                         {userGroups.length === 0 ? (
-                          <p className="text-xs text-gray-400 py-2">Aucun groupe</p>
+                          <p className="text-xs text-gray-500 py-2 text-center">Aucun groupe</p>
                         ) : (
                           userGroups.map(group => (
-                            <div key={group.id} className="flex items-center justify-between p-2 bg-gray-50 rounded-md">
-                              <span className="text-sm text-gray-700 truncate">
+                            <div key={group.id} className="flex items-center justify-between p-2 bg-gray-50 rounded-md hover:bg-gray-100 transition-colors">
+                              <span className="text-sm text-gray-900 font-medium truncate flex-1">
                                 {group.name}
                               </span>
                               <Button
@@ -966,12 +967,13 @@ export default function EquipePage() {
                                 size="sm"
                                 onClick={() => removeUserFromGroup(group.id)}
                                 disabled={actionLoading === group.id}
-                                className="h-6 w-6 p-0 hover:text-red-600"
+                                className="h-7 w-7 p-0 hover:bg-red-50 hover:text-red-600 text-gray-500"
+                                title="Retirer du groupe"
                               >
                                 {actionLoading === group.id ? (
-                                  <Loader2 className="h-3 w-3 animate-spin" />
+                                  <Loader2 className="h-4 w-4 animate-spin" />
                                 ) : (
-                                  <X className="h-3 w-3" />
+                                  <X className="h-4 w-4" />
                                 )}
                               </Button>
                             </div>
@@ -982,16 +984,16 @@ export default function EquipePage() {
                     
                     {/* Available Groups */}
                     <div>
-                      <label className="text-xs font-medium text-gray-600 mb-2 block">
+                      <label className="text-xs font-medium text-gray-900 mb-2 block">
                         Ajouter à des groupes
                       </label>
-                      <div className="max-h-40 overflow-y-auto space-y-1">
+                      <div className="max-h-40 overflow-y-auto space-y-1 border rounded-md p-2 bg-white">
                         {availableGroups.length === 0 ? (
-                          <p className="text-xs text-gray-400 py-2">L'utilisateur est dans tous les groupes</p>
+                          <p className="text-xs text-gray-500 py-2 text-center">L'utilisateur est dans tous les groupes</p>
                         ) : (
                           availableGroups.map(group => (
-                            <div key={group.id} className="flex items-center justify-between p-2 bg-gray-50 rounded-md">
-                              <span className="text-sm text-gray-700 truncate">
+                            <div key={group.id} className="flex items-center justify-between p-2 bg-gray-50 rounded-md hover:bg-gray-100 transition-colors">
+                              <span className="text-sm text-gray-900 font-medium truncate flex-1">
                                 {group.name}
                               </span>
                               <Button
@@ -999,12 +1001,13 @@ export default function EquipePage() {
                                 size="sm"
                                 onClick={() => addUserToGroup(group.id)}
                                 disabled={actionLoading === group.id}
-                                className="h-6 w-6 p-0 hover:text-green-600"
+                                className="h-7 w-7 p-0 hover:bg-green-50 hover:text-green-600 text-gray-500"
+                                title="Ajouter au groupe"
                               >
                                 {actionLoading === group.id ? (
-                                  <Loader2 className="h-3 w-3 animate-spin" />
+                                  <Loader2 className="h-4 w-4 animate-spin" />
                                 ) : (
-                                  <Plus className="h-3 w-3" />
+                                  <Plus className="h-4 w-4" />
                                 )}
                               </Button>
                             </div>