Update style and add responsiveness for recipes page

views/merchantSetupPage/merchantSetup.css

@@ -8,6 +8,11 @@
         margin: 5px;
     }
 
+.container{
+    flex-direction: column;
+    align-items: center;
+}
+
 /* basicInfoStrand */
 #basicInfoStrand{
     display: flex;
@@ -61,15 +66,6 @@
         color: #ff626b;
     }
 
-.container{
-    flex-direction: column;
-    align-items: center;
-}
-    .input-new{
-        display: flex;
-        flex-wrap: nowrap;
-    }
-
 @media screen and (max-width: 1000px){
     /* createIngredientsStrand */
     #createIngredientsStrand td, #createIngredientsStrand th{

views/recipesPage/recipes.css

@@ -1,24 +1,19 @@
-*{margin:0;padding:0;}
-
-body{
-    text-align: center;
-}
-
-h1{
-    margin-bottom: 25px;
-}
-
-h2{
-    border-bottom: 2px solid #ff626b;
-    margin-bottom: 15px;
+/* General use */
+span{
+    color: rgb(255, 99, 107);
 }
 
+/* recipesStrand */
 #recipesStrand{
     display: flex;
     flex-direction: column;
     align-items: center;
 }
 
+    #recipesStrand > *{
+        margin: 15px;
+    }
+
     #recipeUpdate{
         margin-bottom: 10px;
     }
@@ -31,11 +26,12 @@ h2{
     }
 
         .recipe-card{
-            border: 2px solid #ff626b;
-            box-shadow: 2px 2px 2px #001b2d;
-            background: #001b2d;
-            color: #ff626b;
+            border: 2px solid rgb(255, 99, 107);
+            box-shadow: 2px 2px 2px rgb(0, 27, 45);
+            background: rgb(0, 27, 45);
+            color: rgb(255, 99, 107);
             width: 20%;
+            min-width: 200px;
             padding: 35px;
             margin: 25px;
             border-radius: 10px;
@@ -47,45 +43,40 @@ h2{
             }
 
             .empty-recipe{
-                background: #ff626b;
-                border: 2px solid #001b2d;
-                color: #001b2d;
+                background: rgb(255, 99, 107);
+                border: 2px solid rgb(0, 27, 45);
+                color: rgb(0, 27, 45);
             }
 
+/* singleRecipeStrand */
 #singleRecipeStrand{
     display: none;
-    width: 50%;
+    /* width: 50%; */
     flex-direction: column;
     margin: auto;
     align-items: center;
 }
 
-    th{
-        border: 2px solid #ff626b;
-        background: #001b2d;
-        color: darkgray;
-        padding: 3px;
-        min-width: 150px;
+    #singleRecipeStrand > *{
+        margin: 15px;
     }
 
-    th:nth-of-type(3){
-        border: none;
-        background: none;
-        color: white;
-        min-width: 0;
-        cursor: auto;
+    #delRecipe{
+        display: "none"
     }
 
-    td{
-        border: 1px solid black;
-        text-align: center;
-        padding: 1px 10px;
+    #recipeName{
+        margin-top: 0;
     }
 
-    td:nth-of-type(3n){
-        border: none;
+@media screen and (max-width: 1000px){
+    /* General use */
+    body{
+        text-align: center;
     }
 
-    #delRecipe{
-        display: "none"
-    }
+    /* singlerecipeStrand */
+    #singleRecipeStrand .buttonsDiv{
+        font-size: 15px;
+    }
+}

views/recipesPage/recipes.ejs

@@ -13,30 +13,35 @@
         <% include ../shared/banner %>
 
         <div id="recipesStrand">
-            <h1>Recipes</h1>
+            <h1><span><%=merchant.name%></span> recipes</h1>
 
-            <% if(merchant.pos !== "none"){ %>
-                <button id="recipeUpdate" onclick="recipesObj.updateRecipes()">Update Recipes</button>
-            <% } %>
+            <div>
+                <% if(merchant.pos !== "none"){ %>
+                    <button class="button" id="recipeUpdate" onclick="recipesObj.updateRecipes()">Update Recipes</button>
+                <% } %>
 
-            <a href="/inventory">Return to Inventory</a>
+                <a class="button" href="/inventory">View Inventory</a>
+            </div>
 
             <div id="recipesContainer"></div>
         </div>
 
         <div id="singleRecipeStrand" >
-            <h1></h1>
+            <h1><span><%=merchant.name%></span>'s</h1>
+            <h1 id="recipeName"></h1>
 
-            <button id="addButton">Add Ingredient</button>
+            <div class="buttonsDiv">
+                <button class="button" id="addButton">Add Ingredient</button>
 
-            <button onclick="recipesObj.display()">Back to Recipes</button>
+                <button class="button" onclick="recipesObj.display()">Back to Recipes</button>
+            </div>
 
             <table>
                 <thead>
                     <tr>
                         <th>Name</th>
                         <th>Quantity</th>
-                        <th></th>
+                        <th>Actions</th>
                     </tr>
                 </thead>
                 <tbody></tbody>

views/recipesPage/singleRecipe.js

@@ -9,7 +9,7 @@ let singleRecipeObj = {
             tbody.removeChild(tbody.firstChild);
         }
 
-        document.querySelector("#singleRecipeStrand h1").innerText = recipe.name;
+        document.querySelector("#recipeName").innerText = recipe.name;
         document.querySelector("#addButton").onclick = ()=>{this.displayAdd(recipe)};
 
         for(let ingredient of recipe.ingredients){
@@ -29,11 +29,13 @@ let singleRecipeObj = {
 
             let editButton = document.createElement("button");
             editButton.innerText = "Edit";
+            editButton.classList = "button-small";
             editButton.onclick = ()=>{this.editIngredient(row, ingredient, recipe);};
             actions.appendChild(editButton);
 
             let removeButton = document.createElement("button");
             removeButton.innerText = "Remove";
+            removeButton.classList = "button-small";
             removeButton.onclick = ()=>{this.deleteIngredient(recipe._id, ingredient._id, row);};
             actions.appendChild(removeButton);
         }