Merge pull request #21 from UTT-GL03/Frontend_UI_Improvements

Frontend UI improvements

frontend/src/App.css

@@ -10,10 +10,17 @@
 #root {
   margin: 0 auto;
   text-align: center;
-  max-width: 1200px;
+  max-width: 98vw;
+  height: 100vh;
   padding: 1rem;
   background-color: var(--background-color);
   border-radius: 10px;
   box-shadow: 0 4px 6px var(--shadow-color);
 }
 
+#mainDiv {
+  height: 80%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}

frontend/src/App.jsx

@@ -48,17 +48,19 @@ function App() {
   }
 
   return (
-    <div className="app-container">
+    <div className="app-container" id='mainDiv'>
       <Header
         cities={cities}
         ville={selectedCity}
         cityChange={handleCity}
         selectedDate={selectedDate}
       />
-      <TimeSelector date={selectedDate} dateChange={handleDate} momentChange={handleMoment}/>
-      <main className="main-content">
-        <WeatherCard data={data} date={selectedDate} />
-      </main>
+      <div id='content'>
+        <TimeSelector date={selectedDate} dateChange={handleDate} momentChange={handleMoment}/>
+        <main className="main-content">
+          <WeatherCard data={data} date={selectedDate} />
+        </main>
+      </div>
     </div>
   );
 }

frontend/src/Header.css

@@ -1,7 +1,7 @@
 .header-container {
     display: flex;
     align-items: center;
-    justify-content: space-between;
+    justify-content: space-around;
     padding: 1rem 2rem;
     background-color: #f4f4f4; 
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); 
@@ -10,16 +10,17 @@
 
 .select-container {
     flex: 1;
-    max-width: 300px;
 }
 
 .select {
     font-size: 1rem;
+    width: 60%;
 }
 
 .logo-container {
     flex: 1;
     text-align: center;
+    width: 53%;
 }
 
 .logo-container h2 {
@@ -32,6 +33,7 @@
 .info-container {
     flex: 1;
     text-align: right;
+    width: 33%;
 }
 
 .city-name {
@@ -46,3 +48,4 @@
     margin: 0;
     color: #7f8c8d;
 }
+

frontend/src/Header.jsx

@@ -26,7 +26,7 @@ function Header({ cities, ville, cityChange, selectedDate }) {
             <div className="logo-container">
                 <h2>Éco Météo</h2>
             </div>
-            <div className="info-container">
+            <div className="info-container info">
                 <p className="city-name">{ville || 'Ville non sélectionnée'}</p>
                 <p className="date">{formattedDate}</p>
             </div>

frontend/src/WeatherCard.css

@@ -1,55 +1,60 @@
 #WeatherCard {
-    background-color: var(--card-background, #ffffff);
-    border-radius: 10px;
-    padding: 2em;
-    box-shadow: 0 4px 6px var(--shadow-color, rgba(0, 0, 0, 0.1));
-    margin: 1.5rem 0;
-    width: 100%;
-    max-width: 100%;
-    text-align: left;
-    transition: transform 300ms, box-shadow 300ms;
-    overflow: hidden;
+  background-color: var(--card-background, #ffffff);
+  border-radius: 10px;
+  padding: 2em;
+  box-shadow: 0 4px 6px var(--shadow-color, rgba(0, 0, 0, 0.1));
+  margin: 1.5rem 0;
+  width: 100%;
+  max-width: 100%;
+  text-align: left;
+  transition: transform 300ms, box-shadow 300ms;
+  overflow: hidden;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  gap: 1.5rem;
+  font-size: 1.1rem;
+  color: var(--text-color, #333);
+}
+
+.grid-item {
+  background-color: #f7f7f7;
+  padding: 1.5em;
+  border-radius: 8px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  transition: background-color 300ms ease;
+}
+
+.grid-item .label {
+  font-weight: bold;
+  color: var(--primary-color, #0077cc);
+  margin-bottom: 0.5em;
+  display: block;
+  text-align: center;
+}
+
+.grid-item span {
+  font-size: 1.2rem;
+  color: #333;
+}
+
+@media (max-width: 768px) {
+  #WeatherCard {
+    padding: 1.5em;
   }
-  
+
   .grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-    gap: 1.5rem;
-    font-size: 1.1rem;
-    color: var(--text-color, #333);
+    grid-template-columns: 1fr;
   }
-  
+
   .grid-item {
-    background-color: #f7f7f7;
-    padding: 1.5em;
-    border-radius: 8px;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-    transition: background-color 300ms ease;
-  }
-
-  .grid-item .label {
-    font-weight: bold;
-    color: var(--primary-color, #0077cc);
-    margin-bottom: 0.5em;
-    display: block;
+    padding: 1.2em;
   }
+}
 
-  .grid-item span {
-    font-size: 1.2rem;
-    color: #333;
-  }
-
-  @media (max-width: 768px) {
-    #WeatherCard {
-      padding: 1.5em;
-    }
-
-    .grid {
-      grid-template-columns: 1fr;
-    }
-
-    .grid-item {
-      padding: 1.2em;
-    }
-  }
-
+img {
+  width: 6vw;
+  margin-right: 1vw;
+}

frontend/src/WeatherCard.jsx

@@ -27,16 +27,26 @@ const WeatherCard = ({ data }) => {
           <span className="label">Température:</span>
           <span>{temperature !== null ? `${temperature}°C` : "Non disponible"}</span>
         </div>
-        <div className="grid-item">
+        <div className="grid-item precipitation-container">
           <span className="label">Précipitation:</span>
+          {data?.meteo?.precipitation !== "Aucun" ?
+            <img visibility={data?.meteo?.precipitation == "Aucun" ? "hidden" : "visible"}
+              src={data?.meteo?.precipitation ? `../public/icons/${data.meteo.precipitation}.png` : "#"} 
+              alt={data?.meteo?.precipitation ? data.meteo.precipitation : "Image non disponible"} 
+            /> : null
+          } 
           <span>{data?.meteo?.precipitation ?? "Non disponible"}</span>
-        </div>
+        </div>        
         <div className="grid-item">
           <span className="label">Humidité:</span>
           <span>{data?.meteo?.humidity ?? "Non disponible"}</span>
         </div>
         <div className="grid-item">
-          <span className="label">Vent:</span>
+        <span className="label">Vent:</span>
+        <img
+          src={data?.meteo?.wind ? `../public/icons/${data.meteo.wind}.png` : "#"} 
+          alt={data?.meteo?.wind ? data.meteo.wind : "Image non disponible"}
+        />
           <span>{data?.meteo?.wind ?? "Non disponible"}</span>
         </div>
       </div>