Fix some styling on the add ingredients sidebar

views/dashboardPage/components/addIngredients.ejs

@@ -51,7 +51,7 @@
     <template id="addIngredientsIngredient">
         <div class="addIngredientsIngredient">
             <p></p>
-            <button onclick="addIngredientsComp.addOne(this.parentElement)">+</button>
+            <button class="addButton" onclick="addIngredientsComp.addOne(this.parentElement)">+</button>
         </div>
     </template>
 </div>

views/dashboardPage/components/components.css

@@ -224,17 +224,17 @@
     #addIngredientList{
         overflow-y: auto;
         margin-bottom: 15px;
-        max-height: 40%;
+        max-height: 35%;
     }
 
-    .addIngredient{
+    /* .addIngredient{
         display: flex;
         justify-content: space-between;
         padding: 10px;
         background: rgb(240, 252, 255);
         border: 1px solid black;
         border-radius: 5px;
-    }
+    } */
     
     #myIngredientsDiv{
         display: none;
@@ -250,6 +250,49 @@
             overflow-y: auto;
         }
 
+    .addIngredientsIngredients{
+        flex-direction: column;
+        padding: 0 20px;
+    }
+
+        .addIngredientsIngredient{
+            display: flex;
+            justify-content: left;
+            align-items: center;
+            margin: 5px;
+        }
+
+        .addIngredientsIngredient > *:nth-child(2){
+            margin-left: auto;
+        }
+
+        .addIngredientsIngredient input[type=number]{
+            width: 100px;
+        }
+
+        .addButton{
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 25px;
+            font-weight: bold;
+            background: none;
+            border: 1px solid black;
+            border-radius: 5px;
+            width: 30px;
+            cursor: pointer;
+        }
+
+            .addButton:hover{
+                background:rgb(0, 27, 45);
+                color: white;
+            }
+
+    .buttonBox{
+        display: flex;
+        justify-content: space-between;
+    }
+
 /* Ingredient Details */
 #ingredientDetails{
     flex-direction: column;
@@ -306,28 +349,6 @@
                 color: white;
             }
 
-        .addIngredientsIngredients{
-            flex-direction: column;
-            padding: 0 20px;
-        }
-
-        .addIngredientsIngredient{
-            display: flex;
-            justify-content: left;
-            align-items: center;
-            margin: 5px;
-        }
-
-        .addIngredientsIngredient input[type=number]{
-            width: 100px;
-            margin-left: auto;
-        }
-
-    .buttonBox{
-        display: flex;
-        justify-content: space-between;
-    }
-
 /* Recipe Details */
 #recipeDetails{
     flex-direction: column;