🎨 (App)

src/styles/index.scss

@@ -13,12 +13,12 @@
 
 html {
   overflow-y: auto;
-  background-color: var(--primary-color);
+  min-height: 100vh;
 }
 
 body {
   background-color: white;
-  height: calc(100vh - 54px);
+  padding: 15px 0 0;
 }
 
 .app {

src/views/accounts/AccountNew.vue

@@ -7,23 +7,35 @@
           <h3 class="subtitle is-3">Nom</h3>
           <div class="field">
             <div class="control">
-              <input type="text" class="input" maxlength="30" v-model="name" required />
+              <input
+                type="text"
+                class="input"
+                maxlength="30"
+                v-model="name"
+                required
+              />
             </div>
-            <p
+            <p class="help is-primary">
-              class="help is-primary"
+              {{
-            >{{ $tc('validation.max_char', 30 - name.length, { max: 30 - name.length }) }}</p>
+                $tc('validation.max_char', 30 - name.length, {
+                  max: 30 - name.length
+                })
+              }}
+            </p>
           </div>
         </div>
         <div class="column is-half">
           <h3 class="subtitle is-3" v-t="'account.main_currency'"></h3>
           <div class="control">
             <div class="select is-fullwidth">
-              <select name="main-currency" id="main-currency" v-model="mainCurrency">
+              <select
-                <option
+                name="main-currency"
-                  v-for="(cur, k) in currencies"
+                id="main-currency"
-                  :key="k"
+                v-model="mainCurrency"
-                  :value="cur"
+              >
-                >{{ cur.name }} {{ cur.symbol }}</option>
+                <option v-for="(cur, k) in currencies" :key="k" :value="cur"
+                  >{{ cur.name }} {{ cur.symbol }}</option
+                >
               </select>
             </div>
           </div>
@@ -38,9 +50,15 @@
               class="switch"
               v-model="isPublic"
             />
-            <label for="is-public">Compte {{ isPublic ? 'public' : 'privé' }}</label>
+            <label for="is-public">{{ isPublic ? 'public' : 'privé' }}</label>
-            <p class="help is-danger" v-if="isPublic" v-t="'account.publicInformation'"></p>
+            <p
-            <p class="help is-primary" v-else v-t="'account.privateInformation'"></p>
+              class="help is-primary"
+              v-t="
+                isPublic
+                  ? 'account.publicInformation'
+                  : 'account.privateInformation'
+              "
+            ></p>
           </div>
         </div>
         <div class="column is-half">
@@ -52,15 +70,26 @@
         <div class="column is-half">
           <h3 class="subtitle is-3 title-currency" @click="toggleCurrencyShow">
             <div class="icon-container">
-              <awe-icon icon="chevron-right" :rotation="currencyShow ? 90 : undefined" />
+              <awe-icon
+                icon="chevron-right"
+                :rotation="currencyShow ? 90 : undefined"
+              />
             </div>
-            {{ $tc('account.used_currencies', accountCurrencies.length, { count: accountCurrencies.length }) }}
+            {{
+              $tc('account.used_currencies', accountCurrencies.length, {
+                count: accountCurrencies.length
+              })
+            }}
           </h3>
           <transition name="fade">
             <div class="currency-list" v-if="currencyShow">
               <div class="field">
                 <div class="columns is-multiline">
-                  <div class="column is-half" v-for="(currency, k) in currencies" :key="k">
+                  <div
+                    class="column is-half"
+                    v-for="(currency, k) in currencies"
+                    :key="k"
+                  >
                     <input
                       class="is-checkradio is-block is-medium"
                       type="checkbox"
@@ -70,9 +99,11 @@
                       :value="currency"
                       :disabled="currency.code === mainCurrency.code"
                     />
-                    <label
+                    <label :for="`cur-${currency.code}`"
-                      :for="`cur-${currency.code}`"
+                      >{{ currency.name }} ({{
-                    >{{ currency.name }} ({{ currency.symbol || currency.code }})</label>
+                        currency.symbol || currency.code
+                      }})</label
+                    >
                   </div>
                 </div>
               </div>