Merge pull request #13 from hoangsonww/improvements

Improvements
hoangsonww · Apr 25, 2024 · 04e4760 · 04e4760
2 parents 88c243f + d153dc6
commit 04e4760
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 10 deletions.
diff --git a/WeatherMate-Mobile/www/src/css/style.css b/WeatherMate-Mobile/www/src/css/style.css
@@ -165,7 +165,7 @@ input:focus {
     background-color: #f5f5f5;
     max-height: 400px;
     overflow-y: auto;
-    border-radius: 15px;
+    border-radius: 16px;
     padding: 15px;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
     width: 80%;

diff --git a/WeatherMate-Mobile/www/src/js/script.js b/WeatherMate-Mobile/www/src/js/script.js
@@ -703,6 +703,7 @@ function displayFavorites() {
     const favorites = getFavorites();
 
     favoritesSection.innerHTML = "";
+    favoritesList.style.borderRadius = "12px";
 
     if (favorites.length === 0) {
         favoritesSection.innerHTML = "<h3>No favorite cities added.</h3>";
@@ -713,7 +714,7 @@ function displayFavorites() {
 
     favorites.forEach(city => {
         const cityElem = document.createElement("div");
-
+        cityElem.style.borderRadius = "8px";
         const cityLink = document.createElement("span");
         cityLink.innerText = city;
         cityLink.style.cursor = "pointer";
@@ -726,6 +727,8 @@ function displayFavorites() {
 
         const removeBtn = document.createElement("button");
         removeBtn.innerText = "Remove";
+        removeBtn.style.font = "inherit";
+        removeBtn.style.fontSize = "14px";
         removeBtn.onclick = function() { removeFavorite(city); };
 
         cityElem.appendChild(removeBtn);

diff --git a/src/css/style.css b/src/css/style.css
@@ -23,7 +23,7 @@ body {
 }
 
 #center {
-    background: rgba(255, 255, 255, 0.6);
+    background: rgba(255, 255, 255, 0.7);
     border-radius: 16px;
     padding: 15px;
     margin: 10px;
@@ -165,7 +165,7 @@ input:focus {
     background-color: #f5f5f5;
     max-height: 400px;
     overflow-y: auto;
-    border-radius: 15px;
+    border-radius: 16px;
     padding: 15px;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
     width: 80%;
@@ -288,8 +288,8 @@ button:hover {
     border-radius: 15px;
     padding: 20px;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
-    width: 80%;
-    max-width: 600px;
+    width: 600px;
+    max-width: calc(100% - 20px);
     margin: 20px 0;
     overflow: hidden;
     border: 1px solid rgba(0, 0, 0, 0.1);

diff --git a/src/html/about.html b/src/html/about.html
@@ -18,11 +18,11 @@
 </head>
 <body>
 
-    <img src="../../utils/logo.png" id="img" onclick="window.location.href='../../index.html'" title="Click to go back to the home page" style="cursor: pointer"/>
+    <div class="content">
+        <img src="../../utils/logo.png" id="img" onclick="window.location.href='../../index.html'" title="Click to go back to the home page" style="cursor: pointer; display: block; margin: auto"/>
 
-    <h1 style="text-align: center">About The WeatherMate App</h1>
+        <h1 style="text-align: center">About The WeatherMate App</h1>
 
-    <div class="content">
         <p>
             Welcome to The WeatherMate App, your digital meteorologist! Its mission is to empower you with accurate, real-time weather updates whether you're at home or on the go. The WeatherMate App delivers a seamless experience, ensuring you're prepared for whatever the weather brings.
         </p>

diff --git a/src/js/script.js b/src/js/script.js
@@ -703,6 +703,7 @@ function displayFavorites() {
     const favorites = getFavorites();
 
     favoritesSection.innerHTML = "";
+    favoritesList.style.borderRadius = "12px";
 
     if (favorites.length === 0) {
         favoritesSection.innerHTML = "<h3>No favorite cities added.</h3>";
@@ -713,7 +714,7 @@ function displayFavorites() {
 
     favorites.forEach(city => {
         const cityElem = document.createElement("div");
-
+        cityElem.style.borderRadius = "8px";
         const cityLink = document.createElement("span");
         cityLink.innerText = city;
         cityLink.style.cursor = "pointer";
@@ -726,6 +727,8 @@ function displayFavorites() {
 
         const removeBtn = document.createElement("button");
         removeBtn.innerText = "Remove";
+        removeBtn.style.font = "inherit";
+        removeBtn.style.fontSize = "14px";
         removeBtn.onclick = function() { removeFavorite(city); };
 
         cityElem.appendChild(removeBtn);