Add modal for uploading spreadsheets.

views/dashboardPage/dashboard.css

@@ -555,6 +555,31 @@ Transactions Strand
         margin-top: 50px;
     }
 
+/*
+Modal
+*/
+.modal{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: fixed;
+    height: 100vh;
+    width: 100vw;
+    background: rgba(0, 27, 45, 0.75);
+}
+
+    .modalSpreadsheetUpload{
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: space-between;
+        padding: 25px;
+    }
+
+        .modalSpreadsheetUpload > *{
+            margin-top: 15px;
+        }
+
 @media screen and (max-width: 1000px){
     body{
         flex-direction: column;

views/dashboardPage/dashboard.ejs

@@ -414,6 +414,7 @@
         </div>
 
         <% include ../shared/loader %>
+        <% include ./modal %>
 
         <script>
             let data = {

views/dashboardPage/modal.ejs

@@ -0,0 +1,8 @@
+<div id="modal" class="modal">
+    <form id="modalSpreadsheetUpload" class="modalSpreadsheetUpload" method="post">
+        <h3>Choose a file to upload your <span id="modalSpreadsheetTitle">ingredients</span></h3>
+        <input id="spreadsheetInput" class="fileUpload" name="file" type="file">
+        <input type="hidden" name="type">
+        <input class="button" type="submit" value="SUBMIT">
+    </form>
+</div>

views/dashboardPage/sidebars.css

@@ -377,10 +377,6 @@ Add Recipe
                 color: rgb(255, 99, 107);
             }
 
-    #addRecipe button:last-of-type{
-        margin-top: auto;
-    }
-
 /*
 EDIT RECIPE
 */

views/dashboardPage/sidebars/newRecipe.ejs

@@ -43,4 +43,6 @@
     </template>
     
     <button id="submitNewRecipe" class="button">CREATE</button>
+
+    <button id="recipeFileUpload" class="linkButton">Or, upload a spreadsheet</button>
 </div>

views/shared/shared.css

@@ -192,6 +192,16 @@ form{
     cursor: pointer;
 }
 
+.linkButton{
+    background: none;
+    border: none;
+    text-decoration: underline;
+    color: blue;
+    cursor: pointer;
+    margin: 5px;
+    font-size: 15px;
+}
+
 .public-buttons {
     position: inherit;
     align-self: center;