From 6f1287f85590d7c9379b91bca65eaca8a69dbfc6 Mon Sep 17 00:00:00 2001
From: Julien Calixte <julienc@bam.tech>
Date: Fri, 25 Oct 2019 19:52:44 +0200
Subject: [PATCH] :art: (Table) Add contrast color for table

---
 src/components/AccountTransactionList.vue | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/components/AccountTransactionList.vue b/src/components/AccountTransactionList.vue
index 28a5b9d..6289a87 100644
--- a/src/components/AccountTransactionList.vue
+++ b/src/components/AccountTransactionList.vue
@@ -63,7 +63,13 @@
           </tr>
         </tbody>
         <tfoot v-if="foot">
-          <tr class="is-selected">
+          <tr
+            class="is-selected"
+            :style="{
+              'background-color': account.color,
+              color: findContrastColor(account.color)
+            }"
+          >
             <td colspan="2" class="total">total</td>
             <td class="numeric">
               {{ total | moneypad(account.mainCurrency) }}
@@ -79,6 +85,7 @@
 import { Component, Prop, Vue } from 'vue-property-decorator'
 import IAccount from '@/models/IAccount'
 import ITransaction from '@/models/ITransaction'
+import { findContrastColor } from '@/utils'
 
 @Component
 export default class AccountTransactionList extends Vue {
@@ -93,6 +100,7 @@ export default class AccountTransactionList extends Vue {
   @Prop({ type: Boolean, default: false })
   public foot!: boolean
   public filteredBy: string = ''
+  public findContrastColor = findContrastColor
 
   public get total(): number {
     return this.transactions.reduce(
@@ -136,11 +144,6 @@ export default class AccountTransactionList extends Vue {
   overflow-x: auto;
 }
 
-table tr.is-selected {
-  background-color: var(--primary-color);
-  color: var(--primary-font-color);
-}
-
 .multiline {
   line-height: 15px;
 }