Add styling for the transactions list page.

src/views/css/index.css

@@ -1,6 +1,7 @@
 @import "./home.css";
 @import "./addMenu.css";
 @import "./createAllowance.css";
+@import "./viewTransactions.css";
 
 :root {
     --primary: #6E4B3A;

src/views/css/viewTransactions.css

@@ -0,0 +1,72 @@
+#ViewTransactions{
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    min-height: 100%;
+    padding-top: 75px;
+}
+
+#ViewTransactions h1{
+    text-align: center;
+}
+
+#ViewTransactions .transactions{
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    max-width: 750px;
+}
+
+#ViewTransactions .transaction{
+    display: flex;
+    justify-content: space-between;
+    background: var(--surface);
+    margin: 5px 0;
+    padding: 5px 15px;
+    width: 100%;
+    cursor: pointer;
+}
+
+#ViewTransactions .transaction:hover{
+    box-shadow: 0 0 3px var(--secondary);
+}
+
+#ViewTransactions .right{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-grow: 1;
+    margin-left: 35px;
+}
+
+#ViewTransactions .category{
+    font-weight: bold;
+    margin-right: 35px;
+}
+
+#ViewTransactions .date{
+    color: var(--textMuted);
+}
+
+#ViewTransactions .amount{
+    font-weight: bold;
+}
+
+#ViewTransactions .green{
+    color: var(--success);
+}
+
+#ViewTransactions .red{
+    color: var(--error);
+}
+
+@media screen and (max-width: 750px){
+    #ViewTransactions .right{
+        flex-direction: column;
+        align-items: flex-end;
+    }
+
+    #ViewTransactions .category{
+        margin-right: 0;
+    }
+}

src/views/js/Format.js

@@ -11,6 +11,18 @@ export default class Format{
         return `${year}-${month}-${day}`;
     }
 
+    static dateFromTransaction(d){
+        const date = new Date(d);
+
+        let options = {
+            year: "numeric",
+            month: "long",
+            day: "numeric"
+        };
+
+        return date.toLocaleDateString("en-US", options);
+    }
+
     static dollarsToCents(num){
         if(typeof num === "string") num = Number(num);
 

src/views/js/data/Transaction.js

@@ -34,7 +34,7 @@ export default class Transaction{
     static create(account, date, amount, tags, location, note, category){
         let categoryId = null;
         if(category !== "discretionary"){
-            let categorySplit = category.split("-");
+            let categorySplit = category.split(":");
             category = categorySplit[0];
             categoryId = categorySplit[1];
         }

src/views/js/pages/CreateTransaction.js

@@ -11,7 +11,6 @@ export default class CreateTransaction extends Page{
             user.account.listBills(),
             user.account.listAllowances()
         );
-
     }
 
     async submit(event){
@@ -114,15 +113,15 @@ export default class CreateTransaction extends Page{
             .appendTo(this.container);
 
         for(let i = 0; i < allowances.length; i++){
-            allowancesOpt.append(new Elem("option").text(allowances[i].name).value(`allowance-${allowances[i].id}`));
+            allowancesOpt.append(new Elem("option").text(allowances[i].name).value(`allowance:${allowances[i].id}`));
         }
 
         for(let i = 0; i < bills.length; i++){
-            billsOpt.append(new Elem("option").text(bills[i].name).value(`bill-${bills[i].id}`));
+            billsOpt.append(new Elem("option").text(bills[i].name).value(`bill:${bills[i].id}`));
         }
 
         for(let i = 0; i < income.length; i++){
-            incomeOpt.append(new Elem("option").text(income[i].name).value(`income-${income[i].id}`));
+            incomeOpt.append(new Elem("option").text(income[i].name).value(`income:${income[i].id}`));
         }
     }
 }

src/views/js/pages/ViewTransactions.js

@@ -9,6 +9,22 @@ export default class ViewTransactions extends Page{
         this.render();
     }
 
+    transactionColor(transaction){
+        if(transaction.category === "income"){
+            if(transaction.amount < 0){
+                return "red";
+            }else{
+                return "green";
+            }
+        }else{
+            if(transaction.amount < 0){
+                return "green";
+            }else{
+                return "red";
+            }
+        }
+    }
+
     render(){
         new Elem("h1")
             .text(`${user.account.name} transactions`)
@@ -22,21 +38,26 @@ export default class ViewTransactions extends Page{
         for(let i = 0; i < transactions.length; i++){
             new Elem("div")
                 .addClass("transaction")
-                .append(new Elem("p")
-                    .addClass("date")
-                    .text(transactions[i].date)
-                )
-                .append(new Elem("p")
-                    .addClass("category")
-                    .text(transactions[i].category.name)
-                )
-                .append(new Elem("p")
-                    .addClass("location")
-                    .text(transactions[i].location)
+                .append(new Elem("div")
+                    .append(new Elem("p")
+                        .addClass("date")
+                        .text(Format.dateFromTransaction(transactions[i].date))
+                    )
+                    .append(new Elem("p")
+                        .addClass("amount", this.transactionColor(transactions[i]))
+                        .text(Format.currency(transactions[i].amount))
+                    )
                 )
-                .append(new Elem("p")
-                    .addClass("amount")
-                    .text(Format.currency(transactions[i].amount))
+                .append(new Elem("div")
+                    .addClass("right")
+                    .append(new Elem("p")
+                        .addClass("category")
+                        .text(transactions[i].category.name)
+                    )
+                    .append(new Elem("p")
+                        .addClass("location")
+                        .text(transactions[i].location)
+                    )
                 )
                 .appendTo(this.transactions);
         }