🎨 (Account) Change new account page style

src/components/AccountCard.vue

@@ -0,0 +1,66 @@
+<template>
+  <div class="account-card box" :style="getColor(account.color)" @click="goToAccount(account._id)">
+    <router-link
+      :class="{ 'is-primary': !account.color, 'is-white': account.color }"
+      :style="`color: ${findDarkValue(account.color)}`"
+      :to="{ name: 'account', params: { id: account._id } }"
+    >{{ account.name }}</router-link>
+    <div v-if="account.isPublic">
+      <awe-icon icon="users" />
+    </div>
+    <br />
+    {{ account.users && account.users.map(u => u.alias).join(', ') }}
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue } from 'vue-property-decorator'
+import { findDarkValue } from '@/utils'
+import bus, { SYNC } from '@/utils/bus-event'
+import accountService from '@/services/AccountService'
+import IAccount from '@/models/IAccount'
+import IColor from '@/models/IColor'
+import FabButton from '@/components/FabButton.vue'
+
+@Component
+export default class AccountCard extends Vue {
+  @Prop({ type: Object, required: true })
+  public account!: IAccount
+
+  public getColor(color: string | null): any | null {
+    if (!color) {
+      return null
+    }
+    return {
+      backgroundColor: color,
+      color: this.findDarkValue(color)
+    }
+  }
+
+  public findDarkValue(color: string): string | null {
+    return findDarkValue(color)
+  }
+
+  public goToAccount(id: string): void {
+    this.$router.push({ name: 'account', params: { id } })
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../styles/variables';
+
+.box {
+  border-radius: 8px;
+  word-wrap: break-word;
+  hyphens: auto;
+
+  a {
+    font-size: 1.2rem;
+    color: $main;
+  }
+  &:hover {
+    cursor: pointer;
+  }
+}
+</style>