Styled strand to create recipe names

views/merchantSetupPage/merchantSetup.css

@@ -53,6 +53,10 @@
     display: none;
 }
 
+    #nameRecipesStrand > *{
+        margin: 10px;
+    }
+
 /* createRecipesStrand */
 #createRecipesStrand{
     display: none;

views/merchantSetupPage/merchantSetup.ejs

@@ -86,11 +86,11 @@
         <div id="nameRecipesStrand" class="container">
             <h1>Name your recipes</h1>
 
-            <button onclick="nameRecipesObj.addNameField()">Add Recipe</button>
+            <button class="button" onclick="nameRecipesObj.addNameField()">Add Recipe</button>
 
             <div id="nameList"></div>
 
-            <button onclick="nameRecipesObj.submit()">Submit</button>
+            <button class="button" onclick="nameRecipesObj.submit()">Submit</button>
         </div>
 
         <div id="createRecipesStrand" class="container">

views/merchantSetupPage/nameRecipes.js

@@ -19,6 +19,7 @@ let nameRecipesObj = {
 
         let nameRemove = document.createElement("button");
         nameRemove.innerText = "Remove";
+        nameRemove.classList = "button-small";
         nameRemove.onclick = ()=>{nameDiv.parentNode.removeChild(nameDiv)};
         nameDiv.appendChild(nameRemove);
     },