Add basic style for the transaction filter

views/dashboardPage/dashboard.css

@@ -461,6 +461,37 @@ Transactions Strand
         margin-top: 50px;
     }
 
+    #transactionFilter{
+        padding: 5px;
+        margin: 0;
+        align-items: center;
+    }
+
+        #transactionFilter > div{
+            display: flex;
+            justify-content: space-around;
+            align-items: center;
+            width: 100%;
+        }
+
+            .filterLabel{
+                display: flex;
+                flex-direction: column;
+                text-align: center;
+            }
+
+                #transFilCheckboxes{
+                    text-align: left;
+                }
+
+                    #transFilCheckboxes label{
+                        margin: 0;
+                    }
+        
+            #transactionFilter input[type=submit]{
+                max-height: 50px;
+            }
+
 @media screen and (max-width: 1000px){
     body{
         flex-direction: column;
@@ -592,6 +623,6 @@ Transactions Strand
     Transactions
     */
     .transactionsList{
-        width: 95%;
+        width: 10%;
     }
 }

views/dashboardPage/dashboard.ejs

@@ -273,10 +273,17 @@
                 </div>
 
                 <form onsubmit="transactionsStrandObj.submitFilter()" id="transactionFilter">
-                    <input id="transFilDate1"type="date">
-                    <input id="transFilDate2" type="date">
-                    <div id="transFilCheckboxes"></div>
-                    <input class="button" type="submit" value="Submit">
+                    <h2>Search</h2>
+                    <div>
+                        <label class="filterLabel">DATES:
+                            <input id="transFilDate1"type="date">
+                            <input id="transFilDate2" type="date">
+                        </label>
+                        <label class="filterLabel">RECIPES:
+                            <div id="transFilCheckboxes"></div>
+                        </label>
+                        <input class="button" type="submit" value="SUBMIT">
+                    </div>
                 </form>
 
                 <div id="transactionsList" class="transactionsList"></div>

views/dashboardPage/transactions.js

@@ -17,14 +17,18 @@ window.transactionsStrandObj = {
             }
 
             for(let i = 0; i < merchant.recipes.length; i++){
+                let checkbox = document.createElement("input");
+                checkbox.type = "checkbox";
+                checkbox.recipe = merchant.recipes[i];
+                checkboxes.appendChild(checkbox);
+
                 let label = document.createElement("label");
                 label.innerText = merchant.recipes[i].name;
+                label.for = checkbox;
                 checkboxes.appendChild(label);
 
-                let checkbox = document.createElement("input");
-                checkbox.type = "checkbox";
-                checkbox.recipe = merchant.recipes[i];
-                label.appendChild(checkbox);
+                let brk = document.createElement("br");
+                checkboxes.appendChild(brk);
             }
 
             while(transactionsList.children.length > 0){