css mobil style, language in extra componente

frontend/src/App.vue

@@ -1,20 +1,6 @@
 <template>
   <div id="app" class="font-sans text-gray-800">
-    <header>
-      <b-col class="text-center">
-        <b-dropdown
-          size="sm"
-          split
-          variant="secondary"
-          :text="$t('language') + ' - ' + $i18n.locale"
-          class="m-md-2"
-        >
-          <b-dropdown-divider></b-dropdown-divider>
-          <b-dropdown-item @click.prevent="setLocale('de')">Deutsch</b-dropdown-item>
-          <b-dropdown-item @click.prevent="setLocale('en')">English</b-dropdown-item>
-        </b-dropdown>
-      </b-col>
-    </header>
+    <header></header>
     <div class="">
       <particles-bg type="custom" :config="config" :bg="true" />
       <component :is="$route.meta.requiresAuth ? 'DashboardLayout' : 'AuthLayoutGDD'" />
@@ -25,7 +11,6 @@
 <script>
 import { ParticlesBg } from 'particles-bg-vue'
 import icon from './icon.js'
-import { localeChanged } from 'vee-validate'
 import DashboardLayout from '@/views/Layout/DashboardLayout_gdd.vue'
 import AuthLayoutGDD from '@/views/Layout/AuthLayout_gdd.vue'
 
@@ -54,13 +39,6 @@ export default {
       },
     }
   },
-  methods: {
-    setLocale(locale) {
-      this.$i18n.locale = locale
-      this.$store.commit('language', this.$i18n.locale)
-      localeChanged(locale)
-    },
-  },
 }
 </script>
 <style>

frontend/src/components/LanguageSwitch.vue

@@ -0,0 +1,22 @@
+<template>
+  <div>
+    <b-dropdown size="sm" :text="$t('language') + ' - ' + $i18n.locale">
+      <b-dropdown-item @click.prevent="setLocale('de')">Deutsch</b-dropdown-item>
+      <b-dropdown-item @click.prevent="setLocale('en')">English</b-dropdown-item>
+    </b-dropdown>
+  </div>
+</template>
+<script>
+import { localeChanged } from 'vee-validate'
+
+export default {
+  name: 'language-switch',
+  methods: {
+    setLocale(locale) {
+      this.$i18n.locale = locale
+      this.$store.commit('language', this.$i18n.locale)
+      localeChanged(locale)
+    },
+  },
+}
+</script>

frontend/src/views/Layout/DashboardLayout_gdd.spec.js

@@ -79,7 +79,7 @@ describe('DashboardLayoutGdd', () => {
       })
 
       it('has five items in the navbar', () => {
-        expect(navbar.findAll('ul > li')).toHaveLength(2)
+        expect(navbar.findAll('ul > li')).toHaveLength(5)
       })
 
       it('has first item "send" in navbar', () => {

frontend/src/views/Layout/DashboardLayout_gdd.vue

@@ -3,12 +3,15 @@
     <notifications></notifications>
     <side-bar @logout="logout" :balance="balance">
       <template slot="links">
-        <b-nav-item href="#!" to="/overview">
+        <b-nav-item to="/overview">
           <b-nav-text class="p-0 text-lg text-muted">{{ $t('send') }}</b-nav-text>
         </b-nav-item>
-        <b-nav-item href="#!" to="/transactions">
+        <b-nav-item to="/transactions">
           <b-nav-text class="p-0 text-lg text-muted">{{ $t('transactions') }}</b-nav-text>
         </b-nav-item>
+        <b-nav-item class="d-lg-none">
+          <b-nav-text class="pt-3"><language-switch /></b-nav-text>
+        </b-nav-item>
         <!--
         <b-nav-item href="#!" to="/profile">
           <b-nav-text class="p-0 text-lg text-muted">{{ $t('site.navbar.my-profil') }}</b-nav-text>
@@ -24,7 +27,6 @@
     </side-bar>
     <div class="main-content">
       <dashboard-navbar :type="$route.meta.navbarType"></dashboard-navbar>
-
       <div @click="$sidebar.displaySidebar(false)">
         <fade-transition :duration="200" origin="center top" mode="out-in">
           <!-- your content here -->
@@ -52,6 +54,7 @@ import ContentFooter from './ContentFooter.vue'
 // import DashboardContent from './Content.vue';
 import { FadeTransition } from 'vue2-transitions'
 import communityAPI from '../../apis/communityAPI'
+import LanguageSwitch from '@/components/LanguageSwitch.vue'
 
 function hasElement(className) {
   return document.getElementsByClassName(className).length > 0
@@ -75,6 +78,7 @@ export default {
     ContentFooter,
     // DashboardContent,
     FadeTransition,
+    LanguageSwitch,
   },
   data() {
     return {

frontend/src/views/Layout/DashboardNavbar.vue

@@ -9,8 +9,9 @@
       <!-- This item dont have <b-nav-item> because item have data-action/data-target on tag <a>, wich we cant add -->
       <li class="nav-item d-sm-none"></li>
     </b-navbar-nav>
+    <language-switch class="mr-3" />
     <b-navbar-nav class="align-items-center ml-auto ml-md-0">
-      <a class="pr-1 nav-link" slot="title-container pointer">
+      <div class="pr-1" slot="title-container ">
         <b-media no-body class="align-items-center">
           <span class="pb-2 text-lg font-weight-bold">
             {{ $store.state.email }}
@@ -21,18 +22,20 @@
             </span>
           </b-media-body>
         </b-media>
-      </a>
+      </div>
     </b-navbar-nav>
   </base-nav>
 </template>
 <script>
 import { BaseNav } from '@/components'
+import LanguageSwitch from '@/components/LanguageSwitch.vue'
 import VueQrcode from 'vue-qrcode'
 
 export default {
   components: {
     BaseNav,
     VueQrcode,
+    LanguageSwitch,
   },
   props: {
     type: {

frontend/src/views/Pages/AccountOverview.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
-    <base-header class="pb-4 pt-2 bg-transparent"></base-header>
-    <b-container fluid class="p-2 mt-5">
+    <base-header class="pb-lg-4 pt-lg-2 bg-transparent"></base-header>
+    <b-container fluid class="p-lg-2 mt-lg-5">
       <gdd-status v-if="showTransactionList" :balance="balance" :gdt-balance="GdtBalance" />
       <br />
       <gdd-send

frontend/src/views/Pages/AccountOverview/GddStatus.spec.js

@@ -25,7 +25,7 @@ describe('GddStatus', () => {
     })
 
     it('it displays the ammount of GDD', () => {
-      expect(wrapper.findAll('div.card-body').at(0).text()).toEqual('1234 GDD')
+      expect(wrapper.findAll('div.card-body b').at(0).text()).toEqual('1234')
     })
 
     it('it displays the ammount of GDT', () => {

frontend/src/views/Pages/AccountOverview/GddStatus.vue

@@ -2,24 +2,15 @@
   <div>
     <b-row>
       <b-col>
-        <stats-card
-          type="gradient-red"
-          sub-title="balance_gdd"
-          class="mb-4 h1"
-          style="background-color: #ebebeba3 !important"
-        >
-          {{ $n(balance) }} GDD
-        </stats-card>
+        <b-card style="background-color: #ebebeba3 !important">
+          <b>{{ $n(balance) }}</b>
+          GDD
+        </b-card>
       </b-col>
       <b-col>
-        <stats-card
-          type="gradient-orange"
-          sub-title="balance_gdt"
-          class="mb-4 h1"
-          style="background-color: #ebebeba3 !important"
-        >
+        <b-card class="lg-h2 text-right" style="background-color: #ebebeba3 !important">
           {{ $n(GdtBalance) }} GDT
-        </stats-card>
+        </b-card>
       </b-col>
     </b-row>
   </div>

frontend/src/views/Pages/AccountOverview/GddTable.vue

@@ -88,11 +88,9 @@
           </b-card>
         </b-collapse>
       </b-list-group-item>
-      <b-list-group-item>
-        <b-alert v-if="transactions.length === 0" show variant="secondary">
-          <span class="alert-text">{{ $t('transaction.nullTransactions') }}</span>
-        </b-alert>
-      </b-list-group-item>
+      <div v-if="transactions.length === 0" class="mt-lg-4 text-center">
+        <span>{{ $t('transaction.nullTransactions') }}</span>
+      </div>
     </b-list-group>
   </div>
 </template>

frontend/src/views/Pages/UserProfileTransactionList.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <div
-      class="header pb-8 pt-5 pt-lg-8 d-flex align-items-center profile-header"
+      class="header pb-8 pt-lg-4 d-flex align-items-center profile-header"
       style="max-height: 200px"
     ></div>
     <b-container fluid class="mt--6">