Update choosable class.

views/dashboardPage/dashboard.css

@@ -88,8 +88,7 @@ Multi-strand use classes
     justify-content: space-around;
     align-items: center;
     background: rgb(0, 27, 45);
-    color: white;
-    border-radius: 5px;
+    color: rgb(255, 99, 107);
     margin: 2px;
     padding: 5px;
     text-align: center;
@@ -106,12 +105,12 @@ Multi-strand use classes
 
     .choosable:hover{
         background: rgb(179, 191, 209);
-        color: black;
+        color: rgb(255, 99, 107);
     }
 
     .choosable.active{
         background: rgb(240, 252, 255);
-        color: black;
+        color: rgb(255, 99, 107);
     }
 
 .searchBar{
@@ -374,24 +373,23 @@ Ingredients Strand
         display: flex;
         cursor: pointer;
         width: 100%;
+        margin: 5px 0;
     }
 
     .categoryDiv > div:first-of-type p{
         display: flex;
         align-items: center;
         padding: 20px 0 20px 100px;
-        background: rgb(240, 252, 255);
-        border: 1px solid gray;
-        border-radius: 5px;
-        margin-right: 25px;
+        background: rgb(0, 27, 45);
         flex-grow: 1;
+        color: rgb(255, 99, 107);
+        margin-right: 25px
     }
 
     .categoryDiv > div:first-of-type button{
         padding: 10px;
-        background: rgb(240, 252, 255);
-        border: 1px solid black;
-        border-radius: 5px;
+        background: rgb(0, 27, 45);
+        border: none;
         width: 75px;
         height: 75px;
         cursor: pointer;

views/dashboardPage/ejs/strands/ingredients.ejs

@@ -21,7 +21,7 @@
                 <p></p>
 
                 <button>
-                    <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                    <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="rgb(255, 99, 107)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                         <polyline points="6 9 12 15 18 9"></polyline>
                     </svg>
                 </button>

views/dashboardPage/js/strands/ingredients.js

@@ -69,10 +69,10 @@ let ingredients = {
 
     toggleCategory: function(div, button){
         if(div.style.display === "none"){
-            button.innerHTML = '<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="18 15 12 9 6 15"></polyline></svg>';
+            button.innerHTML = '<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="rgb(255, 99, 107)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="18 15 12 9 6 15"></polyline></svg>';
             div.style.display = "flex";
         }else if(div.style.display === "flex"){
-            button.innerHTML = '<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>';
+            button.innerHTML = '<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="rgb(255, 99, 107)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>';
             div.style.display = "none";
         }
     },