Reintroduce alternating row-colors by date

web/src/components/TransactionRow.vue

@@ -36,6 +36,7 @@ function getStatusSymbol() {
   <tr
     v-if="!edit"
     class="{{new Date(TX.Date) > new Date() ? 'future' : ''}}"
+    :class="[index % 2 < 1 ? 'md:bg-gray-300 dark:md:bg-gray-700' : 'md:bg-gray-100 dark:md:bg-gray-900']"
   >
     <td class="hidden md:block">
       {{ formatDate(TX.Date) }}

web/src/pages/Account.vue

@@ -145,11 +145,11 @@ function createReconcilationTransaction() {
       :budgetid="budgetid"
       :accountid="accountid"
     />
-    <template v-for="(dayTransactions, index) in transactions.TransactionsByDate">
+    <template v-for="(dayTransactions, key, index) in transactions.TransactionsByDate">
       <tr class="table-row md:hidden">
         <td class="py-2" colspan="5">
           <span class="bg-gray-400 dark:bg-slate-600 rounded-lg p-1 px-2 w-full block">
-            {{ index }}
+            {{ key }}
           </span>
         </td>
       </tr>
@@ -157,6 +157,7 @@ function createReconcilationTransaction() {
         v-for="transaction in dayTransactions"
         :key="transaction.ID"
         :transactionid="transaction.ID"
+        :index="index"
       />
     </template>
   </table>