Update style of recipes on recipe book strand.

Fix code style of ingredients on ingredient strand.

views/dashboardPage/bundle.js

@@ -1731,7 +1731,6 @@ controller = {
         for(let i = 0; i < sidebar.children.length; i++){
             if(sidebar.children[i].id === "ingredientDetails" && sidebar.children[i].style.display !== "none"){
                 let ingredients = document.querySelectorAll(".ingredient");
-                
                 for(let i = 0; i < ingredients.length; i++){
                     ingredients[i].classList.remove("active");
                 }
@@ -2520,8 +2519,6 @@ let ingredients = {
                 };
                 ingredientDiv._name = ingredient.ingredient.name.toLowerCase();
                 ingredientDiv._unit = ingredient.ingredient.unit.toLowerCase();
-                ingredientDiv.classList.add("choosable");
-
                 
                 if(ingredient.ingredient.specialUnit === "bottle"){
                     ingredientDiv.children[2].innerText = `${ingredient.quantity.toFixed(2)} BOTTLES`

views/dashboardPage/dashboard.css

@@ -193,6 +193,8 @@ Multi-strand use classes
     padding: 5px;
     text-align: center;
     cursor: pointer;
+    width: 100%;
+    box-sizing: border-box;
 }
 
     .choosable.tall{
@@ -731,18 +733,6 @@ Transactions Strand
             display: none;
         }
 
-        .itemDisplay{
-            color: black;
-            padding: 5px;
-            margin-top: 2px;
-            margin-bottom: 2px;
-        }
-
-            .itemDisplay:hover{
-                background: rgb(240, 252, 255);
-                color: black;
-            }
-
         .smallItemDisplay{
             color: black;
         }

views/dashboardPage/dashboard.ejs

@@ -200,7 +200,7 @@
                 </template>
 
                 <template id="ingredient">
-                    <div class="ingredient">
+                    <div class="ingredient choosable tall">
                         <p></p>
 
                         <hr class="ingredientSpacer mobileHide">
@@ -242,7 +242,7 @@
                 <div id="recipeList"></div>
 
                 <template id="recipe">
-                    <div class="itemDisplay">
+                    <div class="choosable tall">
                         <p></p>
                         <p></p>
                     </div>

views/dashboardPage/js/dashboard.js

@@ -151,7 +151,6 @@ controller = {
         for(let i = 0; i < sidebar.children.length; i++){
             if(sidebar.children[i].id === "ingredientDetails" && sidebar.children[i].style.display !== "none"){
                 let ingredients = document.querySelectorAll(".ingredient");
-                
                 for(let i = 0; i < ingredients.length; i++){
                     ingredients[i].classList.remove("active");
                 }

views/dashboardPage/js/ingredients.js

@@ -54,8 +54,6 @@ let ingredients = {
                 };
                 ingredientDiv._name = ingredient.ingredient.name.toLowerCase();
                 ingredientDiv._unit = ingredient.ingredient.unit.toLowerCase();
-                ingredientDiv.classList.add("choosable");
-
                 
                 if(ingredient.ingredient.specialUnit === "bottle"){
                     ingredientDiv.children[2].innerText = `${ingredient.quantity.toFixed(2)} BOTTLES`