From c33c8996cc21b430fa5ec714dfdf1dfa5ca55715 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 | 23 +++++++++++++++++++----
 1 file changed, 19 insertions(+), 4 deletions(-)

diff --git a/src/components/ftbot/ProfitSymbol.vue b/src/components/ftbot/ProfitSymbol.vue
index a3b40603..5bed471b 100644
--- a/src/components/ftbot/ProfitSymbol.vue
+++ b/src/components/ftbot/ProfitSymbol.vue
@@ -1,13 +1,13 @@
 <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;
@@ -21,4 +21,19 @@ export default class ProfitSymbol extends Vue {
 }
 </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>