Better style the app

CSS might still need adjusments.
wlsf82 · May 30, 2024 · 4c6e92c · 4c6e92c
1 parent 07ad4b0
commit 4c6e92c
Show file tree

Hide file tree

Showing 4 changed files with 108 additions and 47 deletions.
diff --git a/cypress/e2e/mealSuggestion.cy.js b/cypress/e2e/mealSuggestion.cy.js
@@ -39,7 +39,7 @@ describe('Meal suggestion', () => {
     cy.contains('button', 'Outra sugestão')
       .as('button')
       .should('be.visible')
-    cy.get('body').should('have.css', 'background-color', 'rgb(254, 246, 228)')
+    cy.get('body').should('have.css', 'background-color', 'rgb(255, 255, 255)')
     cy.section('End of pre-conditions')
   })
 

diff --git a/src/index.html b/src/index.html
@@ -22,14 +22,14 @@ <h1>Refeição vegana 🌱</h1>
   <div id="search-container">
     <label>Busca:</label>
     <input type="text" id="search-field" placeholder="Ex.: Arroz e feijão">
-    <button type="submit">></button>
+    <button type="submit">Buscar</button>
   </div>
-  <div id="meal-container">
-    <h2 id="meal-name"></h2>
-    <h3 id="ingredients-label"></h3>
-    <ul id="ingredients-list"></ul>
-  </div>
-  <div>
+  <div id="content-wrapper">
+    <div id="meal-container">
+      <h2 id="meal-name" title="Refeição"></h2>
+      <h3 id="ingredients-label" title="Ingredientes"></h3>
+      <ul id="ingredients-list"></ul>
+    </div>
     <button id="generate-meal-button">Outra sugestão</button>
   </div>
   <script type="application/javascript" src="meals.js"></script>

diff --git a/src/script.js b/src/script.js
@@ -59,6 +59,7 @@ function generateMeal() {
 
 function showMealName(meal) {
   mealName.innerHTML = `Refeição: ${meal.name} (${mealEnum[meal.type]}${meal.highProtein ? ' com alto teor de proteína' : ''})`
+  mealName.title = `${meal.name} (${mealEnum[meal.type]}${meal.highProtein ? ' com alto teor de proteína' : ''})`
 }
 
 function showIngredients(ingredients) {

diff --git a/src/style.css b/src/style.css
@@ -1,66 +1,126 @@
 * {
-  font-family: Arial, Helvetica, sans-serif;
-  background-color: #fef6e4;
-  color: #001858;
-  margin-left: 6px;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  font-family: 'Roboto', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 }
 
-label {
-  font-weight: bold;
+body {
+  max-width: 640px;
+  background-color: #ffffff;
+  color: #333333;
+  line-height: 1.6;
+  padding: 20px;
+  margin: auto;
 }
 
-select {
-  border: 2px solid #001858;
-  border-radius: 4px;
-  margin-left: 21px;
-  height: 1.5rem;
+h1, h2, h3 {
+  color: #007BFF;
 }
 
-#search-container {
-  margin-top: 12px;
+h1 {
+  font-size: 2.5em;
+  text-align: center;
+  margin-bottom: 40px;
 }
 
-#search-container input[type="text"] {
-  width: 180px;
-  border: 2px solid #001858;
-  border-radius: 4px;
+#ingredients-label {
+  color: #0056B3;
 }
 
-::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
-  color: #f582ae;
-  opacity: 1; /* Firefox */
+#filter-container, #search-container {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 20px;
 }
 
-:-ms-input-placeholder { /* Internet Explorer 10-11 */
-  color: #f582ae;
+select, input[type="text"], button {
+  font-size: 1rem;
+  padding: 8px 10px;
+  border: 1px solid #007BFF;
+  border-radius: 10px;
+  box-shadow: 0 4px 8px rgba(0, 123, 255, 0.1);
+  width: 100%;
+  margin: 0 10px 0 1px;
 }
 
-::-ms-input-placeholder { /* Microsoft Edge */
-  color: #f582ae;
+#generate-meal-button {
+  width: unset;
+  padding: 8px;
+  margin-top: 10px;
 }
 
-h1 {
-  color: #f582ae;
+label {
+  font-weight: 600;
+  min-width: 70px;
+  margin-right: 1px;
+  margin-bottom: 15px;
+}
+
+select:hover, input[type="text"]:hover, button:hover {
+  border-color: #0056b3;
+  box-shadow: 0 4px 8px rgba(0, 123, 255, 0.2);
 }
 
 button {
-  padding: 4px 8px;
-  background-color: #f582ae;
-  border-radius: 8px;
-  border: 2px solid #001858;
+  background-color: #007bff;
+  color: white;
+  cursor: pointer;
+  transition: background-color 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
 }
 
-#generate-meal-button {
-  font-size: large;
+button:hover {
+  background-color: #0056b3;
 }
 
-@media only screen and (max-width: 600px) {
-  h1 {
-    text-align: center;
-  }
+button:active {
+  background-color: #004085;
+}
+
+ul {
+  list-style: none;
+  padding-left: 0;
+  margin-top: 20px;
+  border-left: 3px solid #007BFF;
+  padding-left: 20px;
+  background-color: #f8f9fa;
+  box-shadow: 2px 2px 8px rgba(0, 123, 255, 0.1);
+  max-height: 300px;
+  overflow-y: auto;
+}
+
+li {
+  padding: 10px 0;
+  border-bottom: 1px solid #e1e5ea;
+  margin-bottom: 6px;
+  transition: background-color 0.3s;
+}
+
+li:last-child {
+  border-bottom: none;
+}
+
+li:hover {
+  background-color: #e9ecef;
+}
+
+#content-wrapper {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  min-height: 50vh;
+}
+
+#meal-name {
+  min-height: 100px;
+  line-height: normal;
+  overflow: visible;
+  white-space: normal;
+}
 
-  #generate-meal-button {
-    margin: 0 auto;
-    display: block;
+@media (max-width: 480px) {
+  ul {
+    max-height: 150px;
   }
 }