css

frontend/src/components/weather/currentData.css

@@ -4,7 +4,6 @@
 }
 
 .fw input[type="text"],
-
 .fw {
   width: 100%;
   padding: 8px;
@@ -27,7 +26,6 @@
   margin-bottom: 5px;
 }
 
-
 .fw1 {
   padding: 8px;
   margin-bottom: 10px;
@@ -65,35 +63,45 @@
 #apiUrloutput {
   width: 1250px;
 }
-.field_write{
-margin-top: 30px;
-display: flex;
+.field_write {
+  margin-top: 30px;
+  display: flex;
 }
-.fw{
-  margin-left:20px;
+.fw {
+  margin-left: 20px;
 }
-.h1{
- margin-bottom: -30px;
+.h1 {
+  margin-bottom: -30px;
 }
-.thq-grid-5{
+.thq-grid-5 {
   display: flex;
   flex-direction: column;
 }
-.h2{
+.h2 {
   margin-top: 40px;
 }
-.dataselect{
+.dataselect {
   display: flex;
   flex-direction: row;
-
 }
-.data{
-  margin-top:40px;
-  margin-left:80px;
+.data {
+  margin-top: 40px;
+  margin-left: 80px;
 }
-.h3{
+.h3 {
   margin-bottom: 10px;
 }
-.generate{
+.generate {
   margin-top: 20px;
-}
\ No newline at end of file
+}
+
+.list-item {
+  border: 1px solid #fff;
+  padding: 10px;
+  margin: 5px 0;
+  border-radius: 5px;
+  cursor: pointer;
+}
+.list-item:hover {
+  background-color: #0a3a44; /* Change background color on hover */
+}

frontend/src/components/weather/historicalWeatherData.css

@@ -94,7 +94,13 @@
   margin-bottom: 10px;
 }
 
-.listStyle {
-  border-style: solid;
-  border-color: #ccc;
+.list-item {
+  border: 1px solid #fff;
+  padding: 10px;
+  margin: 5px 0;
+  border-radius: 5px;
+  cursor: pointer;
+}
+.list-item:hover {
+  background-color: #0a3a44; /* Change background color on hover */
 }

frontend/src/components/weather/weatherForecastData.css

@@ -4,7 +4,6 @@
 }
 
 .fw input[type="text"],
-
 .fw {
   width: 100%;
   padding: 8px;
@@ -27,13 +26,12 @@
   margin-bottom: 5px;
 }
 
-
 .fw1 {
   padding: 8px;
   margin-bottom: 10px;
   border: 1px solid #ccc;
   border-radius: 5px;
-  display:grid;
+  display: grid;
   text-align: center;
 }
 
@@ -65,32 +63,41 @@
 #apiUrloutput {
   width: 1250px;
 }
-.field_write{
-margin-top: 30px;
-display: flex;
+.field_write {
+  margin-top: 30px;
+  display: flex;
 }
-.fw{
-  margin-left:20px;
+.fw {
+  margin-left: 20px;
 }
-.h1{
- margin-bottom: -30px;
+.h1 {
+  margin-bottom: -30px;
 }
-.thq-grid-5{
+.thq-grid-5 {
   display: flex;
   flex-direction: column;
 }
-.dataselect{
+.dataselect {
   display: flex;
   flex-direction: row;
-
 }
-.data{
-  margin-top:40px;
-  margin-left:80px;
+.data {
+  margin-top: 40px;
+  margin-left: 80px;
 }
-.h3{
+.h3 {
   margin-bottom: 10px;
 }
-.generate{
+.generate {
   margin-top: 20px;
-}
\ No newline at end of file
+}
+.list-item {
+  border: 1px solid #fff;
+  padding: 10px;
+  margin: 5px 0;
+  border-radius: 5px;
+  cursor: pointer;
+}
+.list-item:hover {
+  background-color: #0a3a44; /* Change background color on hover */
+}