From 10adfd9394e38e7364d0bc64edf61623f4ada02a Mon Sep 17 00:00:00 2001
From: Matthias <xmatthias@outlook.com>
Date: Thu, 3 Sep 2020 06:49:10 +0200
Subject: [PATCH] Enhance profit symbol

---
 src/components/ftbot/ProfitSymbol.vue | 25 ++++++++++++++++++++-----
 1 file changed, 20 insertions(+), 5 deletions(-)

diff --git a/src/components/ftbot/ProfitSymbol.vue b/src/components/ftbot/ProfitSymbol.vue
index a3b40603..09bab2ad 100644
--- a/src/components/ftbot/ProfitSymbol.vue
+++ b/src/components/ftbot/ProfitSymbol.vue
@@ -1,24 +1,39 @@
 <template>
-  <span>{{ isProfitable ? '&#x1F534;' : '&#x1F7E2;' }}</span>
+  <div class="h-100 d-inline-block">
+    <div :class="isProfitable ? 'triangle-up' : 'triangle-down'"></div>
+  </div>
 </template>
 
 <script lang="ts">
 import { Component, Vue, Prop } from 'vue-property-decorator';
 import { Trade } from '@/types';
 
-//
-
 @Component({})
 export default class ProfitSymbol extends Vue {
   @Prop({ required: true }) trade!: Trade;
 
   get isProfitable() {
     console.log(this.trade);
-    const res = (this.trade.close_profit ?? 1) < 0 || (this.trade.current_profit ?? 1) < 0;
+    const res = (this.trade.close_profit ?? 0) > 0 || (this.trade.current_profit ?? 0) > 0;
     console.log(res);
     return res;
   }
 }
 </script>
 
-<style scoped></style>
+<style scoped>
+.triangle-up {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 0 0.5rem 0.9rem 0.5rem;
+  border-color: transparent transparent #00db58 transparent;
+}
+.triangle-down {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 0.9rem 0.5rem 0 0.5rem;
+  border-color: #ff0000 transparent transparent transparent;
+}
+</style>