small changes

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,