Minor change to style on ingredients page

views/dashboardPage/components/addIngredients.ejs

@@ -12,9 +12,11 @@
 
     <div id="addIngredientList"></div>
 
-    <button class="button addIngredientsBtn" onclick="addIngredientsComp.submitAddIngredients()">Add</button>
+    <div class="buttonBox">
+        <button class="button addIngredientsBtn" onclick="newIngredientComp.display()">Create New</button>
 
-    <button class="button addIngredientsBtn" onclick="newIngredientComp.display()">Create New</button>
+        <button class="button addIngredientsBtn" onclick="addIngredientsComp.submitAddIngredients()">Add</button>
+    </div>
 
     <template id="addIngredientsCategory">
         <div class="addIngredientsCategory">

views/dashboardPage/components/components.css

@@ -231,10 +231,6 @@
         border-radius: 5px;
     }
 
-    .addIngredientsBtn{
-        margin-left: auto;
-    }
-
 #ingredientDetails{
     flex-direction: column;
     align-items: center;
@@ -307,6 +303,11 @@
             margin-left: auto;
         }
 
+    .buttonBox{
+        display: flex;
+        justify-content: space-between;
+    }
+
 /* Recipe Details */
 #recipeDetails{
     flex-direction: column;
@@ -437,6 +438,10 @@
         padding: 10px;
     }
 
+    #newIngredient .button{
+        margin: 15px 0 0 auto;
+    }
+
 /* Order Details */
 #orderDetails{
     display: flex;

views/shared/shared.css

@@ -58,16 +58,6 @@ form{
     height: auto;
 }
 
-.buttonBox{
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-}
-
-    .buttonBox > *{
-        margin: 10px;
-    }
-
 .button{
     display: initial;
     background: rgb(255, 99, 107);
@@ -122,11 +112,6 @@ form{
     margin-right: 39px;
 }
 
-.buttonBox{
-    display: flex;
-    justify-content: space-around;
-}
-
     .button-small:hover{
         background: rgb(0, 27, 45);
         color: rgb(240, 252, 255);