Add icons and restyle botcontrols

package.json

@@ -21,6 +21,7 @@
     "vue-class-component": "^7.2.5",
     "vue-echarts": "^5.0.0-beta.0",
     "vue-grid-layout": "^2.3.11",
+    "vue-material-design-icons": "^4.11.0",
     "vue-property-decorator": "^9.0.2",
     "vue-router": "^3.4.9",
     "vuex": "^3.5.1",

src/components/ftbot/BotControls.vue

@@ -2,54 +2,54 @@
   <div class="container-fluid">
     <div class="row">
       <button
-        class="btn btn-primary btn-sm col-md-5 m-1"
+        class="btn btn-secondary btn-sm ml-1"
         :disabled="!isTrading || isRunning"
         title="Start Trading"
         @click="startBot()"
       >
-        Start
+        <PlayIcon />
       </button>
       <button
-        class="btn btn-primary btn-sm col-md-5 m-1"
+        class="btn btn-secondary btn-sm ml-1"
         :disabled="!isTrading || !isRunning"
         title="Stop Trading - Also stops handling open trades."
         @click="stopBot()"
       >
-        Stop
+        <StopIcon />
       </button>
       <button
-        class="btn btn-primary btn-sm col-md-5 m-1"
+        class="btn btn-secondary btn-sm ml-1"
         :disabled="!isTrading || !isRunning"
         title="StopBuy - Stops buying, but still handles open trades"
         @click="stopBuy()"
       >
-        StopBuy
+        <PauseIcon />
       </button>
       <button
-        class="btn btn-primary btn-sm col-md-5 m-1"
+        class="btn btn-secondary btn-sm ml-1"
         :disabled="!isTrading"
         title="Reload Config - reloads configuration including strategy, resetting all settings changed on the fly."
         @click="reloadConfig()"
       >
-        Reload Config
+        <ReloadIcon />
       </button>
       <button
         v-if="botState.forcebuy_enabled"
-        class="btn btn-primary btn-sm col-md-5 m-1"
+        class="btn btn-secondary btn-sm ml-1"
         :disabled="!isTrading || !isRunning"
         title="Force Buy - Immediately buy an asset at an optional price. Sells are then handled according to strategy rules."
         @click="initiateForcebuy"
       >
-        Forcebuy
+        <ForceBuyIcon />
       </button>
       <button
         v-if="isWebserverMode"
         :disabled="isTrading"
-        class="btn-primary col-md-5 m-1"
+        class="btn btn-secondary btn-sm col-md-5 ml-1"
         title="Start Trading mode"
         @click="startTrade()"
       >
-        Start Trading
+        <PlayIcon />
       </button>
       <ForceBuyForm :modal-show="forcebuyShow" @close="this.$bvModal.hide('forcebuy-modal')" />
     </div>
@@ -61,11 +61,18 @@ import { Component, Vue } from 'vue-property-decorator';
 import { namespace } from 'vuex-class';
 import { BotState } from '@/types';
 import { BotStoreGetters } from '@/store/modules/ftbot';
+import PlayIcon from 'vue-material-design-icons/Play.vue';
+import StopIcon from 'vue-material-design-icons/Stop.vue';
+import PauseIcon from 'vue-material-design-icons/Pause.vue';
+import ReloadIcon from 'vue-material-design-icons/Reload.vue';
+import ForceBuyIcon from 'vue-material-design-icons/BankPlus.vue';
 import ForceBuyForm from './ForceBuyForm.vue';
 
 const ftbot = namespace('ftbot');
 
-@Component({ components: { ForceBuyForm } })
+@Component({
+  components: { ForceBuyForm, PlayIcon, StopIcon, PauseIcon, ReloadIcon, ForceBuyIcon },
+})
 export default class BotControls extends Vue {
   forcebuyShow = false;
 

src/components/ftbot/ReloadControl.vue

@@ -1,18 +1,25 @@
 <template>
-  <div>
-    <button class="btn btn-secondary btn-sm" @click="refreshAll(true)">Refresh all</button>
+  <div class="container-fluid">
+    <div class="row">
+      <button class="m-1 btn btn-primary" @click="refreshAll(true)"><RefreshIcon /></button>
 
-    <b-form-checkbox v-model="autoRefreshLoc" class="float-right" size="sm" switch
-      >AutoRefresh</b-form-checkbox
-    >
+      <b-form-checkbox
+        v-model="autoRefreshLoc"
+        class="ml-auto float-right mr-2"
+        title="AutoRefresh"
+        switch
+        >AutoRefresh</b-form-checkbox
+      >
+    </div>
   </div>
 </template>
 
 <script lang="ts">
 import { Component, Vue, Watch } from 'vue-property-decorator';
 import { Action, State } from 'vuex-class';
+import RefreshIcon from 'vue-material-design-icons/Refresh.vue';
 
-@Component({})
+@Component({ components: { RefreshIcon } })
 export default class ReloadControl extends Vue {
   refreshInterval: number | null = null;
 

yarn.lock

@@ -10895,6 +10895,11 @@ vue-loader@^15.9.2:
     vue-hot-reload-api "^2.3.0"
     vue-style-loader "^4.1.0"
 
+vue-material-design-icons@^4.11.0:
+  version "4.11.0"
+  resolved "https://registry.yarnpkg.com/vue-material-design-icons/-/vue-material-design-icons-4.11.0.tgz#11356194846a5806d958ede531291605cc314b33"
+  integrity sha512-3Tyeqi9jtONQ/x8WkJqiBs4t5Bd5O1t7RdM/GIPKVYoVdaRy0oy3nbRjnMGyONBlqC/NpPjzhWeoZWUMEI04nA==
+
 vue-property-decorator@^9.0.2:
   version "9.0.2"
   resolved "https://registry.yarnpkg.com/vue-property-decorator/-/vue-property-decorator-9.0.2.tgz#118459d77b4d5613ab2bbccba2edd5d7af685d30"