Vision Refactor

app/vision/page.tsx

@@ -50,7 +50,6 @@ export default function VisionPage() {
   } | null>(null);
   const [jitsiUrl, setJitsiUrl] = useState<string | null>(null);
   const [scheduledMeetings, setScheduledMeetings] = useState<ScheduledMeeting[]>([]);
-  const [showCalendar, setShowCalendar] = useState(false);
   const [showMeetingDialog, setShowMeetingDialog] = useState(false);
   const [selectedDate, setSelectedDate] = useState<Date | undefined>(new Date());
   const [meetingForm, setMeetingForm] = useState<{
@@ -371,24 +370,13 @@ export default function VisionPage() {
           {/* Calendar Section */}
           <div className="mb-8">
             <div className="bg-white rounded-lg border border-gray-200 p-4">
-              <div className="flex items-center justify-between mb-4">
-                <div className="flex items-center gap-2">
+              <div className="flex items-center gap-2 mb-4">
                 <Calendar className="h-5 w-5 text-purple-600" />
                 <h2 className="text-xl font-semibold text-gray-900">
                   Calendrier des réunions
                 </h2>
               </div>
-                <Button
-                  variant="outline"
-                  size="sm"
-                  onClick={() => setShowCalendar(!showCalendar)}
-                  className="flex items-center gap-2"
-                >
-                  {showCalendar ? "Masquer" : "Afficher"} le calendrier
-                </Button>
-              </div>
               
-              {showCalendar && (
               <div className="flex flex-col lg:flex-row gap-6">
                 <div className="flex-1">
                   <CalendarComponent
@@ -396,6 +384,9 @@ export default function VisionPage() {
                     selected={selectedDate}
                     onSelect={setSelectedDate}
                     className="rounded-md border"
+                    classNames={{
+                      day: "h-9 w-9 p-0 font-normal border border-gray-200 bg-white aria-selected:bg-blue-600 aria-selected:text-white",
+                    }}
                     modifiers={{
                       hasMeeting: (date) => {
                         if (!date) return false;
@@ -454,7 +445,6 @@ export default function VisionPage() {
                   )}
                 </div>
               </div>
-              )}
             </div>
           </div>
 
@@ -622,7 +612,7 @@ export default function VisionPage() {
                 value={meetingForm.title}
                 onChange={(e) => setMeetingForm({ ...meetingForm, title: e.target.value })}
                 placeholder={`Réunion ${meetingForm.type === "group" ? "du groupe" : "de la mission"}`}
-                className="mt-1"
+                className="mt-1 bg-black text-white border-gray-700 placeholder-gray-400"
               />
             </div>
             <div>
@@ -632,7 +622,7 @@ export default function VisionPage() {
                 type="date"
                 value={meetingForm.date}
                 onChange={(e) => setMeetingForm({ ...meetingForm, date: e.target.value })}
-                className="mt-1"
+                className="mt-1 bg-black text-white border-gray-700"
                 required
               />
             </div>
@@ -643,7 +633,7 @@ export default function VisionPage() {
                 type="time"
                 value={meetingForm.time}
                 onChange={(e) => setMeetingForm({ ...meetingForm, time: e.target.value })}
-                className="mt-1"
+                className="mt-1 bg-black text-white border-gray-700"
                 required
               />
             </div>
@@ -655,7 +645,6 @@ export default function VisionPage() {
           </div>
           <DialogFooter>
             <Button
-              variant="outline"
               onClick={() => {
                 setShowMeetingDialog(false);
                 setMeetingForm({
@@ -667,6 +656,7 @@ export default function VisionPage() {
                   title: "",
                 });
               }}
+              className="bg-black text-white hover:bg-gray-900 border border-black"
             >
               Annuler
             </Button>