From 2e5651e1f7e4c8b0615d3384ed535f9903d0420b Mon Sep 17 00:00:00 2001
From: Matthias <xmatthias@outlook.com>
Date: Thu, 1 Feb 2024 07:10:45 +0100
Subject: [PATCH] Add color to order detail view

---
 src/components/ftbot/TradeDetail.vue | 21 +++++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

diff --git a/src/components/ftbot/TradeDetail.vue b/src/components/ftbot/TradeDetail.vue
index c2316a0a..0de1d2f0 100644
--- a/src/components/ftbot/TradeDetail.vue
+++ b/src/components/ftbot/TradeDetail.vue
@@ -112,13 +112,21 @@
               )}, filled ${formatPrice(order.filled)}`"
             >
               (#{{ key + 1 }})
+              <i-mdi-triangle
+                v-if="order.ft_order_side === 'buy'"
+                class="me-1 color-up"
+                style="font-size: 0.6rem"
+              />
+              <i-mdi-triangle-down v-else class="me-1 color-down" style="font-size: 0.6rem" />
               <DateTimeTZ
                 v-if="order.order_timestamp"
                 :date="order.order_timestamp"
                 show-timezone
               />
-              <b class="ms-1">{{ order.ft_order_side }}</b> for
-              <b>{{ formatPrice(order.safe_price) }}</b> |
+              <b class="ms-1" :class="order.ft_order_side === 'buy' ? 'color-up' : 'color-down'">{{
+                order.ft_order_side
+              }}</b>
+              for <b>{{ formatPrice(order.safe_price) }}</b> |
               <span v-if="order.remaining && order.remaining !== 0" title="remaining"
                 >{{ formatPrice(order.remaining, 8) }} /
               </span>
@@ -136,6 +144,8 @@
 import { formatPercent, formatPriceCurrency, formatPrice, timestampms } from '@/shared/formatters';
 import { Trade } from '@/types';
 
+const colorStore = useColorStore();
+
 defineProps({
   trade: { required: true, type: Object as () => Trade },
   stakeCurrency: { required: true, type: String },
@@ -148,4 +158,11 @@ defineProps({
   width: 100%;
   display: block;
 }
+.color-up {
+  color: v-bind('colorStore.colorUp');
+}
+
+.color-down {
+  color: v-bind('colorStore.colorDown');
+}
 </style>