🎨 (account card) better color contrast

This commit is contained in:
Julien Calixte
2020-04-25 01:06:05 +02:00
parent 8698d94acb
commit 7414608ed8

View File

@@ -6,7 +6,7 @@
>
<router-link
:class="{ 'is-primary': !account.color, 'is-white': account.color }"
:style="`color: ${findContrastColor(account.color || '')}`"
:style="`color: ${findDarkValue(account.color || '')}`"
:to="{ name: 'account', params: { id: account._id } }"
>{{ account.name }}</router-link
>
@@ -20,7 +20,7 @@
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'
import { findContrastColor, findDarkValue, findLightValue } from '@/utils'
import { findDarkValue, findLightValue } from '@/utils'
import bus, { SYNC } from '@/utils/bus-event'
import accountService from '@/services/AccountService'
import IAccount from '@/models/IAccount'
@@ -45,8 +45,8 @@ export default class AccountCard extends Vue {
)
}
public findContrastColor(color: string): string | null {
return findContrastColor(color)
public findDarkValue(color: string): string | null {
return findDarkValue(color)
}
public goToAccount(id: string): void {
@@ -62,7 +62,7 @@ export default class AccountCard extends Vue {
background: GRADIENT
? `linear-gradient(135deg, ${color}, ${findLightValue(color)})`
: color,
color: this.findContrastColor(color)
color: findDarkValue(color)
}
}