Replace transactions table with notifications

web/src/pages/PrepareTransactionsPage/TransactionsTable.module.css

@@ -1,19 +1,9 @@
-.transactionTable {
-  tbody tr {
+.transactionsTable {
+  .transaction {
     cursor: pointer;
   }
 
-  td {
-    .date {
-      white-space: nowrap;
-    }
-
-    .amount {
-      font-family: monospace;
-    }
-  }
-
-  .disabled td {
-    color: var(--bulma-text-light);  
+  .amount {
+    
   }
 }

web/src/pages/PrepareTransactionsPage/TransactionsTable.tsx

@@ -1,6 +1,7 @@
 import { useCallback, useMemo } from "react";
 import type { Transaction } from "../../types/api";
 import styles from "./TransactionsTable.module.css";
+import classNames from "classnames";
 
 export type TransactionsTableProps = {
   transactions: Transaction[];
@@ -45,33 +46,29 @@ export default function TransactionsTable({ transactions, deselected, deselect,
   const reversedTransactions = useMemo(() => transactions.slice().reverse(), [transactions]);
 
   const renderRow = useCallback((transaction: Transaction, index: number) => (
-    <tr key={index} onClick={() => changeSelection(index)} className={`${!readonly && deselected.includes(index) ? styles.disabled : ""}`}>   
-      <td><span title={transactionType(transaction)}>{transactionEmoji(transaction)}</span></td>
-      <td className={styles.date}>{transaction.date}</td>
-      <td className={styles.amount}>{transaction.amount}</td>
-      <td>{transaction.id ? <abbr title={`ID: ${transaction.id}`}>{transaction.title}</abbr> : transaction.title}</td>
-      <td>{transaction.from}</td>
-      <td>{transaction.to}</td>       
-    </tr>
+    <div
+      key={index}
+      onClick={() => changeSelection(index)}
+      className={classNames('notification', styles.transaction, {
+        'is-success': transaction.kind === 'regular' && transaction.amount > 0,
+        'is-danger': transaction.kind === 'regular' && transaction.amount < 0,
+        'is-info': transaction.kind === 'transfer',
+        'is-light': deselected.includes(index)
+      })}>
+        <h6 className="title is-6" title={transactionType(transaction)}>
+          {transactionEmoji(transaction)} {transaction.date}
+        </h6>
+      {transaction.id && (<><strong>ID:</strong> {transaction.id}<br /></>)}
+      <strong>From:</strong> {transaction.from}<br />
+      <strong>To:</strong> {transaction.to}<br />
+      <strong>Title:</strong> {transaction.title}<br />
+      <strong>Amount:</strong> <span className={styles.amount}>{transaction.amount}</span>
+    </div>
   ), [changeSelection]);
 
   return (
-    <div className="table-container">
-      <table className={`table is-hoverable ${!readonly ? styles.transactionTable : ""}`}>
-        <thead>
-          <tr>                   
-            <th></th>
-            <th>Date</th>
-            <th>Amount</th>
-            <th>Title</th>            
-            <th>From</th>
-            <th>To</th> 
-          </tr>
-        </thead>
-        <tbody>
-          {reversedTransactions.map(renderRow)}
-        </tbody>
-      </table>
+    <div className={styles.transactionsTable}>
+      {reversedTransactions.map(renderRow)}
     </div>
   );
 }