🎨 (app) no margin to main components

src/components/AccountList.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="account-list">
+  <div class="account-list no-margin">
     <div class="columns is-centered is-multiline" v-if="accounts.length">
       <div class="column is-3" v-for="(account, k) in accounts" :key="k">
         <account-card :account="account" />
@@ -53,9 +53,6 @@ export default class AccountList extends Vue {
 </script>
 
 <style lang="scss" scoped>
-.account-list {
-  margin: 0 0.75rem;
-}
 li {
   margin-bottom: 10px;
   &:last-child {

src/components/TagList.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="tag-list">
+  <div class="tag-list no-margin">
     <div class="columns">
       <div class="column legend-container">
         <table class="table is-fullwidth">
@@ -171,9 +171,7 @@ export default class TagList extends Vue {
 
 <style lang="scss" scoped>
 @import '../styles/variables';
-.tag-list {
+
-  margin: 0 0.75rem;
-}
 .category-list:not(:last-child) {
   border-bottom: 1px solid $main;
 }

src/components/TransactionCreate.vue

@@ -226,13 +226,13 @@ export default class TransactionCreate extends Vue {
     this.currency = transaction.mainCurrency
   }
 
-  public async submitTransaction(next: any): Promise<void> {
+  public async submitTransaction(finish: () => void): Promise<void> {
     if (!this.validate()) {
-      next()
+      finish()
       return
     }
     if (!this.currency || !this.account) {
-      next()
+      finish()
       return
     }
     const currencies: string[] = this.account.currencies.map(
@@ -282,7 +282,7 @@ export default class TransactionCreate extends Vue {
       console.warn(response)
       alertMessage(`Une erreur s'est produite à la création d'une transaction.`)
     }
-    next()
+    finish()
   }
 
   public selectAll(): void {

src/styles/index.scss

@@ -48,6 +48,10 @@ button {
   font-family: 'Nunito', sans-serif;
 }
 
+.no-margin {
+  margin: 0 0.75rem;
+}
+
 .numeric {
   font-family: 'Cutive Mono', monospace;
 }

src/views/About.vue

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

src/views/User.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="user">
+  <div class="user no-margin">
     <div v-if="user">
       <h2 class="title is-2">{{ user.userId }}</h2>
       <div class="columns is-centered">
@@ -373,6 +373,5 @@ export default class User extends Vue {
 <style scoped>
 .user {
   padding: 15px 0;
-  margin: 0 0.75rem;
 }
 </style>

src/views/accounts/AccountItem.vue

@@ -122,7 +122,7 @@
       >
         <div
           v-if="userRefunds.length"
-          class="refund-container columns is-centered is-multiline"
+          class="refund-container no-margin columns is-centered is-multiline"
         >
           <div
             class="column is-one-fifth"
@@ -132,7 +132,9 @@
             <refund-transaction :refund="userRefunds[k]" :account="account" />
           </div>
         </div>
-        <div v-else class="equilibrium">Le compte est à l'équilibre&nbsp;!</div>
+        <div v-else class="equilibrium no-margin">
+          Le compte est à l'équilibre&nbsp;!
+        </div>
       </div>
     </div>
     <fab-button
@@ -480,13 +482,9 @@ export default class AccountItem extends BaseAccount {
       min-height: calc(100vh - 52px);
     }
   }
-  .refund-container  {
-    margin: 0 0.75rem;
-  }
   .equilibrium {
     font-size: 25pt;
     color: var(--primary-font-color);
-    margin: 0 0.75rem;
   }
   table.table {
     margin: auto;

src/views/accounts/AccountNew.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="account-new">
+  <div class="account-new no-margin">
     <h1 class="title is-1" v-t="'account.create'"></h1>
     <form @submit.prevent="submitAccount">
       <div class="columns is-multiline">

src/views/accounts/AccountSetting.vue

@@ -1,9 +1,11 @@
 <template>
-  <div class="account-setting" v-if="account">
+  <div class="account-setting no-margin" v-if="account">
     <nav class="breadcrumb" aria-label="breadcrumbs" v-if="account">
       <ul>
         <li>
-          <router-link :to="{ name: 'account', params: { id: account._id } }">{{ account.name }}</router-link>
+          <router-link :to="{ name: 'account', params: { id: account._id } }">{{
+            account.name
+          }}</router-link>
         </li>
         <li class="is-active">
           <a href="#" @click.prevent>Paramètres</a>
@@ -19,17 +21,26 @@
     <div>
       <h3 class="subtitle is-3" v-t="'account.users'"></h3>
       <div class="columns is-multiline is-centered">
-        <div class="column">{{ account.users.map(u => getUserInfo(u)).join(', ')}}</div>
+        <div class="column">
+          {{ account.users.map((u) => getUserInfo(u)).join(', ') }}
+        </div>
       </div>
       <h3 class="subtitle is-3">Ajouter des amis</h3>
       <div class="columns is-centered">
         <div class="column is-one-third">
-          <account-user-new v-model="newUsers" :default-user="false" :show-title="false" />
+          <account-user-new
+            v-model="newUsers"
+            :default-user="false"
+            :show-title="false"
+          />
         </div>
       </div>
       <div class="columns is-centered" v-if="newUsers.length">
         <div class="column is-one-third">
-          <button @click="saveUsers" class="button is-primary is-fullwidth is-large">
+          <button
+            @click="saveUsers"
+            class="button is-primary is-fullwidth is-large"
+          >
             <awe-icon icon="check" />
           </button>
         </div>
@@ -46,7 +57,11 @@
             <p>Actions</p>
           </div>
           <div class="buttons action-buttons is-centered">
-            <confirm-button v-if="account.archive" class="is-warning" @confirm="active">
+            <confirm-button
+              v-if="account.archive"
+              class="is-warning"
+              @confirm="active"
+            >
               <span v-t="'account.open'"></span>
             </confirm-button>
             <confirm-button v-else class="is-warning" @confirm="archive">

src/views/transactions/TransactionNew.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="transaction-new">
+  <div class="transaction-new no-margin">
     <div v-if="!account">
       no account
       <br />

src/views/transactions/TransactionUpdate.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="transaction-update" v-if="account && transaction">
+  <div class="transaction-update no-margin" v-if="account && transaction">
     <transaction-create :account="account" :transaction="transaction" />
   </div>
 </template>

vue.config.js

@@ -2,6 +2,72 @@ module.exports = {
   pwa: {
     themeColor: '#3f4fa6',
     msTileColor: '#3f4fa6',
+    manifestOptions: {
+      background_color: '#3f4fa6',
+      theme_color: '#3f4fa6',
+      icons: [
+        {
+          src: './img/icons/android-chrome-192x192.png',
+          sizes: '192x192',
+          type: 'image/png'
+        },
+        {
+          src: './img/icons/android-chrome-512x512.png',
+          sizes: '512x512',
+          type: 'image/png'
+        },
+        {
+          src: './img/icons/apple-touch-icon-60x60.png',
+          sizes: '60x60',
+          type: 'image/png'
+        },
+        {
+          src: './img/icons/apple-touch-icon-76x76.png',
+          sizes: '76x76',
+          type: 'image/png'
+        },
+        {
+          src: './img/icons/apple-touch-icon-120x120.png',
+          sizes: '120x120',
+          type: 'image/png'
+        },
+        {
+          src: './img/icons/apple-touch-icon-152x152.png',
+          sizes: '152x152',
+          type: 'image/png'
+        },
+        {
+          src: './img/icons/apple-touch-icon-180x180.png',
+          sizes: '180x180',
+          type: 'image/png'
+        },
+        {
+          src: './img/icons/apple-touch-icon.png',
+          sizes: '180x180',
+          type: 'image/png'
+        },
+        {
+          src: './img/icons/favicon-16x16.png',
+          sizes: '16x16',
+          type: 'image/png'
+        },
+        {
+          src: './img/icons/favicon-32x32.png',
+          sizes: '32x32',
+          type: 'image/png'
+        },
+        {
+          src: './img/icons/msapplication-icon-144x144.png',
+          sizes: '144x144',
+          type: 'image/png'
+        },
+        {
+          src: './img/icons/mstile-150x150.png',
+          sizes: '150x150',
+          type: 'image/png'
+        }
+      ]
+    },
     workboxOptions: {
       skipWaiting: true,
       clientsClaim: true