Removed unused package and moved bootstrap from devdependcies. Cleaned up styling.

package.json

@@ -12,8 +12,9 @@
     "core-js": "^3.6.4",
     "vue": "^2.6.11",
     "vue-router": "^3.1.6",
-    "vue-to-react": "^1.0.0",
+    "vuex": "^3.1.3",
-    "vuex": "^3.1.3"
+    "bootstrap-vue": "^2.1.0",
+    "bootstrap": "^4.3.1"
   },
   "devDependencies": {
     "@babel/polyfill": "^7.7.0",
@@ -24,8 +25,6 @@
     "@vue/cli-service": "~4.3.0",
     "@vue/eslint-config-airbnb": "^5.0.2",
     "babel-eslint": "^10.1.0",
-    "bootstrap": "^4.3.1",
-    "bootstrap-vue": "^2.1.0",
     "eslint": "^6.7.2",
     "eslint-config-airbnb": "^18.1.0",
     "eslint-config-prettier": "^6.11.0",

src/App.vue

@@ -19,9 +19,9 @@ export default {
 <style>
 /* Global styles - populating to child elementes */
 .card-header {
-  /* font-size: 1.3em; */
+  font-size: 1.3em;
 }
 .card-body {
-  /* overflow: auto; */
+  overflow: auto;
 }
 </style>

src/components/layout/Body.vue

@@ -1,9 +1,6 @@
 <template>
     <main class="container-fluid">
-      <div class="container">
       <BotAlerts />
-      </div>
-
       <router-view />
     </main>
 </template>

src/components/layout/Header.vue

@@ -16,6 +16,5 @@ export default {
 <style scoped>
 header {
   padding-bottom: 1em;
-  
 }
 </style>

src/components/layout/NavBar.vue

@@ -3,7 +3,7 @@
   <b-navbar toggleable="lg" type="dark" variant="info">
     <b-navbar-brand exact to="/" >
     <img class="logo" src="@/assets/freqtrade-logo.png" alt="Home Logo" />
-          <span>Freqtrade UI</span>
+          <span class="navbar-brand-title">Freqtrade UI</span>
     </b-navbar-brand>
 
     <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
@@ -16,24 +16,10 @@
 
       <!-- Right aligned nav items -->
       <b-navbar-nav class="ml-auto">      
-        <!-- <b-nav-form>
-          <b-form-input size="sm" class="mr-sm-2" placeholder="Search"></b-form-input>
-          <b-button size="sm" class="my-2 my-sm-0" type="submit">Search</b-button>
-        </b-nav-form>
-
-        <b-nav-item-dropdown disabled text="Lang" right>
-          <b-dropdown-item href="#">EN</b-dropdown-item>
-          <b-dropdown-item href="#">ES</b-dropdown-item>
-          <b-dropdown-item href="#">RU</b-dropdown-item>
-          <b-dropdown-item href="#">FA</b-dropdown-item>
-        </b-nav-item-dropdown> -->
-
-      
           <li class="nav-item" v-if="loggedIn">
             <b-nav-item-dropdown right>
                 <template v-slot:button-content>
                   <b-avatar button @click="onClick" src="https://placekitten.com/300/300"></b-avatar>
-            <!-- <em>User</em> -->
           </template>
              <b-dropdown-item to="/settings">Settings</b-dropdown-item>
             <b-dropdown-item to="/" v-on:click.native="logout()">Sign Out</b-dropdown-item>
@@ -44,21 +30,6 @@
             <Login />
           </li>
 
-          
-        <!-- <b-nav-item-dropdown right> -->
-          <!-- Using 'button-content' slot -->
-          <!-- <template v-slot:button-content> -->
-              <!-- <b-spinner type="grow" small></b-spinner> I'm <i>custom</i> <strong>title</strong> -->
-            <!-- <em>User</em>
-          </template>
-          <li class="nav-item" v-if="loggedIn">
-            <b-dropdown-item to="/" v-on:click.native="logout()">Sign Out</b-dropdown-item>
-          </li>
-          <li v-else>
-            <Login />
-          </li> 
-        </b-nav-item-dropdown> -->
-
       </b-navbar-nav>
     </b-collapse>
   </b-navbar>
@@ -86,30 +57,17 @@ export default {
   vertical-align: middle;
   height: 30px;
 }
-.header-title {
-  margin-right: 2em;
-}
 
-#nav {
-  padding: 30px;
-}
 .dropdown-toggle::after {
     display:none;
 }
 
-/* ul {
+.navbar-brand-title{
-  padding: 3px;
+  padding-left: .5em;
-  display: flex;
-  list-style-type: none;
 }
-li {
+
-  margin-right: 15px;
+.nav-link:active {
-}
-.router-link-active {
   color: white;
 }
-nav a {
-  color: #ccc;
-} */
  
 </style>