From 4899e1aa57e8296a4c21319024d871a101bc9444 Mon Sep 17 00:00:00 2001
From: Matthias <xmatthias@outlook.com>
Date: Sun, 4 Jul 2021 15:34:28 +0200
Subject: [PATCH] Slightly improve table style

---
 src/components/ftbot/BacktestResultView.vue | 22 ++++-----------------
 src/components/ftbot/TradeList.vue          |  3 ++-
 src/styles/_styles_ovw.scss                 |  4 ++++
 3 files changed, 10 insertions(+), 19 deletions(-)

diff --git a/src/components/ftbot/BacktestResultView.vue b/src/components/ftbot/BacktestResultView.vue
index 03415d2e..f4874d74 100644
--- a/src/components/ftbot/BacktestResultView.vue
+++ b/src/components/ftbot/BacktestResultView.vue
@@ -56,37 +56,23 @@
             formatPriceStake(backtestResult.total_volume)
           }}</ValuePair> -->
 
-          <b-table
-            class="table-sm"
-            borderless
-            :items="backtestResultSettings"
-            :fields="backtestsettingFields"
-          >
+          <b-table small borderless :items="backtestResultSettings" :fields="backtestsettingFields">
           </b-table>
         </b-card>
       </div>
       <div class="col-md-6">
         <b-card header="Metrics">
-          <b-table
-            class="table-sm"
-            borderless
-            :items="backtestResultStats"
-            :fields="backtestResultFields"
-          >
+          <b-table small borderless :items="backtestResultStats" :fields="backtestResultFields">
           </b-table>
         </b-card>
       </div>
 
       <b-card header="Results per Sell-reason" class="mt-2">
-        <b-table
-          class="table-sm"
-          :items="backtestResult.sell_reason_summary"
-          :fields="perSellReason"
-        >
+        <b-table small hover :items="backtestResult.sell_reason_summary" :fields="perSellReason">
         </b-table>
       </b-card>
       <b-card header="Results per pair" class="mt-2">
-        <b-table class="table-sm" :items="backtestResult.results_per_pair" :fields="perPairFields">
+        <b-table small hover :items="backtestResult.results_per_pair" :fields="perPairFields">
         </b-table>
       </b-card>
 
diff --git a/src/components/ftbot/TradeList.vue b/src/components/ftbot/TradeList.vue
index 502d3a17..a171c319 100644
--- a/src/components/ftbot/TradeList.vue
+++ b/src/components/ftbot/TradeList.vue
@@ -3,7 +3,8 @@
     <div>
       <b-table
         ref="tradesTable"
-        class="table-sm"
+        small
+        hover
         :items="trades"
         :fields="tableFields"
         show-empty
diff --git a/src/styles/_styles_ovw.scss b/src/styles/_styles_ovw.scss
index 98098207..10c8401d 100644
--- a/src/styles/_styles_ovw.scss
+++ b/src/styles/_styles_ovw.scss
@@ -91,6 +91,10 @@
     hr {
         border-top: 1px solid rgba(255, 255, 255, 0.2);
     }
+    .table-hover tbody tr:hover td, .table-hover tbody tr:hover th{
+        color: $fg-color;
+        background: lighten($bg-dark, 5%);
+    }
     .custom-select{
         color: $fg-color;
         border-color: lighten($bg-dark, 20%);