Create global "profit/loss" colors

src/components/ftbot/BotComarisonList.vue

@@ -25,6 +25,12 @@
         :stake-currency="row.item.stakeCurrency"
       />
     </template>
+    <template #cell(winVsLoss)="row">
+      <div v-if="row.item.losses !== undefined">
+        <span class="text-profit">{{ row.item.wins }}</span> /
+        <span class="text-loss">{{ row.item.losses }}</span>
+      </div>
+    </template>
   </b-table>
 </template>
 
@@ -58,20 +64,20 @@ export default class BotComparisonList extends Vue {
       stakeCurrency: 'USDT',
       wins: 0,
       losses: 0,
-      winVsLoss: '',
     };
 
     Object.entries(this.allProfit).forEach(([k, v]) => {
       // TODO: handle one inactive bot ...
       val.push({
         botId: this.allAvailableBots[k].botName,
-        trades: `${this.allOpenTradeCount[k]} / ${this.allBotState[k]?.max_open_trades}`,
+        trades: `${this.allOpenTradeCount[k]} / ${this.allBotState[k]?.max_open_trades || 'N/A'}`,
         profitClosed: v.profit_closed_coin,
         profitClosedRatio: v.profit_closed_ratio_sum || 0,
         stakeCurrency: this.allBotState[k]?.stake_currency || '',
         profitOpenRatio: v.profit_all_ratio_sum - v.profit_closed_ratio_sum,
         profitOpen: v.profit_all_coin - v.profit_closed_coin,
-        winVsLoss: `${v.winning_trades || 'N/A'} / ${v.losing_trades || 'N/A'}`,
+        wins: v.winning_trades,
+        losses: v.losing_trades,
       });
       if (v.profit_closed_coin !== undefined) {
         summary.profitClosed += v.profit_closed_coin;
@@ -81,7 +87,6 @@ export default class BotComparisonList extends Vue {
         // summary.decimals = this.allBotState[k]?.stake_currency_decimals || summary.decimals;
       }
     });
-    summary.winVsLoss = `${summary.wins} / ${summary.losses}`;
     val.push(summary);
     return val;
   }

src/components/general/ProfitPill.vue

@@ -44,10 +44,10 @@ export default class ProfitPill extends Vue {
 
 <style scoped lang="scss">
 .profit-pill {
-  background: #ef5350;
+  background: $color-loss;
   border-radius: 6px;
 }
 .profit-pill-profit {
-  background: #12bb7b;
+  background: $color-profit;
 }
 </style>

src/styles/_styles_ovw.scss

@@ -4,6 +4,13 @@
     background-color: #000000;
 }
 
+.text-profit {
+    color: $color-profit;
+}
+.text-loss {
+    color: $color-loss;
+}
+
 [data-theme="dark"] {
     $bg-dark: #3c3c3c;
     $bg-darker: darken($bg-dark, 5%);

src/styles/_variables.scss

@@ -1,2 +1,5 @@
 // variables created for the project and not overwrite of bootstrap
 $fontsize-small: 0.9rem;
+
+$color-profit: #12bb7b;
+$color-loss: #ef5350;

src/views/Dashboard.vue

@@ -33,8 +33,8 @@
           </b-card>
           <b-card header="Won / lost trades">
             <b-card-text>
-              <span class="text-success">{{ profit.winning_trades }}</span> /
-              <span class="text-danger">{{ profit.losing_trades }}</span>
+              <span class="text-profit">{{ profit.winning_trades }}</span> /
+              <span class="text-loss">{{ profit.losing_trades }}</span>
             </b-card-text>
           </b-card>
           <b-card header="Last trade">