small changes

lootalot_front/src/components/Player.vue

@@ -27,17 +27,22 @@
           </div>
         </header>
       <div class="card-content">
-      <Wealth :wealth="wealth"></Wealth>
-      <p class="notification is-warning" v-show="!playerIsGroup">
-      	Dette : {{ app_state.initiated ? player.debt : "" }}gp
-	</p>
-      <a @click="switchPlayerChestVisibility" v-show="!playerIsGroup"
-        href="#" class="button is-link is-fullwidth">
-        Coffre
-        </a>
-      <Chest :player="app_state.player_id"
-      	v-show="app_state.show_player_chest">
-      	</Chest>
+      <Wealth :wealth="wealth" :debt="player.debt"></Wealth>
+      <div class="box is-shadowless" v-show="!playerIsGroup">
+      	 <div class="columns is-vcentered" @click="switchPlayerChestVisibility">
+      	   <div class="column is-one-fifth">
+		<span class="icon is-large">
+		<i class="fas fa-2x fa-box"></i>
+		</span>
+	   </div>
+	   <div class="column if-four-fifth has-text-left">
+	     <p class="is-size-3">Coffre</p>
+	   </div>
+	 </div>
+      </div>
+	 <Chest :player="app_state.player_id"
+	   v-show="app_state.show_player_chest">
+	   </Chest>
       <a href="#" class="button is-link is-fullwidth is-hidden" disabled>Historique</a>
       </div>
     </div>

lootalot_front/src/components/Wealth.vue

@@ -1,25 +1,26 @@
 <template>
   <div class="box is-shadowless">
-    <nav class="columns is-mobile is-multiline">
+    <nav class="columns is-mobile is-multiline is-vcentered">
       <div class="column">
 	<span class="icon is-large"
 	  @click="edit = !edit">
 	  <i class="fas fa-2x fa-piggy-bank"></i>
 	  </span>
+	<p v-if="debt" class="has-text-danger">-{{ debt }}gp </p>
 	</div>
-      <div class="column">
+      <div class="column has-text-info">
         <p class="heading">PP</p>
         <p class="is-size-4">{{ wealth[3] }}</p>
       	</div>
-      <div class="column">
+      <div class="column has-text-warning">
         <p class="heading">PO</p>
-        <p class="is-size-4 is-primary">{{ wealth[2] }}</p>
+        <p class="is-size-4">{{ wealth[2] }}</p>
       	</div>
-      <div class="column">
+      <div class="column has-text-grey">
         <p class="heading">PA</p>
         <p class="is-size-4">{{ wealth[1] }}</p>
         </div>
-      <div class="column">
+      <div class="column has-text-grey">
         <p class="heading">PC</p>
         <p class="is-size-4">{{ wealth[0] }}</p>
         </div>
@@ -51,7 +52,7 @@
     import NumberInput from './NumberInput.vue'
     export default {
         components: { NumberInput },
-        props: ["wealth"],
+        props: ["wealth", "debt"],
         data () { 
             return {
             	edit: false,