update style

UTT-GL03 · Dec 17, 2024 · 95ffffd · 95ffffd
1 parent 33b1ed0
commit 95ffffd
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 9 deletions.
diff --git a/frontend/src/App.css b/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;
+}
diff --git a/frontend/src/App.jsx b/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>
   );
 }

diff --git a/frontend/src/Header.css b/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;
 }
+
diff --git a/frontend/src/Header.jsx b/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>