Fix some styling issues

src/components/BotEntry.vue

@@ -3,19 +3,19 @@
     <span class="me-2">{{ bot.botName || bot.botId }}</span>
 
     <div class="align-items-center d-flex">
-      <span class="ms-2 me-1 align-middle">{{
-        botStore.botStores[bot.botId].isBotOnline ? '&#128994;' : '&#128308;'
-      }}</span>
       <b-form-checkbox
         v-model="autoRefreshLoc"
-        class="ms-auto float-end me-2 my-auto"
+        class="ms-auto float-end me-2 my-auto mt-1"
         title="AutoRefresh"
         variant="secondary"
+        switch
         @change="changeEvent"
       >
-        R
+        <span class="ms-2 me-1 align-middle">{{
+          botStore.botStores[bot.botId].isBotOnline ? '&#128994;' : '&#128308;'
+        }}</span>
       </b-form-checkbox>
-      <div v-if="!noButtons" class="d-flex flex-align-cent">
+      <div v-if="!noButtons" class="float-end d-flex flex-align-center">
         <b-button class="ms-1" size="sm" title="Delete bot" @click="$emit('edit')">
           <EditIcon :size="16" />
         </b-button>
@@ -87,3 +87,11 @@ export default defineComponent({
   },
 });
 </script>
+
+<style scoped lang="scss">
+.form-switch {
+  padding-left: 0;
+  display: flex;
+  flex-wrap: nowrap;
+}
+</style>

src/components/charts/CandleChartContainer.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="d-flex h-100">
-    <div class="flex-fill flex-column align-items-stretch d-flex h-100">
+    <div class="flex-fill w-100 flex-column align-items-stretch d-flex h-100">
       <div class="d-flex me-0">
         <div class="ms-2 d-flex flex-wrap flex-md-nowrap align-items-center w-auto">
           <span class="ms-2 text-nowrap">{{ strategyName }} | {{ timeframe || '' }}</span>
@@ -45,7 +45,6 @@
           </div>
 
           <div class="ms-2 me-0 me-md-1">
-            {{ showPlotConfigModal }}
             <b-button size="sm" title="Plot configurator" @click="showConfigurator">
               &#9881;
             </b-button>

src/components/layout/NavBar.vue

@@ -46,7 +46,9 @@
             </b-dropdown>
             <ReloadControl class="me-3" />
           </div>
-          <li class="d-none d-sm-block nav-item text-secondary me-2">
+          <li
+            class="d-none d-sm-flex flex-sm-wrap flex-lg-nowrap align-items-center nav-item text-secondary me-2"
+          >
             <b-nav-text class="verticalCenter small me-2">
               {{
                 (botStore.activeBotorUndefined && botStore.activeBotorUndefined.botName) ||
@@ -261,9 +263,9 @@ export default defineComponent({
   color: white !important;
 }
 
-.verticalCenter {
-  align-items: center;
-  display: inline-flex;
-  height: 100%;
-}
+// .verticalCenter {
+//   align-items: center;
+//   display: inline-flex;
+//   height: 100%;
+// }
 </style>

src/styles/_styles_ovw.scss

@@ -20,6 +20,14 @@
     display: block;
 }
 
+.btn-primary {
+    color: #ffffff
+}
+
+.text-bg-primary {
+    color: #ffffff !important;
+}
+
 [data-theme="dark"] {
     $bg-dark: rgb(18, 18, 18);
 
@@ -149,7 +157,7 @@
         background: lighten($bg-dark, 10%);
     }
 
-    .custom-select {
+    .form-select {
         color: $fg-color;
         border-color: lighten($bg-dark, 20%);
         background: $bg-dark url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23dedede' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 0.75rem center/8px 10px

src/views/Home.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="home">
-    <div class="container col-12 col-sm-6 col-lg-4">
+    <div class="d-flex justify-content-center">
       <bot-list />
     </div>
     <hr />