style: more colors.

src/components/AccountShare.vue

@@ -1,5 +1,5 @@
 <template>
-  <article class="account-share message is-success is-medium" v-if="show && user">
+  <article class="account-share message is-success is-medium" v-if="show">
     <div class="message-header">
       <p>Partagez le compte</p>
       <button class="delete" v-if="canClose" aria-label="close" @click="hide"></button>

src/components/TransactionCreate.vue

@@ -148,7 +148,7 @@
         </div>
       </div>
     </div>
-    <fab-button @valid="submitTransaction" :margin="true">
+    <fab-button @valid="submitTransaction" :margin="true" :button-style="backgroundColor">
       <awe-icon icon="check" />
     </fab-button>
   </div>
@@ -170,7 +170,7 @@ import transactionService from '@/services/TransactionService'
 import formatDate from '@/utils/format-date'
 import notif from '@/utils/notif'
 import { money } from '@/utils/filters'
-import { confirmation, alertMessage } from '@/utils'
+import { confirmation, alertMessage, findDarkValue } from '@/utils'
 
 const today: Date = new Date()
 
@@ -296,6 +296,16 @@ export default class TransactionCreate extends Vue {
     return this.payFor.filter((p, index) => p.weight > 0)
   }
 
+  public get backgroundColor(): any | null {
+    if (!this.account || !this.account.color) {
+      return null
+    }
+    return {
+      backgroundColor: this.account.color,
+      color: findDarkValue(this.account.color) || 'black'
+    }
+  }
+
   @Watch('payBy')
   public onPayByChange(payBy: string, oldPayBy: string) {
     if (

src/data/colors.ts

@@ -2,6 +2,7 @@ import IColor from '@/models/IColor'
 import lightness from 'lightness'
 
 const dark = -70
+const light = dark * -1
 
 export default [
   {
@@ -47,10 +48,31 @@ export default [
   {
     label: 'Rouge sombre pastel',
     value: '#c03b22'
+  },
+  {
+    label: `Perle d'eau`,
+    value: '#76c5bf'
+  },
+  {
+    label: 'Expresso',
+    value: '#ab7642'
+  },
+  {
+    label: 'Menthe',
+    value: '#b3ffe1'
+  },
+  {
+    label: 'Neige',
+    value: '#fff6f6'
+  },
+  {
+    label: 'Rose lavande',
+    value: '#eea1eb'
   }
 ].map(
   (color: IColor): IColor => ({
     ...color,
-    darkValue: lightness(color.value, dark).toLowerCase()
+    darkValue: lightness(color.value, dark).toLowerCase(),
+    lightValue: lightness(color.value, light).toLowerCase()
   })
 )

src/models/IColor.ts

@@ -2,4 +2,5 @@ export default interface IColor {
   label: string | null
   value: string | null
   darkValue?: string | null
+  lightValue?: string | null
 }

src/utils/index.ts

@@ -50,6 +50,16 @@ export const findDarkValue = (value: string): string | null => {
   return find && find.darkValue ? find.darkValue : null
 }
 
+export const findLightValue = (value: string): string | null => {
+  if (!value) {
+    return null
+  }
+  const find: IColor | undefined = colors.find(
+    (color: IColor) => color.value === value
+  )
+  return find && find.lightValue ? find.lightValue : null
+}
+
 export const toHex = (text: string): string => {
   return (
     [...text]

src/views/accounts/AccountNew.vue

@@ -133,7 +133,7 @@ export default class AccountNew extends Vue {
       user.alias ? user.alias.toLowerCase() : ''
     )
     if (aliases.length === 0) {
-      notif.alert('Au moins une personne doit être créée.')
+      notif.alert('Au moins une personne doit être ajoutée au compte.')
       return false
     }
     if (aliases.length !== new Set(aliases).size) {

src/views/accounts/AccountSetting.vue

@@ -42,7 +42,7 @@
         <account-share :account="account" :can-close="false" />
       </div>
       <div class="column is-one-third">
-        <article class="message is-primary">
+        <article class="message is-primary is-medium">
           <div class="message-header">
             <p>Actions</p>
           </div>