Colorize status

vue/src/components/OrderRow.vue

@@ -1,9 +1,10 @@
 <template>
-  <tr :class="className">
+  <tr>
     <td v-if="order.MarketId"><router-link :to="/market/ + order.MarketId">{{ order.MarketId }}</router-link></td>
-    <td>{{ order.side }} {{ order.quantity }} {{ order.ShareDescription }} @ {{ order.price }} sats</td>
+    <td :class="descClassName">{{ order.side }} {{ order.quantity }} {{ order.ShareDescription }} @ {{ order.price }} sats
+    </td>
     <td :title="order.CreatedAt" class="hidden-sm">{{ ago(new Date(order.CreatedAt)) }}</td>
-    <td class="font-mono">{{ order.Status }}</td>
+    <td :class="'font-mono ' + statusClassName">{{ order.Status }}</td>
   </tr>
 </template>
 
@@ -15,8 +16,15 @@ const props = defineProps(['order'])
 
 const order = ref(props.order)
 
-const className = computed(() => {
+const descClassName = computed(() => {
   return order.value.side === 'BUY' ? 'success' : 'error'
 })
 
+const statusClassName = computed(() => {
+  const status = order.value.Status
+  if (status === 'PAID') return 'success'
+  if (status === 'WAITING') return 'info'
+  return 'error'
+})
+
 </script>

vue/src/components/UserInvoices.vue

@@ -9,11 +9,11 @@
         <th>details</th>
       </thead>
       <tbody>
-        <tr v-for="i in  invoices " :key="i.id">
+        <tr v-for="i in  invoices" :key="i.id">
           <td>{{ i.Msats / 1000 }}</td>
           <td :title="i.CreatedAt">{{ ago(new Date(i.CreatedAt)) }}</td>
           <td :title="i.ExpiresAt" class="hidden-sm">{{ ago(new Date(i.ExpiresAt)) }}</td>
-          <td class="font-mono">{{ i.Status }}</td>
+          <td :class="'font-mono ' + classFromStatus(i.Status)">{{ i.Status }}</td>
           <td>
             <router-link :to="/invoice/ + i.Id">open</router-link>
           </td>
@@ -27,6 +27,8 @@
 import { ref } from 'vue'
 import ago from 's-ago'
 
+const classFromStatus = (status) => status === 'PAID' ? 'success' : 'error'
+
 const invoices = ref(null)
 
 const url = '/api/invoices'

vue/src/index.css

@@ -67,6 +67,15 @@ a.selected {
   color: white;
 }
 
+.info {
+  background-color: #f9db6d3d;
+  color: rgba(245, 198, 57, 0.78);
+}
+.info:hover {
+  background-color: rgba(245, 198, 57, 0.78);
+  color: white;
+}
+
 .text-muted {
   opacity: 0.67
 }