UI improvements

frontend/src/TimeSelector.css

@@ -1,26 +1,39 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+  margin: 1rem 0; 
+}
+
+nav {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+  gap: 1rem;
+}
+
 button {
-    margin: 0.5rem;
-    padding: 0.8rem 1.5rem;
-    font-weight: bold;
-    font-size: 1rem;
-    cursor: pointer;
-    border-radius: 8px;
-  }
-  
-  button:hover {
-    background-color: #0077cc;
-    color: white;
-  }
-  
-  button:focus {
-    outline: none;
-    background-color: #005fa3;
-    color: white;
-  }
-  
-  nav {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
-    gap: 1rem;
-  }
-  
+  margin: 0.5rem;
+  padding: 0.8rem 1.5rem;
+  font-weight: bold;
+  font-size: 1rem;
+  cursor: pointer;
+  border-radius: 8px;
+}
+
+button:hover {
+  background-color: #0077cc;
+  color: white;
+}
+
+button:focus {
+  outline: none;
+  background-color: #005fa3;
+  color: white;
+}
+
+
+button.active {
+  background-color: #004080;
+  color: white;
+  border: 2px solid #005fa3;
+}

frontend/src/TimeSelector.jsx

@@ -1,58 +1,65 @@
+import { useState } from "react";
 import 'dayjs/locale/fr';
-import './TimeSelector.css'
+import './TimeSelector.css';
+
+function TimeSelector({ dateChange, momentChange }) {
+  const [activeDate, setActiveDate] = useState("2024-10-08");
+  const [activeMoment, setActiveMoment] = useState("matin");
+
+  const handleDateClick = (value) => {
+    setActiveDate(value);
+    dateChange(value);
+  };
+
+  const handleMomentClick = (value) => {
+    setActiveMoment(value);
+    momentChange(value);
+  };
 
-function TimeSelector({ date, dateChange, momentChange }) {
   return (
     <div className="container">
-      <nav className='grid'>
+      <nav className="grid">
         <button
-          className="button"
-          value={"2024-10-08"}
-          onClick={() => dateChange("2024-10-08")}
+          className={`button ${activeDate === "2024-10-08" ? "active" : ""}`}
+          onClick={() => handleDateClick("2024-10-08")}
         >
           8 octobre
         </button>
         <button
-          className="button"
-          value={"2024-10-09"}
-          onClick={() => dateChange("2024-10-09")}
+          className={`button ${activeDate === "2024-10-09" ? "active" : ""}`}
+          onClick={() => handleDateClick("2024-10-09")}
         >
           9 octobre
         </button>
         <button
-          className="button"
-          value={"2024-10-10"}
-          onClick={() => dateChange("2024-10-10")}
+          className={`button ${activeDate === "2024-10-10" ? "active" : ""}`}
+          onClick={() => handleDateClick("2024-10-10")}
         >
           10 octobre
         </button>
       </nav>
-      <nav className='grid'>
+      <nav className="grid">
         <button
-          className="button"
-          value={"Matin"}
-          onClick={() => momentChange("matin")}
+          className={`button ${activeMoment === "matin" ? "active" : ""}`}
+          onClick={() => handleMomentClick("matin")}
         >
           Matin
         </button>
         <button
-          className="button"
-          value={"Après-midi"}
-          onClick={() => momentChange("après-midi")}
+          className={`button ${activeMoment === "après-midi" ? "active" : ""}`}
+          onClick={() => handleMomentClick("après-midi")}
         >
           Après-midi
         </button>
         <button
-          className="button"
-          value={"Soir"}
-          onClick={() => momentChange("soirée")}
+          className={`button ${activeMoment === "soirée" ? "active" : ""}`}
+          onClick={() => handleMomentClick("soirée")}
         >
           Soir
         </button>
         <button
-          className="button"
-          value={"Nuit"}
-          onClick={() => momentChange("nuit")}
+          className={`button ${activeMoment === "nuit" ? "active" : ""}`}
+          onClick={() => handleMomentClick("nuit")}
         >
           Nuit
         </button>