Change button style on the ingredients strand to match the standard

views/dashboardPage/bundle.js

@@ -1729,6 +1729,14 @@ controller = {
     closeSidebar: function(){
         let sidebar = document.getElementById("sidebarDiv");
         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");
+                }
+            }
+
             sidebar.children[i].style.display = "none";
         }
         sidebar.classList = "sidebarHide";
@@ -2491,7 +2499,7 @@ let ingredients = {
             let categoryDiv = categoryTemplate.cloneNode(true);
             categoryDiv.children[0].children[0].innerText = categories[i].name.toUpperCase();
             
-            categoryDiv.children[0].children[1].onclick = ()=>{
+            categoryDiv.children[0].onclick = ()=>{
                 this.toggleCategory(categoryDiv.children[1], categoryDiv.children[0].children[1]);
             };
             categoryDiv.children[1].style.display = "none";
@@ -2502,9 +2510,13 @@ let ingredients = {
                 let ingredientDiv = ingredientTemplate.cloneNode(true);
 
                 ingredientDiv.children[0].innerText = ingredient.ingredient.name;
-                ingredientDiv.onclick = ()=>{controller.openSidebar("ingredientDetails", ingredient)};
+                ingredientDiv.onclick = ()=>{
+                    ingredientDiv.classList.add("active");
+                    controller.openSidebar("ingredientDetails", ingredient);
+                };
                 ingredientDiv._name = ingredient.ingredient.name.toLowerCase();
                 ingredientDiv._unit = ingredient.ingredient.unit.toLowerCase();
+                ingredientDiv.classList.add("choosable");
 
                 
                 if(ingredient.ingredient.specialUnit === "bottle"){

views/dashboardPage/dashboard.css

@@ -182,6 +182,33 @@ Multi-strand use classes
         margin-right: 10px;
     }
 
+.choosable{
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    background: rgb(0, 27, 45);
+    color: white;
+    border-radius: 5px;
+    margin: 2px;
+    padding: 5px;
+    text-align: center;
+    cursor: pointer;
+}
+
+    .choosable.tall{
+        padding: 15px;
+    }
+
+    .choosable:hover{
+        background: rgb(201, 201, 201);
+        color: black;
+    }
+
+    .choosable.active{
+        background: rgb(179, 191, 209);
+        color: white;
+    }
+
 /* 
 Home Strand 
 */
@@ -362,8 +389,16 @@ Ingredients Strand
         width: 80%;
     }
 
+    .categoryDiv{
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+
     .categoryDiv > div:first-of-type{
         display: flex;
+        cursor: pointer;
+        width: 100%;
     }
 
     .categoryDiv > div:first-of-type p{
@@ -389,29 +424,7 @@ Ingredients Strand
 
         .ingredientsDiv{
             flex-direction: column;
-        }
-
-    .ingredient{
-        display: flex;
-        width: 50%;
-        padding: 15px;
-        margin: auto;
-        cursor: pointer;
-        border-radius: 5px;
-    }
-
-        .ingredient:hover{
-            background: rgb(0, 27, 45);
-            color: white;
-        }
-
-        .ingredient > *{
-            width: 33%;
-            margin-right: 15px;
-        }
-
-        .ingredient > p:last-of-type{
-            text-align: right;
+            width: 50%;
         }
 
         .ingredientSpacer{

views/dashboardPage/js/dashboard.js

@@ -149,6 +149,14 @@ controller = {
     closeSidebar: function(){
         let sidebar = document.getElementById("sidebarDiv");
         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");
+                }
+            }
+
             sidebar.children[i].style.display = "none";
         }
         sidebar.classList = "sidebarHide";

views/dashboardPage/js/ingredients.js

@@ -37,7 +37,7 @@ let ingredients = {
             let categoryDiv = categoryTemplate.cloneNode(true);
             categoryDiv.children[0].children[0].innerText = categories[i].name.toUpperCase();
             
-            categoryDiv.children[0].children[1].onclick = ()=>{
+            categoryDiv.children[0].onclick = ()=>{
                 this.toggleCategory(categoryDiv.children[1], categoryDiv.children[0].children[1]);
             };
             categoryDiv.children[1].style.display = "none";
@@ -48,9 +48,13 @@ let ingredients = {
                 let ingredientDiv = ingredientTemplate.cloneNode(true);
 
                 ingredientDiv.children[0].innerText = ingredient.ingredient.name;
-                ingredientDiv.onclick = ()=>{controller.openSidebar("ingredientDetails", ingredient)};
+                ingredientDiv.onclick = ()=>{
+                    ingredientDiv.classList.add("active");
+                    controller.openSidebar("ingredientDetails", ingredient);
+                };
                 ingredientDiv._name = ingredient.ingredient.name.toLowerCase();
                 ingredientDiv._unit = ingredient.ingredient.unit.toLowerCase();
+                ingredientDiv.classList.add("choosable");
 
                 
                 if(ingredient.ingredient.specialUnit === "bottle"){

views/shared/shared.css

@@ -223,33 +223,6 @@ form{
     transition: width 1s linear;
 }
 
-.choosable{
-    display: flex;
-    justify-content: space-around;
-    align-items: center;
-    background: rgb(0, 27, 45);
-    color: white;
-    border-radius: 5px;
-    margin: 2px;
-    padding: 5px;
-    text-align: center;
-    cursor: pointer;
-}
-
-    .choosable.tall{
-        padding: 15px;
-    }
-
-    .choosable:hover{
-        background: rgb(201, 201, 201);
-        color: black;
-    }
-
-    .choosable.active{
-        background: rgb(179, 191, 209);
-        color: white;
-    }
-
 /* Header partial */
 .header{
     display: flex;