remove GddStatus.vue, show balance in sidebar and navbar

frontend/src/components/SidebarPlugin/SideBar.spec.js

@@ -43,7 +43,7 @@ describe('SideBar', () => {
 
     describe('balance', () => {
       it('shows em-dash as balance while loading', () => {
-        expect(wrapper.find('div.row.text-center').text()).toBe('— GDD')
+        expect(wrapper.find('.gddBalance').text()).toBe('— GDD')
       })
 
       it('shows the when loaded', async () => {
@@ -51,7 +51,7 @@ describe('SideBar', () => {
           pending: false,
         })
         await wrapper.vm.$nextTick()
-        expect(wrapper.find('div.row.text-center').text()).toBe('1234.56 GDD')
+        expect(wrapper.find('.gddBalance').text()).toBe('1234.56 GDD')
       })
     })
 

frontend/src/components/SidebarPlugin/SideBar.vue

@@ -4,21 +4,24 @@
     id="sidenav-main"
   >
     <div class="container-fluid">
-      <!--Toggler-->
+      <div class="text-center">
-      <navbar-toggle-button @click.native="showSidebar"></navbar-toggle-button>
+        <div class="mb-2">
-      <div class="navbar-brand">
+          <img :src="logo" class="navbar-brand-img" alt="Gradido Logo" />
-        <img :src="logo" class="navbar-brand-img" alt="..." />
         </div>
-      <b-row class="text-center">
+      </div>
-        <b-col>{{ pending ? '—' : $n(balance, 'decimal') }} GDD</b-col>
+      <div class="gddBalance text-center">{{ pending ? '—' : $n(balance, 'decimal') }} GDD</div>
-      </b-row>
+
+      <div class="text-center">
+        <div class="avatar">
+          <vue-qrcode :value="$store.state.email" type="image/png"></vue-qrcode>
+        </div>
+      </div>
+
       <slot name="mobile-right">
         <ul class="nav align-items-center d-md-none">
           <a slot="title-container" class="nav-link" role="button">
             <div class="media align-items-center">
-              <span class="avatar avatar-sm">
+              <navbar-toggle-button @click.native="showSidebar"></navbar-toggle-button>
-                <vue-qrcode :value="$store.state.email" type="image/png"></vue-qrcode>
-              </span>
             </div>
           </a>
         </ul>

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

@@ -19,10 +19,6 @@ describe('AccountOverview', () => {
       wrapper = Wrapper()
     })
 
-    it('has a status line', () => {
-      expect(wrapper.find('gdd-status-stub').exists()).toBeTruthy()
-    })
-
     it('has a send field', () => {
       expect(wrapper.find('gdd-send-stub').exists()).toBeTruthy()
     })

frontend/src/views/Pages/AccountOverview.vue

@@ -41,7 +41,6 @@
   </div>
 </template>
 <script>
-import GddStatus from './AccountOverview/GddStatus.vue'
 import GddSend from './AccountOverview/GddSend.vue'
 import GddTransactionList from './AccountOverview/GddTransactionList.vue'
 import GddTransactionListFooter from './AccountOverview/GddTransactionListFooter.vue'
@@ -60,7 +59,6 @@ const EMPTY_TRANSACTION_DATA = {
 export default {
   name: 'Overview',
   components: {
-    GddStatus,
     GddSend,
     GddTransactionList,
     GddTransactionListFooter,

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

@@ -1,53 +0,0 @@
-import { mount } from '@vue/test-utils'
-import GddStatus from './GddStatus'
-
-const localVue = global.localVue
-
-describe('GddStatus', () => {
-  let wrapper
-
-  const mocks = {
-    $n: jest.fn((n) => n),
-  }
-
-  const propsData = {
-    balance: 1234,
-    GdtBalance: 9876,
-  }
-
-  const Wrapper = () => {
-    return mount(GddStatus, { localVue, mocks, propsData })
-  }
-
-  describe('mount', () => {
-    beforeEach(() => {
-      wrapper = Wrapper()
-    })
-
-    describe('balance is loading', () => {
-      it('it displays em-dash as the ammount of GDD', () => {
-        expect(wrapper.findAll('div.card-body').at(0).text()).toEqual('— GDD')
-      })
-
-      it('it displays em-dash as the ammount of GDT', () => {
-        expect(wrapper.findAll('div.card-body').at(1).text()).toEqual('— GDT')
-      })
-    })
-
-    describe('balance is loaded', () => {
-      beforeEach(() => {
-        wrapper.setProps({
-          pending: false,
-        })
-      })
-
-      it('it displays the ammount of GDD', () => {
-        expect(wrapper.findAll('div.card-body').at(0).text()).toEqual('1234 GDD')
-      })
-
-      it('it displays the ammount of GDT', () => {
-        expect(wrapper.findAll('div.card-body').at(1).text()).toEqual('9876 GDT')
-      })
-    })
-  })
-})

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

@@ -1,30 +0,0 @@
-<template>
-  <div>
-    <b-row>
-      <b-col>
-        <b-card style="background-color: #ebebeba3 !important">
-          {{ pending ? '—' : $n(balance, 'decimal') }} GDD
-        </b-card>
-      </b-col>
-      <b-col>
-        <b-card class="lg-h2 text-right" style="background-color: #ebebeba3 !important">
-          {{ pending ? '—' : $n(GdtBalance, 'decimal') }} GDT
-        </b-card>
-      </b-col>
-    </b-row>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'GddStatus',
-  props: {
-    balance: { type: Number, default: 0 },
-    GdtBalance: { type: Number, default: 0 },
-    pending: {
-      type: Boolean,
-      default: true,
-    },
-  },
-}
-</script>