🎨 (Account) Add contrast color to all styled component

src/base-components/BaseAccount.ts

@@ -3,6 +3,7 @@ import { Getter } from 'vuex-class'
 import bus, { SYNC } from '@/utils/bus-event'
 import IAccount from '@/models/IAccount'
 import IUser from '@/models/IUser'
+import { findContrastColor } from '@/utils'
 
 @Component
 export default class BaseAccount extends Vue {
@@ -25,6 +26,17 @@ export default class BaseAccount extends Vue {
     }
   }
 
+  public colorStyle(display: boolean = true) {
+    if (!this.account || !display) {
+      return {}
+    }
+    return {
+      backgroundColor: this.account.color,
+      borderColor: this.account.color,
+      color: findContrastColor(this.account.color)
+    }
+  }
+
   public beforeDestroy(): void {
     bus.$off(SYNC, this.getData)
   }

src/components/ChartBalance.vue

@@ -1,6 +1,10 @@
 <template>
   <div class="chart-balance">
-    <p>{{ $tc('account.total', statOrdered.length, { count: statOrdered.length }) }}</p>
+    <p>
+      {{
+        $tc('account.total', statOrdered.length, { count: statOrdered.length })
+      }}
+    </p>
     <table class="table is-hoverable is-striped" v-if="stats.length">
       <tbody>
         <tr v-for="(stat, k) in statOrdered" :key="k">
@@ -10,14 +14,22 @@
             v-if="stat.balance.amount !== 0"
             class="numeric"
             :class="getColor(stat.balance.amount)"
-          >{{ stat.balance.amount | money(currency) }}</td>
+          >
-          <td v-else class="conclude" :class="getColor(stat.balance.amount)"></td>
+            {{ stat.balance.amount | money(currency) }}
+          </td>
+          <td
+            v-else
+            class="conclude"
+            :class="getColor(stat.balance.amount)"
+          ></td>
         </tr>
       </tbody>
       <tfoot>
-        <tr class="is-selected">
+        <tr :style="colorStyle">
-          <th scope="row" class="total">total</th>
+          <th :style="colorStyle" scope="row" class="total">total</th>
-          <th class="numeric" colspan="2">{{ totalCost | money(currency) }}</th>
+          <th :style="colorStyle" class="numeric" colspan="2">
+            {{ totalCost | money(currency) }}
+          </th>
         </tr>
       </tfoot>
     </table>
@@ -29,6 +41,8 @@
 import { Component, Prop, Vue } from 'vue-property-decorator'
 import ICurrency from '@/models/ICurrency'
 import IStat from '@/models/IStat'
+import IAccount from '../models/IAccount'
+import { findContrastColor } from '@/utils'
 
 @Component({
   components: {
@@ -36,6 +50,8 @@ import IStat from '@/models/IStat'
   }
 })
 export default class ChartBalance extends Vue {
+  @Prop({ type: Object, required: true })
+  public account!: IAccount
   @Prop({ type: Array, default: () => [] })
   public stats!: IStat[]
   @Prop({ type: Object, required: true })
@@ -45,6 +61,16 @@ export default class ChartBalance extends Vue {
     return amount === 0 ? 'zero' : amount > 0 ? 'positive' : 'negative'
   }
 
+  public get colorStyle() {
+    if (!this.account) {
+      return {}
+    }
+    return {
+      backgroundColor: this.account.color,
+      color: findContrastColor(this.account.color)
+    }
+  }
+
   public get statOrdered(): IStat[] {
     return [...this.stats].sort((a: IStat, b: IStat) =>
       a.balance.amount < b.balance.amount ? 1 : -1

src/components/ColorPicker.vue

@@ -9,7 +9,11 @@
           :class="{ white: color.label }"
           :style="colorBackground(color)"
         >
-          <awe-icon v-if="color.value === localColor" icon="check" />
+          <awe-icon
+            :style="colorStyle"
+            v-if="color.value === localColor"
+            icon="check"
+          />
         </div>
       </div>
     </div>
@@ -20,6 +24,7 @@
 import { Component, Vue, Model, Watch } from 'vue-property-decorator'
 import IColor from '@/models/IColor'
 import colors from '@/data/colors'
+import { findContrastColor } from '../utils'
 
 @Component
 export default class ColorPicker extends Vue {
@@ -64,6 +69,12 @@ export default class ColorPicker extends Vue {
     }
   }
 
+  public get colorStyle() {
+    return {
+      color: findContrastColor(this.localColor)
+    }
+  }
+
   @Watch('localColor')
   public onColorChange(color: string | null, oldColor: string | null) {
     this.$emit('input', color)

src/utils/index.ts

@@ -40,7 +40,7 @@ export const slug = (text: string): string => {
     .replace(/-+$/, '') // Trim - from end of text
 }
 
-export const findContrastColor = (value: string): string | null => {
+export const findContrastColor = (value: string | null): string | null => {
   if (!value) {
     return null
   }

src/views/accounts/AccountItem.vue

@@ -49,29 +49,39 @@
       </article>
       <div class="tabs is-toggle is-fullwidth" v-if="transactions.length">
         <ul>
-          <li :class="{ 'is-active': activeTab === 'transaction' }">
+          <li>
-            <a href="#" @click.prevent="toggleTab('transaction')">
+            <a
+              :style="colorStyle(activeTab === 'transaction')"
+              href="#"
+              @click.prevent="toggleTab('transaction')"
+            >
               <awe-icon icon="dollar-sign" />
             </a>
           </li>
-          <li :class="{ 'is-active': activeTab === 'tag' }" v-if="tagCount > 1">
+          <li v-if="tagCount > 1">
-            <a href="#" @click.prevent="toggleTab('tag')">
+            <a
+              :style="colorStyle(activeTab === 'tag')"
+              href="#"
+              @click.prevent="toggleTab('tag')"
+            >
               <awe-icon icon="tag" />
             </a>
           </li>
-          <li
+          <li v-if="isMultiUser">
-            :class="{ 'is-active': activeTab === 'balance' }"
+            <a
-            v-if="isMultiUser"
+              :style="colorStyle(activeTab === 'balance')"
-          >
+              href="#"
-            <a href="#" @click.prevent="toggleTab('balance')">
+              @click.prevent="toggleTab('balance')"
+            >
               <awe-icon icon="balance-scale" />
             </a>
           </li>
-          <li
+          <li v-if="isMultiUser">
-            :class="{ 'is-active': activeTab === 'refund' }"
+            <a
-            v-if="isMultiUser"
+              :style="colorStyle(activeTab === 'refund')"
-          >
+              href="#"
-            <a href="#" @click.prevent="toggleTab('refund')">
+              @click.prevent="toggleTab('refund')"
+            >
               <awe-icon icon="exchange-alt" />
             </a>
           </li>
@@ -114,6 +124,7 @@
         >
           <div class="column">
             <chart-balance
+              :account="account"
               :stats="userStats"
               :currency="account.mainCurrency"
             />
@@ -465,22 +476,11 @@ export default class AccountItem extends BaseAccount {
     color: var(--primary-font-color);
   }
 
-  table tr.is-selected {
-    background-color: var(--primary-color);
-    color: var(--primary-font-color);
-  }
-
   .tabs.is-toggle {
     max-width: 400pt;
     margin: auto;
-    li.is-active {
-      a {
-        background-color: var(--primary-color);
-        border-color: var(--primary-color);
-        color: var(--primary-font-color);
-      }
-    }
   }
+
   .tabs.is-toggle {
     a {
       height: 35pt;