From 1842d89284ec5793ec201c72260909d67ff7fba0 Mon Sep 17 00:00:00 2001
From: Matthias <xmatthias@outlook.com>
Date: Sun, 11 Jun 2023 13:07:15 +0200
Subject: [PATCH] Improve "settings" box

---
 src/components/ftbot/ExchangeSelect.vue       | 10 ++++--
 src/components/ftbot/PairlistConfigurator.vue | 35 ++++++++-----------
 2 files changed, 23 insertions(+), 22 deletions(-)

diff --git a/src/components/ftbot/ExchangeSelect.vue b/src/components/ftbot/ExchangeSelect.vue
index ab127a1e..fab8bc56 100644
--- a/src/components/ftbot/ExchangeSelect.vue
+++ b/src/components/ftbot/ExchangeSelect.vue
@@ -1,16 +1,22 @@
 <template>
   <div class="w-100 d-flex">
-    <b-form-select id="exchange-select" v-model="exchangeModel.exchange" :options="exchangeList">
+    <b-form-select
+      id="exchange-select"
+      v-model="exchangeModel.exchange"
+      size="sm"
+      :options="exchangeList"
+    >
     </b-form-select>
     <b-form-select
       id="tradeMode-select"
       v-model="exchangeModel.trade_mode"
+      size="sm"
       :options="tradeModes"
       :disabled="tradeModes.length < 2"
     >
     </b-form-select>
     <div class="ms-2">
-      <b-button @click="botStore.activeBot.getExchangeList">
+      <b-button size="sm" @click="botStore.activeBot.getExchangeList">
         <i-mdi-refresh />
       </b-button>
     </div>
diff --git a/src/components/ftbot/PairlistConfigurator.vue b/src/components/ftbot/PairlistConfigurator.vue
index 9a35cd46..d5be8a7d 100644
--- a/src/components/ftbot/PairlistConfigurator.vue
+++ b/src/components/ftbot/PairlistConfigurator.vue
@@ -26,20 +26,21 @@
     </b-list-group>
     <div class="d-flex flex-column flex-fill">
       <PairlistConfigActions />
+      <div class="border rounded-1 p-2 mb-2">
+        <div class="d-flex align-items-center gap-2 my-2">
+          <span class="col-auto">Stake currency: </span>
+          <b-form-input v-model="pairlistStore.stakeCurrency" size="sm" />
+        </div>
 
-      <div class="d-flex align-items-center gap-2 my-2">
-        <span class="col-auto">Stake currency: </span>
-        <b-form-input v-model="pairlistStore.stakeCurrency" size="sm" />
-      </div>
-
-      <div class="mb-2">
-        <b-form-checkbox v-model="pairlistStore.customExchange" class="mb-2"
-          >Custom Exchange</b-form-checkbox
-        >
-        <exchange-select
-          v-if="pairlistStore.customExchange"
-          v-model="pairlistStore.selectedExchange"
-        />
+        <div class="mb-2 border rounded-1 p-2 text-start">
+          <b-form-checkbox v-model="pairlistStore.customExchange" class="mb-2">
+            Custom Exchange
+          </b-form-checkbox>
+          <exchange-select
+            v-if="pairlistStore.customExchange"
+            v-model="pairlistStore.selectedExchange"
+          />
+        </div>
       </div>
       <PairlistConfigBlacklist />
       <b-alert
@@ -53,7 +54,7 @@
       </b-alert>
       <div
         ref="pairlistConfigsEl"
-        class="d-flex flex-column flex-grow-1 position-relative"
+        class="d-flex flex-column flex-grow-1 position-relative border rounded-1 p-1"
         :class="{ empty: configEmpty }"
       >
         <PairlistConfigItem
@@ -188,12 +189,6 @@ watch(
 }
 
 .empty {
-  border: 3px dashed rgba(255, 255, 255, 0.65);
-
-  [data-bs-theme='light'] & {
-    border: 3px dashed rgba(0, 0, 0, 0.5);
-  }
-
   &:after {
     content: 'Drag pairlist here';
     position: absolute;