🎨 (update margin, import modal)

src/App.vue

@@ -10,15 +10,6 @@
       <div class="navbar-brand">
         <router-link class="navbar-item" to="/">
           <img src="./assets/vaquant-root-white.png" title="vaquant" />
-          <online-view class="online-view">
-            <div slot="offline">
-              <img
-                class="icon"
-                src="./assets/icons/baseline_cloud_off_white_48dp.png"
-                alt="offline"
-              />
-            </div>
-          </online-view>
         </router-link>
         <app-installed class="navbar-item">
           <template v-slot:app-installed>
@@ -83,7 +74,6 @@ import ClickOutside from 'vue-click-outside'
 import { Action, Getter } from 'vuex-class'
 import IUser from '@/models/IUser'
 import { COFFEE_LINK } from '@/utils/constants'
-import OnlineView from '@/components/OnlineView.vue'
 import AppInstalled from '@/components/AppInstalled.vue'
 
 @Component({
@@ -91,7 +81,6 @@ import AppInstalled from '@/components/AppInstalled.vue'
     ClickOutside
   },
   components: {
-    'online-view': OnlineView,
     'app-installed': AppInstalled
   }
 })
@@ -136,7 +125,6 @@ export default class App extends Vue {
 
 <style lang="scss">
 $icon_size: 18px;
-$margin: 0.75rem;
 
 .navbar {
   color: red;
@@ -173,9 +161,4 @@ $margin: 0.75rem;
     opacity: 1;
   }
 }
-
-main {
-  margin-left: $margin;
-  margin-right: $margin;
-}
 </style>

src/components/AccountList.vue

@@ -53,6 +53,9 @@ export default class AccountList extends Vue {
 </script>
 
 <style lang="scss" scoped>
+.account-list {
+  margin: 0 0.75rem;
+}
 li {
   margin-bottom: 10px;
   &:last-child {

src/services/CouchService.ts

@@ -5,7 +5,7 @@ import bus, { SYNC } from '@/utils/bus-event'
 import IUser from '@/models/IUser'
 import notif from '@/utils/notif'
 import { debounce } from 'lodash-es'
-import { confirmation, toHex } from '@/utils'
+import { confirmation } from '@/utils'
 import store from '@/store'
 
 PouchDb.plugin(PouchDbAuthentication)
@@ -19,7 +19,7 @@ const remoteConfig = {
     withCredentials: true
   }
 }
-const LOCALE_DB: string = 'LOCALE_DB'
+const LOCALE_DB: string = 'VAQUANT_LOCALE_DB'
 const REMOTE: string = 'https://juliencalixte.ddns.net/database'
 
 class CouchService {
@@ -98,11 +98,7 @@ class CouchService {
     return !!docs.total_rows
   }
 
-  public setUser(
-    user: IUser | null,
-    hexUser: string | null,
-    replicateLocale: boolean
-  ): void {
+  public setUser(user: IUser | null, replicateLocale: boolean): void {
     const newUser: boolean =
       !this.user || (!!user && this.user.userId !== user.userId)
     this.user = user
@@ -219,8 +215,8 @@ class CouchService {
         await this.db.destroy()
         this.db = null
       }
-      const hexUser: string = toHex(this.user.userId)
-      this.setUser(this.user, hexUser, false)
+
+      this.setUser(this.user, false)
     }
   }
 

src/store.ts

@@ -64,7 +64,7 @@ export default new Vuex.Store<IState>({
     ) {
       store.user = user
       store.hexUser = user ? toHex(user.userId) : null
-      couchService.setUser(user, store.hexUser, replicate || false)
+      couchService.setUser(user, replicate || false)
     },
     [ADD_PUBLIC_ACCOUNT](store, { accountId }: { accountId: string }) {
       if (!accountId) {

src/styles/framework.scss

@@ -5,6 +5,7 @@
 @import '~bulma/sass/components/card.sass';
 @import '~bulma/sass/components/message.sass';
 @import '~bulma/sass/components/tabs.sass';
+@import '~bulma/sass/components/modal.sass';
 @import '~bulma/sass/elements/button.sass';
 @import '~bulma/sass/elements/box.sass';
 @import '~bulma/sass/elements/container.sass';

src/views/About.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="about">
-    <img class="logo" src="../assets/logo.svg" title="logo Vaquant" >
+    <img class="logo" src="../assets/logo.svg" title="logo Vaquant" />
     <p class="simple-description" v-t="'about.description'"></p>
-    <hr>
+    <hr />
     <app-resume />
   </div>
 </template>
@@ -19,6 +19,9 @@ export default class About extends Vue {}
 </script>
 
 <style>
+.about {
+  margin: 0 0.75rem;
+}
 .simple-description {
   max-width: 450pt;
   margin: auto;

src/views/Home.vue

@@ -18,7 +18,7 @@
         :to="{ name: 'user' }"
         v-t="'user.loginsignup'"
       ></router-link>
-      <div class="account-list-container box" v-if="showAccounts">
+      <div class="account-list-container" v-if="showAccounts">
         <account-list />
       </div>
       <fab-button v-else :to="{ name: 'account-new' }" :margin="true">

src/views/User.vue

@@ -8,9 +8,21 @@
         </div>
         <div class="column">
           <div class="buttons is-centered">
-            <button class="button is-warning" type="button" @click="logout" v-t="'user.logout'"></button>
-            <button class="button is-warning" type="button" @click="purge" v-t="'user.purge'"></button>
-            <confirm-button class="is-danger" @confirm="remove">{{ $t('user.delete') }}</confirm-button>
+            <button
+              class="button is-warning"
+              type="button"
+              @click="logout"
+              v-t="'user.logout'"
+            ></button>
+            <button
+              class="button is-warning"
+              type="button"
+              @click="purge"
+              v-t="'user.purge'"
+            ></button>
+            <confirm-button class="is-danger" @confirm="remove">{{
+              $t('user.delete')
+            }}</confirm-button>
           </div>
         </div>
       </div>
@@ -24,11 +36,19 @@
     <div v-else>
       <div class="tabs is-centered is-fullwidth">
         <ul>
-          <li :class="{ 'is-active': activeTab === 'login'}">
-            <a href="#" @click.prevent="activeTab = 'login'" v-t="'user.login'"></a>
+          <li :class="{ 'is-active': activeTab === 'login' }">
+            <a
+              href="#"
+              @click.prevent="activeTab = 'login'"
+              v-t="'user.login'"
+            ></a>
           </li>
-          <li :class="{ 'is-active': activeTab === 'signup'}">
-            <a href="#" @click.prevent="activeTab = 'signup'" v-t="'user.signup'"></a>
+          <li :class="{ 'is-active': activeTab === 'signup' }">
+            <a
+              href="#"
+              @click.prevent="activeTab = 'signup'"
+              v-t="'user.signup'"
+            ></a>
           </li>
         </ul>
       </div>
@@ -186,12 +206,20 @@
     <div class="modal" :class="{ 'is-active': show }">
       <div class="modal-background"></div>
       <div class="modal-card">
-        <section
-          class="modal-card-body"
-        >Voulez-vous récupérer les comptes utilisés avant d'être inscrit ?</section>
-        <footer class="modal-card-foot">
-          <button type="button" class="button is-success" @click="toReplicate(true)">Oui</button>
-          <button type="button" class="button" @click="toReplicate(false)">Non</button>
+        <section class="modal-card-body">
+          Voulez-vous récupérer les comptes utilisés avant d'être inscrit ?
+        </section>
+        <footer class="modal-card-foot buttons has-addons is-centered">
+          <button
+            type="button"
+            class="button is-success"
+            @click="toReplicate(true)"
+          >
+            Oui
+          </button>
+          <button type="button" class="button" @click="toReplicate(false)">
+            Non
+          </button>
         </footer>
       </div>
       <button class="modal-close is-large" aria-label="close"></button>

src/views/accounts/AccountItem.vue

@@ -95,47 +95,40 @@
       >
         <div
           key="transaction"
-          class="transaction-panel tab-content columns is-centered"
+          class="transaction-panel tab-content is-centered"
           v-if="activeTab === 'transaction'"
         >
-          <div class="column">
           <account-transaction-list
             :account="account"
             :transactions="transactions"
           />
         </div>
-        </div>
         <div
           key="tag"
-          class="tag-panel tab-content columns is-centered"
+          class="tag-panel tab-content is-centered"
           v-if="activeTab === 'tag'"
         >
-          <div class="column">
           <tag-list
             :transactions="transactionWithoutRefund"
             :account="account"
           />
         </div>
-        </div>
         <div
           key="balance"
-          class="balance-panel tab-content columns is-centered"
+          class="balance-panel tab-content is-centered"
           v-if="activeTab === 'balance'"
         >
-          <div class="column">
           <chart-balance
             :account="account"
             :stats="userStats"
             :currency="account.mainCurrency"
           />
         </div>
-        </div>
         <div
           key="refund"
-          class="refund-panel tab-content columns is-centered"
+          class="refund-panel tab-content is-centered"
           v-if="activeTab === 'refund'"
         >
-          <div class="column">
           <div
             v-if="userRefunds.length"
             class="columns is-centered is-multiline"
@@ -145,15 +138,11 @@
               v-for="(refund, k) in userRefunds"
               :key="`${refund.from.alias}-${refund.to.alias}`"
             >
-                <refund-transaction
-                  :refund="userRefunds[k]"
-                  :account="account"
-                />
+              <refund-transaction :refund="userRefunds[k]" :account="account" />
             </div>
           </div>
           <div v-else class="equilibrium">Le compte est à l'équilibre !</div>
         </div>
-        </div>
       </transition-group>
     </div>
     <fab-button
@@ -535,8 +524,8 @@ export default class AccountItem extends BaseAccount {
 }
 .tab-content {
   position: absolute;
-  width: calc(100% - 30px);
-  margin: auto;
+  width: 100%;
+  margin: 10px auto;
   transition: opacity 0.5s cubic-bezier(0.55, 0, 0.1, 1),
     transform 0.5s cubic-bezier(0.55, 0, 0.1, 1);
   &.columns {