Refactor Ingredient Details css

views/dashboardPage/components/components.css

@@ -251,44 +251,74 @@
         margin-left: auto;
     }
 
-    .addIngredientsIngredients{
-        flex-direction: column;
-        padding: 0 20px;
+    .addIngredientsCategory{
+        width: 90%;
     }
 
-        .addIngredientsIngredient{
+        .categoryHeader{
             display: flex;
-            justify-content: left;
+            justify-content: space-between;
             align-items: center;
-            margin: 5px;
+            width: 100%;
+            border: 1px solid black;
+            background: rgb(240, 252, 255);
+            border-radius: 5px;
+            padding: 5px;
         }
 
-            .addIngredientsIngredient > *:nth-child(2){
-                margin-left: auto;
+            .categoryHeader > button{
+                display: flex;
+                align-items: center;
+                background: none;
+                border: none;
+                padding: 5px;
+                border-radius: 5px;
+                cursor: pointer;
             }
 
-            .addIngredientsIngredient input[type=number]{
-                width: 100px;
+            .categoryHeader > button:hover{
+                background: rgb(0, 27, 45);
+                color: white;
             }
 
-            .addButton{
+        .addIngredientsIngredients{
+            flex-direction: column;
+            padding: 0 20px;
+        }
+
+            .addIngredientsIngredient{
                 display: flex;
+                justify-content: left;
                 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;
+                margin: 5px;
             }
 
-                .addButton:hover{
-                    background:rgb(0, 27, 45);
-                    color: white;
+                .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;
+                    }
+
 /* Ingredient Details */
 #ingredientDetails{
     flex-direction: column;
@@ -315,36 +345,6 @@
         padding: 10px;
     }
 
-    .addIngredientsCategory{
-        width: 90%;
-    }
-
-        .categoryHeader{
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            width: 100%;
-            border: 1px solid black;
-            background: rgb(240, 252, 255);
-            border-radius: 5px;
-            padding: 5px;
-        }
-
-            .categoryHeader > button{
-                display: flex;
-                align-items: center;
-                background: none;
-                border: none;
-                padding: 5px;
-                border-radius: 5px;
-                cursor: pointer;
-            }
-
-            .categoryHeader > button:hover{
-                background: rgb(0, 27, 45);
-                color: white;
-            }
-
 /* Recipe Details */
 #recipeDetails{
     flex-direction: column;

views/dashboardPage/components/ingredientDetails.ejs

@@ -23,7 +23,9 @@
     </div>
 
     <p></p>
+    
     <h1></h1>
+
     <div class="lineBorder"></div>
 
     <label>Current Stock