Update style and add responsiveness to addIngredientStrand on inventoryPage

views/inventoryPage/inventory.css

@@ -29,20 +29,18 @@
 
 #addIngredientStrand{
     display: none;
-    justify-content: space-around;
+    flex-direction: column;
+    align-items: center;
 }
 
-    #addIngredientStrand form{
-        display: flex;
-        flex-direction: column;
-        border: 2px solid rgb(255, 99, 107);
-        padding: 25px;
-        border-radius: 10px;
+    #addIngredientStrand > *{
+        margin: 25px;
     }
 
-        #addIngredientStrand form > *{
-            margin: 5px;
-        }
+    .container{
+        display: flex;
+        justify-content: space-around;
+    }
 
 #enterTransactionsStrand{
     display: none;
@@ -51,6 +49,7 @@
 }
 
 @media screen and (max-width: 600px){
+    /* inventoryStrand */
     #inventoryStrand h1{
         font-size: 20px;
         text-align: center;
@@ -73,4 +72,13 @@
         padding: 3px;
         font-size: 12px;
     }
+
+    /* addIngredientStrand */
+    .container{
+        flex-direction: column;
+    }
+
+    #addIngredientStrand > *{
+        margin: 10px;
+    }
 }

views/inventoryPage/inventory.ejs

@@ -44,43 +44,45 @@
         </div>
 
         <div id="addIngredientStrand" class="add-ingredient">
-            <button onclick="inventoryObj.display()">Back to Inventory</button>
-
-            <form onsubmit="addIngredientObj.submitAdd()">
-                <h2>Select Ingredient</h2>
-
-                <label>Ingredient
-                    <select id="addName"></select>
-                </label>
-                
-                <label>Quantity
-                    <input id="addQuantity" type="number" step="0.01" required>
-                </label>
-                
-                <input type="submit" value="Add Ingredient">
-            </form>
-
-            <form onsubmit="addIngredientObj.submitNew()">
-                <h2>Create New Ingredient</h2>
-
-                <label>Name
-                    <input id="newName" type="text" required>
-                </label>
-
-                <label>Category
-                    <input id="newCategory" type="text" required>
-                </label>
-
-                <label>Unit
-                    <input id="newUnit" type="text" required>
-                </label>
-
-                <label>Quantity
-                    <input id="newQuantity" type="number" step="0.01" required>
-                </label>
-
-                <input type="submit" value="Create Ingredient">
-            </form>
+            <button class="button" onclick="inventoryObj.display()">Back to Inventory</button>
+
+            <div class="container">
+                <form onsubmit="addIngredientObj.submitAdd()">
+                    <h2>Select Ingredient</h2>
+
+                    <label>Ingredient
+                        <select id="addName"></select>
+                    </label>
+                    
+                    <label>Quantity
+                        <input id="addQuantity" type="number" step="0.01" required>
+                    </label>
+                    
+                    <input class="button" type="submit" value="Add Ingredient">
+                </form>
+
+                <form onsubmit="addIngredientObj.submitNew()">
+                    <h2>Create New Ingredient</h2>
+
+                    <label>Name
+                        <input id="newName" type="text" required>
+                    </label>
+
+                    <label>Category
+                        <input id="newCategory" type="text" required>
+                    </label>
+
+                    <label>Unit
+                        <input id="newUnit" type="text" required>
+                    </label>
+
+                    <label>Quantity
+                        <input id="newQuantity" type="number" step="0.01" required>
+                    </label>
+
+                    <input class="button" type="submit" value="Create Ingredient">
+                </form>
+            </div>
         </div>
 
         <div id="enterTransactionsStrand">

views/shared/shared.css

@@ -39,6 +39,22 @@ table{
         background: rgb(240, 252, 255);
     }
 
+form{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    border: 2px solid rgb(0, 27, 45);
+    padding: 25px;
+    border-radius: 10px;
+    margin: 10px;
+    background: rgb(240, 252, 255);
+    box-shadow: 1px 1px 1px rgb(0, 27, 45);
+}
+
+    form > *{
+        margin: 10px;
+    }
+
 .button{
     background: none;
     border: 5px solid rgb(255, 99, 107);