🎨 (Color) add contrast color

src/views/accounts/AccountItem.vue

@@ -4,7 +4,11 @@
     <div class="account-item-container">
       <h2 class="title is-2">
         {{ account.name }}
-        <router-link v-if="isAdmin" class="tag" :to="{ name: 'account-setting', params: { id } }">
+        <router-link
+          v-if="isAdmin"
+          class="tag"
+          :to="{ name: 'account-setting', params: { id } }"
+        >
           <awe-icon icon="cog" />
         </router-link>
       </h2>
@@ -13,19 +17,23 @@
           <account-share :account="account" />
         </div>
       </div>
-      <article class="message is-warning" v-if="transactionWithoutExchange.length">
+      <article
+        class="message is-warning"
+        v-if="transactionWithoutExchange.length"
+      >
         <div class="message-header">
           <p>Attention</p>
         </div>
         <div class="message-body">
-          Certaines dépenses ne sont pas comptées car en attente
-          de récupérer les taux pratiqués à leur date respectives.
+          Certaines dépenses ne sont pas comptées car en attente de récupérer
+          les taux pratiqués à leur date respectives.
           <ul>
             <li v-for="(transaction, k) in transactionWithoutExchange" :key="k">
               -
               <router-link
                 :to="{ name: 'transaction', params: { id: transaction._id } }"
-              >{{ transaction.name }}</router-link>
+                >{{ transaction.name }}</router-link
+              >
             </li>
           </ul>
           <online-view @online="retrieveExchange">
@@ -33,7 +41,9 @@
               @click="retrieveExchange"
               class="button is-success is-large is-rounded"
               :class="{ 'is-loading': retrievingExchange }"
-            >Récupérer les devises</button>
+            >
+              Récupérer les devises
+            </button>
           </online-view>
         </div>
       </article>
@@ -49,31 +59,52 @@
               <awe-icon icon="tag" />
             </a>
           </li>
-          <li :class="{ 'is-active': activeTab === 'balance' }" v-if="isMultiUser">
+          <li
+            :class="{ 'is-active': activeTab === 'balance' }"
+            v-if="isMultiUser"
+          >
             <a href="#" @click.prevent="toggleTab('balance')">
               <awe-icon icon="balance-scale" />
             </a>
           </li>
-          <li :class="{ 'is-active': activeTab === 'refund' }" v-if="isMultiUser">
+          <li
+            :class="{ 'is-active': activeTab === 'refund' }"
+            v-if="isMultiUser"
+          >
             <a href="#" @click.prevent="toggleTab('refund')">
               <awe-icon icon="exchange-alt" />
             </a>
           </li>
         </ul>
       </div>
-      <transition-group :name="transitionName" tag="div" mode="out-in" v-if="transactions.length">
+      <transition-group
+        :name="transitionName"
+        tag="div"
+        mode="out-in"
+        v-if="transactions.length"
+      >
         <div
           key="transaction"
           class="transaction-panel tab-content columns is-centered"
           v-if="activeTab === 'transaction'"
         >
           <div class="column">
-            <account-transaction-list :account="account" :transactions="transactions" />
+            <account-transaction-list
+              :account="account"
+              :transactions="transactions"
+            />
           </div>
         </div>
-        <div key="tag" class="tag-panel tab-content columns is-centered" v-if="activeTab === 'tag'">
+        <div
+          key="tag"
+          class="tag-panel tab-content columns is-centered"
+          v-if="activeTab === 'tag'"
+        >
           <div class="column">
-            <tag-list :transactions="transactionWithoutRefund" :account="account" />
+            <tag-list
+              :transactions="transactionWithoutRefund"
+              :account="account"
+            />
           </div>
         </div>
         <div
@@ -82,7 +113,10 @@
           v-if="activeTab === 'balance'"
         >
           <div class="column">
-            <chart-balance :stats="userStats" :currency="account.mainCurrency" />
+            <chart-balance
+              :stats="userStats"
+              :currency="account.mainCurrency"
+            />
           </div>
         </div>
         <div
@@ -91,13 +125,19 @@
           v-if="activeTab === 'refund'"
         >
           <div class="column">
-            <div v-if="userRefunds.length" class="columns is-centered is-multiline">
+            <div
+              v-if="userRefunds.length"
+              class="columns is-centered is-multiline"
+            >
               <div
                 class="column is-one-fifth"
                 v-for="(refund, k) in userRefunds"
                 :key="`${refund.from.alias}-${refund.to.alias}`"
               >
-                <refund-transaction :refund="userRefunds[k]" :account="account" />
+                <refund-transaction
+                  :refund="userRefunds[k]"
+                  :account="account"
+                />
               </div>
             </div>
             <div v-else class="equilibrium">Le compte est à l'équilibre !</div>
@@ -136,7 +176,7 @@ import IRefund from '@/models/IRefund'
 import IStat from '@/models/IStat'
 import ITransaction from '@/models/ITransaction'
 import IUser from '@/models/IUser'
-import { primary, main, findDarkValue } from '@/utils'
+import { primary, main, findContrastColor, findDarkValue } from '@/utils'
 
 @Component({
   components: {
@@ -398,7 +438,7 @@ export default class AccountItem extends BaseAccount {
     }
     return {
       backgroundColor: this.account.color,
-      color: findDarkValue(this.account.color) || 'black'
+      color: findContrastColor(this.account.color) || 'black'
     }
   }