From 2e91720e29a760b7eec61dd95fe73c6fa02f510b Mon Sep 17 00:00:00 2001
From: Julien Calixte <julienc@bam.tech>
Date: Sun, 15 Mar 2020 17:57:53 +0100
Subject: [PATCH] :art: (account card) add gradient

---
 src/components/AccountCard.vue | 11 ++++++++---
 src/data/colors.ts             |  2 ++
 src/models/IColor.ts           |  1 +
 src/utils/index.ts             | 10 ++++++++++
 4 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/src/components/AccountCard.vue b/src/components/AccountCard.vue
index 1b90c8e..b9f91a4 100644
--- a/src/components/AccountCard.vue
+++ b/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)
     }
   }
diff --git a/src/data/colors.ts b/src/data/colors.ts
index 7a83a3a..b44f796 100644
--- a/src/data/colors.ts
+++ b/src/data/colors.ts
@@ -74,10 +74,12 @@ export default [
   (color: IColor): IColor => {
     const darkValue = lightness(color.value, dark).toLowerCase()
     const lightValue = lightness(color.value, light).toLowerCase()
+    const slightLightValue = lightness(color.value, 10).toLowerCase()
     return {
       ...color,
       darkValue,
       lightValue,
+      slightLightValue,
       constrastColor:
         fontColorContrast(color.value) === '#000000' ? darkValue : lightValue
     }
diff --git a/src/models/IColor.ts b/src/models/IColor.ts
index e87c850..da67967 100644
--- a/src/models/IColor.ts
+++ b/src/models/IColor.ts
@@ -3,5 +3,6 @@ export default interface IColor {
   value: string | null
   darkValue?: string | null
   lightValue?: string | null
+  slightLightValue?: string | null
   constrastColor?: string | null
 }
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 3b1e727..31629c7 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -70,6 +70,16 @@ export const findLightValue = (value: string): string | null => {
   return find && find.lightValue ? find.lightValue : null
 }
 
+export const findSlightLightValue = (value: string): string | null => {
+  if (!value) {
+    return null
+  }
+  const find: IColor | undefined = colors.find(
+    (color: IColor) => color.value === value
+  )
+  return find && find.slightLightValue ? find.slightLightValue : null
+}
+
 export const toHex = (text: string): string => {
   return (
     [...text]