🎨 (account card) add gradient

src/components/AccountCard.vue

@@ -2,7 +2,7 @@
   <div
     class="account-card box"
     :style="getColor(account.color)"
-    @click="goToAccount(account._id)"
+    @click="goToAccount(account._id || '')"
   >
     <router-link
       :class="{ 'is-primary': !account.color, 'is-white': account.color }"
@@ -22,7 +22,7 @@
 
 <script lang="ts">
 import { Component, Prop, Vue } from 'vue-property-decorator'
-import { findContrastColor, findDarkValue } from '@/utils'
+import { findContrastColor, findDarkValue, findSlightLightValue } from '@/utils'
 import bus, { SYNC } from '@/utils/bus-event'
 import accountService from '@/services/AccountService'
 import IAccount from '@/models/IAccount'
@@ -33,6 +33,8 @@ import transactionService from '../services/TransactionService'
 import TransactionType from '../enums/TransactionType'
 import colors from '../data/colors'
 
+const GRADIENT = true
+
 @Component
 export default class AccountCard extends Vue {
   @Prop({ type: Object, required: true })
@@ -57,8 +59,11 @@ export default class AccountCard extends Vue {
     if (!color) {
       return null
     }
+
     return {
-      backgroundColor: color,
+      background: GRADIENT
+        ? `linear-gradient(45deg, ${color}, ${findSlightLightValue(color)})`
+        : color,
       color: this.findContrastColor(color)
     }
   }