From 4a61fa0afbeb2ab981bea1c5fa1171f815f5fbc8 Mon Sep 17 00:00:00 2001
From: Matthias <xmatthias@outlook.com>
Date: Sun, 30 Oct 2022 14:26:23 +0100
Subject: [PATCH] Update to bootstrap 5 classes

---
 src/components/BotEntry.vue                       |  2 +-
 src/components/Login.vue                          |  2 +-
 src/components/charts/CandleChartContainer.vue    |  2 +-
 src/components/charts/ProfitDistributionChart.vue |  2 +-
 src/components/ftbot/BacktestHistoryLoad.vue      |  2 +-
 src/components/ftbot/BacktestResultChart.vue      |  4 ++--
 src/components/ftbot/BacktestResultView.vue       |  6 +++---
 src/components/ftbot/Balance.vue                  |  6 +++---
 src/components/ftbot/CustomTradeListEntry.vue     |  4 ++--
 src/components/ftbot/DailyStats.vue               |  6 ++----
 src/components/ftbot/FTBotAPIPairList.vue         |  6 +++---
 src/components/ftbot/PairLockList.vue             |  6 ++----
 src/components/ftbot/ReloadControl.vue            |  4 ++--
 src/components/ftbot/TimeRangeSelect.vue          |  2 +-
 src/components/ftbot/TradeActions.vue             | 10 +++++-----
 src/components/ftbot/TradeDetail.vue              |  2 +-
 src/components/general/ProfitPill.vue             |  2 +-
 src/components/general/ValuePair.vue              |  2 +-
 src/components/layout/NavBar.vue                  |  4 ++--
 src/views/Backtesting.vue                         |  4 ++--
 src/views/Graphs.vue                              |  6 +++---
 src/views/Settings.vue                            |  2 +-
 22 files changed, 41 insertions(+), 45 deletions(-)

diff --git a/src/components/BotEntry.vue b/src/components/BotEntry.vue
index 484591d0..816deb13 100644
--- a/src/components/BotEntry.vue
+++ b/src/components/BotEntry.vue
@@ -8,7 +8,7 @@
       }}</span>
       <b-form-checkbox
         v-model="autoRefreshLoc"
-        class="ml-auto float-right mr-2 my-auto"
+        class="ms-auto float-end mr-2 my-auto"
         title="AutoRefresh"
         variant="secondary"
         @change="changeEvent"
diff --git a/src/components/Login.vue b/src/components/Login.vue
index 4d15e021..a73ab3d1 100644
--- a/src/components/Login.vue
+++ b/src/components/Login.vue
@@ -63,7 +63,7 @@
           >
         </b-alert>
       </div>
-      <div v-if="inModal === false" class="float-right">
+      <div v-if="inModal === false" class="float-end">
         <b-button class="mr-2" type="reset" variant="danger">Reset</b-button>
         <b-button type="submit" variant="primary">Submit</b-button>
       </div>
diff --git a/src/components/charts/CandleChartContainer.vue b/src/components/charts/CandleChartContainer.vue
index b6e0dbfa..6eb511e1 100644
--- a/src/components/charts/CandleChartContainer.vue
+++ b/src/components/charts/CandleChartContainer.vue
@@ -40,7 +40,7 @@
             >Short exits: {{ dataset.exit_short_signals }}</small
           >
         </div>
-        <div class="ml-auto d-flex align-items-center">
+        <div class="ms-auto d-flex align-items-center">
           <b-form-checkbox v-model="settingsStore.useHeikinAshiCandles"
             >Heikin Ashi</b-form-checkbox
           >
diff --git a/src/components/charts/ProfitDistributionChart.vue b/src/components/charts/ProfitDistributionChart.vue
index 3703f81b..69b75ea2 100644
--- a/src/components/charts/ProfitDistributionChart.vue
+++ b/src/components/charts/ProfitDistributionChart.vue
@@ -5,7 +5,7 @@
     </div>
     <b-form-group
       class="w-25 order-1"
-      :class="showTitle ? 'ml-5 pl-5' : 'position-absolute'"
+      :class="showTitle ? 'ms-5 ps-5' : 'position-absolute'"
       label="Bins"
       label-for="input-bins"
       label-cols="6"
diff --git a/src/components/ftbot/BacktestHistoryLoad.vue b/src/components/ftbot/BacktestHistoryLoad.vue
index e608e9ad..d511bc1a 100644
--- a/src/components/ftbot/BacktestHistoryLoad.vue
+++ b/src/components/ftbot/BacktestHistoryLoad.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <button
-      class="btn btn-secondary float-right"
+      class="btn btn-secondary float-end"
       title="Refresh"
       aria-label="Refresh"
       @click="botStore.activeBot.getBacktestHistory"
diff --git a/src/components/ftbot/BacktestResultChart.vue b/src/components/ftbot/BacktestResultChart.vue
index 9fad52dc..cae7626c 100644
--- a/src/components/ftbot/BacktestResultChart.vue
+++ b/src/components/ftbot/BacktestResultChart.vue
@@ -1,13 +1,13 @@
 <template>
   <div>
     <div class="row">
-      <div class="col-md-11 text-left">
+      <div class="col-md-11 text-start">
         <p>
           Graph will always show the latest values for the selected strategy. Timerange:
           {{ timerange }} - {{ strategy }}
         </p>
       </div>
-      <div class="col-md-1 text-right">
+      <div class="col-md-1 text-end">
         <b-button
           aria-label="Close"
           title="Trade Navigation"
diff --git a/src/components/ftbot/BacktestResultView.vue b/src/components/ftbot/BacktestResultView.vue
index e08f9838..e6ef3093 100644
--- a/src/components/ftbot/BacktestResultView.vue
+++ b/src/components/ftbot/BacktestResultView.vue
@@ -4,9 +4,9 @@
       <h3>Backtest-result for {{ backtestResult.strategy_name }}</h3>
     </div>
 
-    <div class="row text-left ml-0">
+    <div class="row text-start ml-0">
       <div class="row w-100">
-        <div class="col-12 col-xl-6 px-0 px-xl-0 pr-xl-1">
+        <div class="col-12 col-xl-6 px-0 px-xl-0 pe-xl-1">
           <b-card header="Strategy settings">
             <b-table
               small
@@ -17,7 +17,7 @@
             </b-table>
           </b-card>
         </div>
-        <div class="col-12 col-xl-6 px-0 px-xl-0 pt-2 pt-xl-0 pl-xl-1">
+        <div class="col-12 col-xl-6 px-0 px-xl-0 pt-2 pt-xl-0 ps-xl-1">
           <b-card header="Metrics">
             <b-table small borderless :items="backtestResultStats" :fields="backtestResultFields">
             </b-table>
diff --git a/src/components/ftbot/Balance.vue b/src/components/ftbot/Balance.vue
index 5b14420f..fa2da766 100644
--- a/src/components/ftbot/Balance.vue
+++ b/src/components/ftbot/Balance.vue
@@ -1,13 +1,13 @@
 <template>
   <div>
     <div class="mb-2">
-      <label class="mr-auto h3">Balance</label>
-      <b-button class="float-right" size="sm" @click="botStore.activeBot.getBalance"
+      <label class="me-auto h3">Balance</label>
+      <b-button class="float-end" size="sm" @click="botStore.activeBot.getBalance"
         >&#x21bb;</b-button
       >
       <b-form-checkbox
         v-model="hideSmallBalances"
-        class="float-right"
+        class="float-end"
         size="sm"
         title="Hide small balances"
         button
diff --git a/src/components/ftbot/CustomTradeListEntry.vue b/src/components/ftbot/CustomTradeListEntry.vue
index 55e20c40..ee65581e 100644
--- a/src/components/ftbot/CustomTradeListEntry.vue
+++ b/src/components/ftbot/CustomTradeListEntry.vue
@@ -1,10 +1,10 @@
 <template>
   <div class="d-flex">
     <div
-      class="px-1 d-flex flex-row flex-fill text-left justify-content-between align-items-center"
+      class="px-1 d-flex flex-row flex-fill text-start justify-content-between align-items-center"
     >
       <span>
-        <span class="mr-1 font-weight-bold">{{ trade.pair }}</span>
+        <span class="mr-1 fw-bold">{{ trade.pair }}</span>
         <small class="text-secondary">(#{{ trade.trade_id }})</small>
       </span>
       <small>
diff --git a/src/components/ftbot/DailyStats.vue b/src/components/ftbot/DailyStats.vue
index ef8c04ac..901c274a 100644
--- a/src/components/ftbot/DailyStats.vue
+++ b/src/components/ftbot/DailyStats.vue
@@ -1,10 +1,8 @@
 <template>
   <div>
     <div class="mb-2">
-      <label class="mr-auto h3">Daily Stats</label>
-      <b-button class="float-right" size="sm" @click="botStore.activeBot.getDaily"
-        >&#x21bb;</b-button
-      >
+      <label class="me-auto h3">Daily Stats</label>
+      <b-button class="float-end" size="sm" @click="botStore.activeBot.getDaily">&#x21bb;</b-button>
     </div>
     <div>
       <DailyChart
diff --git a/src/components/ftbot/FTBotAPIPairList.vue b/src/components/ftbot/FTBotAPIPairList.vue
index a6d6621d..0f06db7c 100644
--- a/src/components/ftbot/FTBotAPIPairList.vue
+++ b/src/components/ftbot/FTBotAPIPairList.vue
@@ -23,11 +23,11 @@
     <!-- Blacklsit -->
     <div>
       <label
-        class="mr-auto h3"
+        class="me-auto h3"
         title="Blacklist - Select (followed by a click on '-') to remove pairs"
         >Blacklist</label
       >
-      <div class="float-right d-flex d-flex-columns pr-1">
+      <div class="float-end d-flex d-flex-columns pe-1">
         <b-button
           id="blacklist-add-btn"
           class="mr-1"
@@ -64,7 +64,7 @@
             </b-form-group>
             <b-button
               id="blacklist-submit"
-              class="float-right mb-2"
+              class="float-end mb-2"
               size="sm"
               type="submit"
               @click="addBlacklistPair"
diff --git a/src/components/ftbot/PairLockList.vue b/src/components/ftbot/PairLockList.vue
index 113f72ed..348a4143 100644
--- a/src/components/ftbot/PairLockList.vue
+++ b/src/components/ftbot/PairLockList.vue
@@ -1,10 +1,8 @@
 <template>
   <div>
     <div class="mb-2">
-      <label class="mr-auto h3">Pair Locks</label>
-      <b-button class="float-right" size="sm" @click="botStore.activeBot.getLocks"
-        >&#x21bb;</b-button
-      >
+      <label class="me-auto h3">Pair Locks</label>
+      <b-button class="float-end" size="sm" @click="botStore.activeBot.getLocks">&#x21bb;</b-button>
     </div>
     <div>
       <b-table class="table-sm" :items="botStore.activeBot.activeLocks" :fields="tableFields">
diff --git a/src/components/ftbot/ReloadControl.vue b/src/components/ftbot/ReloadControl.vue
index e4ed18c6..867c3d63 100644
--- a/src/components/ftbot/ReloadControl.vue
+++ b/src/components/ftbot/ReloadControl.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="d-flex flex-align-center ml-2">
+  <div class="d-flex align-items-center ml-2">
     <b-form-checkbox
       v-model="autoRefreshLoc"
-      class="ml-auto float-right my-auto"
+      class="ms-auto float-end my-auto"
       title="AutoRefresh"
     ></b-form-checkbox>
     <b-button
diff --git a/src/components/ftbot/TimeRangeSelect.vue b/src/components/ftbot/TimeRangeSelect.vue
index 146aa0a7..58c3a2a8 100644
--- a/src/components/ftbot/TimeRangeSelect.vue
+++ b/src/components/ftbot/TimeRangeSelect.vue
@@ -30,7 +30,7 @@
         </b-input-group>
       </b-form-group>
     </div>
-    <label class="text-left">
+    <label class="text-start">
       Timerange: <b>{{ timeRange }}</b>
     </label>
   </div>
diff --git a/src/components/ftbot/TradeActions.vue b/src/components/ftbot/TradeActions.vue
index e38b9e31..f35709ae 100644
--- a/src/components/ftbot/TradeActions.vue
+++ b/src/components/ftbot/TradeActions.vue
@@ -2,7 +2,7 @@
   <div class="d-flex flex-column">
     <b-button
       v-if="botApiVersion <= 1.1"
-      class="btn-xs text-left"
+      class="btn-xs text-start"
       size="sm"
       title="Forceexit"
       @click="$emit('forceExit', trade)"
@@ -11,7 +11,7 @@
     </b-button>
     <b-button
       v-if="botApiVersion > 1.1"
-      class="btn-xs text-left"
+      class="btn-xs text-start"
       size="sm"
       title="Forceexit limit"
       @click="$emit('forceExit', trade, 'limit')"
@@ -20,7 +20,7 @@
     </b-button>
     <b-button
       v-if="botApiVersion > 1.1"
-      class="btn-xs text-left mt-1"
+      class="btn-xs text-start mt-1"
       size="sm"
       title="Forceexit market"
       @click="$emit('forceExit', trade, 'market')"
@@ -29,7 +29,7 @@
     </b-button>
     <b-button
       v-if="botApiVersion > 2.16"
-      class="btn-xs text-left mt-1"
+      class="btn-xs text-start mt-1"
       size="sm"
       title="Forceexit partial"
       @click="$emit('forceExitPartial', trade)"
@@ -38,7 +38,7 @@
     </b-button>
 
     <b-button
-      class="btn-xs text-left mt-1"
+      class="btn-xs text-start mt-1"
       size="sm"
       title="Delete trade"
       @click="$emit('deleteTrade', trade)"
diff --git a/src/components/ftbot/TradeDetail.vue b/src/components/ftbot/TradeDetail.vue
index e8f20745..49eca986 100644
--- a/src/components/ftbot/TradeDetail.vue
+++ b/src/components/ftbot/TradeDetail.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="container text-left">
+  <div class="container text-start">
     <div class="row">
       <div class="col-lg-5">
         <h5 class="detail-header">General</h5>
diff --git a/src/components/general/ProfitPill.vue b/src/components/general/ProfitPill.vue
index 2a5679fc..1787002c 100644
--- a/src/components/general/ProfitPill.vue
+++ b/src/components/general/ProfitPill.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="d-flex justify-content-between align-items-center profit-pill pl-2 pr-1"
+    class="d-flex justify-content-between align-items-center profit-pill ps-2 pe-1"
     :class="isProfitable ? 'profit-pill-profit' : ''"
     :title="profitDesc"
   >
diff --git a/src/components/general/ValuePair.vue b/src/components/general/ValuePair.vue
index 29ba45c6..a4d31348 100644
--- a/src/components/general/ValuePair.vue
+++ b/src/components/general/ValuePair.vue
@@ -19,7 +19,7 @@ export default defineComponent({
     },
     classLabel: {
       type: String,
-      default: 'col-4 font-weight-bold mb-0',
+      default: 'col-4 fw-bold mb-0',
     },
     classValue: {
       type: String,
diff --git a/src/components/layout/NavBar.vue b/src/components/layout/NavBar.vue
index 1c38393f..216398be 100644
--- a/src/components/layout/NavBar.vue
+++ b/src/components/layout/NavBar.vue
@@ -27,7 +27,7 @@
         </b-navbar-nav>
 
         <!-- Right aligned nav items -->
-        <b-navbar-nav class="ml-auto" menu-class="w-100">
+        <b-navbar-nav class="ms-auto" menu-class="w-100">
           <!-- TODO This should show outside of the dropdown in XS mode -->
           <div class="d-flex justify-content-between">
             <b-dropdown
@@ -69,7 +69,7 @@
               </template>
               <b-dropdown-item>V: {{ settingsStore.uiVersion }}</b-dropdown-item>
               <router-link class="dropdown-item" to="/settings">Settings</router-link>
-              <b-form-checkbox v-model="layoutStore.layoutLocked" class="pl-5"
+              <b-form-checkbox v-model="layoutStore.layoutLocked" class="ps-5"
                 >Lock layout</b-form-checkbox
               >
               <b-dropdown-item @click="resetDynamicLayout">Reset Layout</b-dropdown-item>
diff --git a/src/views/Backtesting.vue b/src/views/Backtesting.vue
index 868a80aa..abdcb7bf 100644
--- a/src/views/Backtesting.vue
+++ b/src/views/Backtesting.vue
@@ -60,7 +60,7 @@
         </div>
         <small
           v-show="botStore.activeBot.backtestRunning"
-          class="text-right bt-running-label col-8 col-lg-3"
+          class="text-end bt-running-label col-8 col-lg-3"
           >Backtest running: {{ botStore.activeBot.backtestStep }}
           {{ formatPercent(botStore.activeBot.backtestProgress, 2) }}</small
         >
@@ -107,7 +107,7 @@
             label-cols-lg="2"
             label="Backtest params"
             label-size="sm"
-            label-class="font-weight-bold pt-0"
+            label-class="fw-bold pt-0"
             class="mb-0"
           >
             <b-form-group
diff --git a/src/views/Graphs.vue b/src/views/Graphs.vue
index b30ee41b..17dae48f 100644
--- a/src/views/Graphs.vue
+++ b/src/views/Graphs.vue
@@ -1,16 +1,16 @@
 <template>
   <div class="d-flex flex-column h-100">
-    <!-- <div v-if="isWebserverMode" class="mr-auto ml-3"> -->
+    <!-- <div v-if="isWebserverMode" class="me-auto ml-3"> -->
     <!-- Currently only available in Webserver mode -->
     <!-- <b-form-checkbox v-model="historicView">HistoricData</b-form-checkbox> -->
     <!-- </div> -->
     <div v-if="botStore.activeBot.isWebserverMode" class="mx-md-3 mt-2">
       <div class="d-flex flex-wrap">
-        <div class="col-md-3 text-left">
+        <div class="col-md-3 text-start">
           <span>Strategy</span>
           <StrategySelect v-model="strategy" class="mt-1"></StrategySelect>
         </div>
-        <div class="col-md-3 text-left">
+        <div class="col-md-3 text-start">
           <span>Timeframe</span>
           <TimeframeSelect v-model="selectedTimeframe" class="mt-1" />
         </div>
diff --git a/src/views/Settings.vue b/src/views/Settings.vue
index 5164864b..577c5b96 100644
--- a/src/views/Settings.vue
+++ b/src/views/Settings.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="container mt-3">
     <b-card header="FreqUI Settings">
-      <div class="text-left">
+      <div class="text-start">
         <p>UI Version: {{ settingsStore.uiVersion }}</p>
         <b-form-group
           description="Lock dynamic layouts, so they cannot move anymore. Can also be set from the navbar at the top."