From 3ae4b019ced9b7ef76b53a75253daf6469c1a548 Mon Sep 17 00:00:00 2001
From: edmondlang <edmond_wuiming@hotmail.com>
Date: Wed, 12 Jan 2022 23:55:05 +0800
Subject: [PATCH] update text-color for  days ago in container page

---
 .../containers/elements/ContainerComponent.vue   | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/resources/assets/vue/components/containers/elements/ContainerComponent.vue b/resources/assets/vue/components/containers/elements/ContainerComponent.vue
index 07f43f1a..098a1c90 100644
--- a/resources/assets/vue/components/containers/elements/ContainerComponent.vue
+++ b/resources/assets/vue/components/containers/elements/ContainerComponent.vue
@@ -27,12 +27,16 @@
                             <p class="no-margin">{{item.transport ? item.transport.current_schedule.eta : 'n/a'}}</p>
                         </div>
                         <div class="col">
-                            <p class="no-margin fs-10 all-caps">Days Ago</p>
-                            <p class="no-margin">
-                                {{item.transport ? item.transport.current_schedule.billing_days_left.value : 'n/a'}}
-                                {{item.transport ? item.transport.current_schedule.billing_days_left.duration: ''}}
-                                {{item.transport ? 'days' : ''}}
-                            </p>
+                            <div class="row" v-if="item.transport">
+                                <div class="col">
+                                    <p class="no-margin fs-10 all-caps">Days Ago</p>
+                                    <p class="no-margin" :class="[{'text-success': item.transport.current_schedule.billing_days_left.value === '+'}, {'text-danger': item.transport.current_schedule.billing_days_left.value === '-'}]">
+                                        {{item.transport.current_schedule.billing_days_left.value}}
+                                        {{item.transport.current_schedule.billing_days_left.duration}}
+                                        days
+                                    </p>
+                                </div>
+                            </div>
                         </div>
                         <div class="col-auto">
                             <p class="no-margin fs-10 all-caps">Packages</p>