From c4e671256a4e2f48bf52132f4f5f45aa75bb4d21 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Fri, 25 Nov 2022 10:37:08 +0100
Subject: [PATCH] step 1 from new style done

---
 .../src/assets/scss/gradido-template.scss     |   3 +
 .../Contributions/ContributionForm.vue        |  54 ++---
 .../Contributions/OpenCreationsAmount.vue     |  28 ++-
 .../GddSend/TransactionConfirmationLink.vue   |   4 +-
 .../GddSend/TransactionConfirmationSend.vue   |   4 +-
 .../GddSend/TransactionResultLink.vue         |  12 +-
 .../GddSend/TransactionResultSendError.vue    |  52 ++---
 .../GddSend/TransactionResultSendSuccess.vue  |  26 +--
 frontend/src/components/Menu/Navbar.vue       | 216 +++++++++---------
 frontend/src/components/Menu/NavbarNew.vue    | 126 ----------
 frontend/src/components/Menu/Sidebar.vue      |  78 +++++--
 frontend/src/components/Menu/SidebarNew.vue   |  95 --------
 .../ContentHeader/CommunityMember.vue         |   4 +-
 .../Template/ContentHeader/GddAmount.vue      |  23 +-
 .../Template/ContentHeader/GdtAmount.vue      |   7 +-
 .../Template/RightSide/ContributionInfo.vue   |  17 ++
 frontend/src/components/Transaction.vue       |  30 ++-
 .../Transactions/TransactionCreation.vue      |   3 -
 frontend/src/layouts/DashboardLayout.vue      |  19 +-
 .../src/layouts/templates/ContentHeader.vue   | 166 +++++++-------
 frontend/src/layouts/templates/RightSide.vue  |   5 +-
 frontend/src/pages/Community.vue              |  38 ++-
 frontend/src/pages/Overview.vue               |  40 ++--
 frontend/src/pages/Transactions.vue           |  17 +-
 24 files changed, 467 insertions(+), 600 deletions(-)
 delete mode 100644 frontend/src/components/Menu/NavbarNew.vue
 delete mode 100644 frontend/src/components/Menu/SidebarNew.vue
 create mode 100644 frontend/src/components/Template/RightSide/ContributionInfo.vue

diff --git a/frontend/src/assets/scss/gradido-template.scss b/frontend/src/assets/scss/gradido-template.scss
index fc1ccf870..3c569bf6f 100644
--- a/frontend/src/assets/scss/gradido-template.scss
+++ b/frontend/src/assets/scss/gradido-template.scss
@@ -215,6 +215,9 @@ a:hover,
 .gradido-global-color-accent {
   color: #047006;
 }
+.gradido-global-border-color-accent {
+  border-color: #047006 !important;
+}
 
 .gradido-global-color-gray {
   color: #858383;
diff --git a/frontend/src/components/Contributions/ContributionForm.vue b/frontend/src/components/Contributions/ContributionForm.vue
index f2d9a3f8c..a76c72596 100644
--- a/frontend/src/components/Contributions/ContributionForm.vue
+++ b/frontend/src/components/Contributions/ContributionForm.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="container contribution-form">
-    <div class="my-3">
+  <div class="contribution-form">
+    <!-- <div class="my-3">
       <h3>{{ $t('contribution.formText.yourContribution') }}</h3>
       {{ $t('contribution.formText.bringYourTalentsTo') }}
       <ul class="my-3">
@@ -11,7 +11,7 @@
       <div class="my-3">
         <b>{{ $t('contribution.formText.describeYourCommunity') }}</b>
       </div>
-    </div>
+    </div> -->
     <b-form
       ref="form"
       @submit.prevent="submit"
@@ -126,7 +126,10 @@ export default {
   },
   props: {
     value: { type: Object, required: true },
-    updateAmount: { type: String, required: false },
+    isThisMonth: { type: Boolean, required: true },
+    minimalDate: { type: Date, required: true },
+    maxGddLastMonth: { type: Number, required: true },
+    maxGddThisMonth: { type: Number, required: true },
   },
   data() {
     return {
@@ -137,9 +140,9 @@ export default {
     }
   },
   methods: {
-    numberFormat(value) {
-      return value.replace(PATTERN_NON_DIGIT, '')
-    },
+    // numberFormat(value) {
+    //   return value.replace(PATTERN_NON_DIGIT, '')
+    // },
     submit() {
       this.form.amount = this.form.amount.replace(PATTERN_NON_DIGIT, '')
       // spreading is needed for testing
@@ -153,19 +156,15 @@ export default {
       this.form.memo = ''
       this.form.amount = ''
     },
-    textForMonth(date, availableAmount) {
-      const obj = {
-        monthAndYear: this.$d(date, 'monthAndYear'),
-        creation: availableAmount,
-      }
-      return this.$t('contribution.formText.openAmountForMonth', obj)
-    },
+    // textForMonth(date, availableAmount) {
+    //   const obj = {
+    //     monthAndYear: this.$d(date, 'monthAndYear'),
+    //     creation: availableAmount,
+    //   }
+    //   return this.$t('contribution.formText.openAmountForMonth', obj)
+    // },
   },
   computed: {
-    minimalDate() {
-      const date = new Date(this.maximalDate)
-      return new Date(date.setMonth(date.getMonth() - 1, 1))
-    },
     disabled() {
       return (
         this.form.date === '' ||
@@ -178,25 +177,6 @@ export default {
         (!this.isThisMonth && parseInt(this.form.amount) > parseInt(this.maxGddLastMonth))
       )
     },
-    isThisMonth() {
-      const formDate = new Date(this.form.date)
-      return (
-        formDate.getFullYear() === this.maximalDate.getFullYear() &&
-        formDate.getMonth() === this.maximalDate.getMonth()
-      )
-    },
-    maxGddLastMonth() {
-      // when existing contribution is edited, the amount is added back on top of the amount
-      return this.form.id && !this.isThisMonth
-        ? parseInt(this.$store.state.creation[1]) + parseInt(this.updateAmount)
-        : this.$store.state.creation[1]
-    },
-    maxGddThisMonth() {
-      // when existing contribution is edited, the amount is added back on top of the amount
-      return this.form.id && this.isThisMonth
-        ? parseInt(this.$store.state.creation[2]) + parseInt(this.updateAmount)
-        : this.$store.state.creation[2]
-    },
     validMaxGDD() {
       return Number(this.isThisMonth ? this.maxGddThisMonth : this.maxGddLastMonth)
     },
diff --git a/frontend/src/components/Contributions/OpenCreationsAmount.vue b/frontend/src/components/Contributions/OpenCreationsAmount.vue
index 741519467..97b4f6df4 100644
--- a/frontend/src/components/Contributions/OpenCreationsAmount.vue
+++ b/frontend/src/components/Contributions/OpenCreationsAmount.vue
@@ -1,18 +1,30 @@
 <template>
   <div class="open-creations-amount bg-white appBoxShadow gradido-border-radius p-4">
-    <b-table striped hover :items="items"></b-table>
+    <div class="my-3">
+      <ul class="my-3">
+        <li v-html="textForMonth(new Date(minimalDate), maxGddLastMonth)"></li>
+        <li v-html="textForMonth(new Date(), maxGddThisMonth)"></li>
+      </ul>
+    </div>
   </div>
 </template>
 <script>
 export default {
   name: 'OpenCreationsAmount',
-  data() {
-    return {
-      items: [
-        { monat: 'Oktober', status: 'Max. erreicht', eingereicht: '50 h', stundenOffen: '0 h' },
-        { monat: 'November', status: 'einreichen', eingereicht: '20 h', stundenOffen: '30 h' },
-      ],
-    }
+  props: {
+    minimalDate: { type: Date, required: true },
+    maxGddLastMonth: { type: Number, required: true },
+    maxGddThisMonth: { type: Number, required: true },
+  },
+
+  methods: {
+    textForMonth(date, availableAmount) {
+      const obj = {
+        monthAndYear: this.$d(date, 'monthAndYear'),
+        creation: availableAmount,
+      }
+      return this.$t('contribution.formText.openAmountForMonth', obj)
+    },
   },
 }
 </script>
diff --git a/frontend/src/components/GddSend/TransactionConfirmationLink.vue b/frontend/src/components/GddSend/TransactionConfirmationLink.vue
index 2620753ee..8d6ae0d0f 100644
--- a/frontend/src/components/GddSend/TransactionConfirmationLink.vue
+++ b/frontend/src/components/GddSend/TransactionConfirmationLink.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="transaction-confirm-link">
+  <div class="transaction-confirm-link bg-white appBoxShadow gradido-border-radius p-3">
     <b-row class="confirm-box-link">
       <b-col class="text-right mt-4 mb-3">
         <div class="alert-heading text-left h3">{{ $t('gdd_per_link.header') }}</div>
@@ -9,7 +9,7 @@
       </b-col>
     </b-row>
 
-    <b-container class="bv-example-row mt-3 mb-3 gray-background p-2">
+    <b-container class="bv-example-row mt-3 mb-5">
       <div class="alert-heading text-left h3">{{ $t('advanced-calculation') }}</div>
       <b-row class="pr-3">
         <b-col class="text-right">{{ $t('form.current_balance') }}</b-col>
diff --git a/frontend/src/components/GddSend/TransactionConfirmationSend.vue b/frontend/src/components/GddSend/TransactionConfirmationSend.vue
index 42c65c0e9..cbf507c0b 100644
--- a/frontend/src/components/GddSend/TransactionConfirmationSend.vue
+++ b/frontend/src/components/GddSend/TransactionConfirmationSend.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="transaction-confirm-send">
+  <div class="transaction-confirm-send bg-white appBoxShadow gradido-border-radius p-3">
     <b-row class="confirm-box-send">
       <b-col>
         <div class="display-4 pb-4">{{ $t('form.send_check') }}</div>
@@ -33,7 +33,7 @@
       </b-col>
     </b-row>
 
-    <b-container class="bv-example-row mt-3 mb-3 gray-background p-2">
+    <b-container class="bv-example-row mt-5 mb-5">
       <div class="alert-heading text-left h3">{{ $t('advanced-calculation') }}</div>
       <b-row class="pr-3">
         <b-col class="text-right">{{ $t('form.current_balance') }}</b-col>
diff --git a/frontend/src/components/GddSend/TransactionResultLink.vue b/frontend/src/components/GddSend/TransactionResultLink.vue
index 2e1e68ac0..fac35da3f 100644
--- a/frontend/src/components/GddSend/TransactionResultLink.vue
+++ b/frontend/src/components/GddSend/TransactionResultLink.vue
@@ -1,7 +1,7 @@
 <template>
-  <b-row>
-    <b-col>
-      <b-card class="p-0 gradido-custom-background">
+  <div class="bg-white appBoxShadow gradido-border-radius p-4">
+    <b-row>
+      <b-col>
         <div class="h3 mb-4">{{ $t('gdd_per_link.created') }}</div>
         <clipboard-copy
           :link="link"
@@ -18,9 +18,9 @@
             {{ $t('form.close') }}
           </b-button>
         </div>
-      </b-card>
-    </b-col>
-  </b-row>
+      </b-col>
+    </b-row>
+  </div>
 </template>
 <script>
 import ClipboardCopy from '../ClipboardCopy.vue'
diff --git a/frontend/src/components/GddSend/TransactionResultSendError.vue b/frontend/src/components/GddSend/TransactionResultSendError.vue
index 279ee931e..a8bc2d74b 100644
--- a/frontend/src/components/GddSend/TransactionResultSendError.vue
+++ b/frontend/src/components/GddSend/TransactionResultSendError.vue
@@ -1,35 +1,29 @@
 <template>
-  <b-container>
-    <b-row>
-      <b-col>
-        <b-card class="p-0 gradido-custom-background">
-          <div class="p-4 gradido-font-15rem">
-            <div>{{ $t('form.sorry') }}</div>
-            <hr />
+  <div class="bg-white appBoxShadow gradido-border-radius p-4">
+    <div>
+      <div class="gradido-font-15rem">{{ $t('form.sorry') }}</div>
+      <hr />
 
-            <div class="test-send_transaction_error">{{ $t('form.send_transaction_error') }}</div>
+      <div class="test-send_transaction_error">{{ $t('form.send_transaction_error') }}</div>
 
-            <hr />
-            <div class="test-receiver-not-found" v-if="errorResult === 'recipient not known'">
-              {{ $t('transaction.receiverNotFound') }}
-            </div>
-            <div
-              class="test-receiver-not-found"
-              v-if="errorResult === 'GraphQL error: The recipient account was deleted'"
-            >
-              {{ $t('transaction.receiverDeleted') }}
-            </div>
-            <div v-else>{{ errorResult }}</div>
-          </div>
-          <p class="text-center mt-3">
-            <b-button variant="secondary" @click="$emit('on-reset')">
-              {{ $t('form.close') }}
-            </b-button>
-          </p>
-        </b-card>
-      </b-col>
-    </b-row>
-  </b-container>
+      <hr />
+      <div class="test-receiver-not-found" v-if="errorResult === 'recipient not known'">
+        {{ $t('transaction.receiverNotFound') }}
+      </div>
+      <div
+        class="test-receiver-not-found"
+        v-if="errorResult === 'GraphQL error: The recipient account was deleted'"
+      >
+        {{ $t('transaction.receiverDeleted') }}
+      </div>
+      <div v-else>{{ errorResult }}</div>
+    </div>
+    <p class="text-center mt-5">
+      <b-button variant="secondary" @click="$emit('on-reset')">
+        {{ $t('form.close') }}
+      </b-button>
+    </p>
+  </div>
 </template>
 <script>
 export default {
diff --git a/frontend/src/components/GddSend/TransactionResultSendSuccess.vue b/frontend/src/components/GddSend/TransactionResultSendSuccess.vue
index bc8c39f3b..ec5f70d98 100644
--- a/frontend/src/components/GddSend/TransactionResultSendSuccess.vue
+++ b/frontend/src/components/GddSend/TransactionResultSendSuccess.vue
@@ -1,20 +1,14 @@
 <template>
-  <b-container>
-    <b-row>
-      <b-col>
-        <b-card class="p-0 gradido-custom-background">
-          <div class="p-4">
-            {{ $t('form.thx') }}
-            <hr />
-            {{ $t('form.send_transaction_success') }}
-          </div>
-          <p class="text-center mt-3">
-            <b-button variant="primary" @click="$emit('on-reset')">{{ $t('form.close') }}</b-button>
-          </p>
-        </b-card>
-      </b-col>
-    </b-row>
-  </b-container>
+  <div class="bg-white appBoxShadow gradido-border-radius p-3">
+    <div class="p-4">
+      {{ $t('form.thx') }}
+      <hr />
+      {{ $t('form.send_transaction_success') }}
+    </div>
+    <div class="text-center mt-5">
+      <b-button variant="primary" @click="$emit('on-reset')">{{ $t('form.close') }}</b-button>
+    </div>
+  </div>
 </template>
 <script>
 export default {
diff --git a/frontend/src/components/Menu/Navbar.vue b/frontend/src/components/Menu/Navbar.vue
index ac58189c2..457f38701 100644
--- a/frontend/src/components/Menu/Navbar.vue
+++ b/frontend/src/components/Menu/Navbar.vue
@@ -1,131 +1,125 @@
 <template>
-  <div class="component-navbar">
-    <b-navbar toggleable="lg" type="light" variant="faded">
-      <div class="navbar-brand">
-        <b-navbar-nav @click="$emit('set-visible', false)">
-          <b-nav-item to="/overview">
-            <img :src="logo" class="navbar-brand-img" alt="..." />
-          </b-nav-item>
+  <div class="auth-header position-sticky">
+    <b-navbar toggleable="lg" class="pr-4">
+      <b-navbar-brand>
+        <b-img
+          class="imgLogo ml--3 mt-lg--2 mt-3 p-2 mb-3 zindex1000"
+          :src="logo"
+          width="200"
+          alt="..."
+        />
+      </b-navbar-brand>
+      <b-img class="sheet-img position-absolute zindex1000" :src="sheet"></b-img>
+
+      <b-collapse id="nav-collapse" is-nav class="ml-5">
+        <b-navbar-nav class="ml-auto" right>
+          <div class="mb-2">
+            <router-link to="/profile">
+              <div>
+                <div class="d-flex">
+                  <div class="mr-3">
+                    <b-avatar
+                      button
+                      variant="primary"
+                      :text="avatarShortName"
+                      class="align-baseline"
+                    ></b-avatar>
+                  </div>
+                  <div>
+                    <div class="small">{{ avatarLongName }}</div>
+
+                    <div class="text-right small">
+                      <small>{{ $store.state.email }}</small>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </router-link>
+          </div>
         </b-navbar-nav>
-      </div>
-
-      <b-navbar-nav class="ml-auto" is-nav>
-        <b-nav-item>
-          <b-icon v-if="pending" icon="three-dots" animation="cylon"></b-icon>
-          <div v-else>{{ pending ? $t('em-dash') : balance | amount }} {{ $t('GDD') }}</div>
-        </b-nav-item>
-        <b-nav-item
-          to="/profile"
-          right
-          class="d-none d-sm-none d-md-none d-lg-flex shadow-lg"
-          data-test="navbar-item-username"
-        >
-          <small>
-            {{ $store.state.firstName }} {{ $store.state.lastName }}
-            <b>{{ $store.state.email }}</b>
-            <b-icon class="ml-3" icon="gear-fill" aria-hidden="true"></b-icon>
-          </small>
-        </b-nav-item>
-      </b-navbar-nav>
-
-      <b-navbar-toggle
-        target="false"
-        @click="$emit('set-visible', (visibleCollapse = !visible))"
-      ></b-navbar-toggle>
+      </b-collapse>
     </b-navbar>
-
-    <b-collapse id="collapse-nav" v-model="visibleCollapse" class="p-3 b-collaps-gradido">
-      <b-nav vertical @click="$emit('set-visible', false)">
-        <div class="text-right">
-          <b-link to="/profile">
-            <small>
-              {{ $store.state.firstName }}
-              {{ $store.state.lastName }}
-              <b>{{ $store.state.email }}</b>
-            </small>
-          </b-link>
-        </div>
-        <b-nav-item to="/overview" class="mb-3">
-          <b-icon icon="house" aria-hidden="true"></b-icon>
-          {{ $t('navigation.overview') }}
-        </b-nav-item>
-        <b-nav-item to="/send" class="mb-3">
-          <b-icon icon="arrow-left-right" aria-hidden="true"></b-icon>
-          {{ $t('navigation.send') }}
-        </b-nav-item>
-        <b-nav-item to="/transactions" class="mb-3">
-          <b-icon icon="layout-text-sidebar-reverse" aria-hidden="true"></b-icon>
-          {{ $t('navigation.transactions') }}
-        </b-nav-item>
-        <b-nav-item to="/gdt" class="mb-3">
-          <b-icon icon="layout-text-sidebar-reverse" aria-hidden="true"></b-icon>
-          {{ $t('gdt.gdt') }}
-        </b-nav-item>
-        <b-nav-item to="/community" class="mb-3">
-          <b-icon icon="people" aria-hidden="true"></b-icon>
-          {{ $t('navigation.community') }}
-        </b-nav-item>
-        <b-nav-item to="/profile" class="mb-3">
-          <b-icon icon="gear" aria-hidden="true"></b-icon>
-          {{ $t('navigation.profile') }}
-        </b-nav-item>
-        <b-nav-item to="/information" class="mb-3">
-          <b-icon icon="info-circle" aria-hidden="true"></b-icon>
-          {{ $t('navigation.info') }}
-        </b-nav-item>
-        <br />
-        <b-nav-item class="mb-3" v-if="$store.state.isAdmin" @click="$emit('admin')">
-          <b-icon icon="shield-check" aria-hidden="true"></b-icon>
-          {{ $t('navigation.admin_area') }}
-        </b-nav-item>
-        <b-nav-item class="mb-3" @click="$emit('logout')">
-          <b-icon icon="power" aria-hidden="true"></b-icon>
-          {{ $t('navigation.logout') }}
-        </b-nav-item>
-      </b-nav>
-    </b-collapse>
+    <!-- <div class="alertBox">
+      <b-alert show dismissible variant="light" class="nav-alert text-dark">
+        <small>{{ $t('1000thanks') }}</small>
+      </b-alert>
+    </div> -->
   </div>
 </template>
+
 <script>
 export default {
-  name: 'navbar',
+  name: 'AuthNavbar',
   props: {
-    visible: {
-      type: Boolean,
-      required: true,
-    },
-    balance: {
-      type: Number,
-      required: true,
-    },
-    pending: {
-      type: Boolean,
-      required: true,
-    },
+    balance: { type: Number, required: true },
   },
   data() {
     return {
-      logo: 'img/brand/green.png',
-      visibleCollapse: this.visible,
+      logo: '/img/brand/green.png',
+      sheet: '/img/template/Blaetter.png',
     }
   },
-  watch: {
-    visible() {
-      this.visibleCollapse = this.visible
+  computed: {
+    avatarShortName() {
+      return this.$store.state.firstName[0] + this.$store.state.lastName[0]
+    },
+    avatarLongName() {
+      return `${this.$store.state.firstName} ${this.$store.state.lastName}`
     },
   },
 }
 </script>
-<style>
-.b-collaps-gradido {
-  position: absolute;
-  z-index: 100000;
-  background-color: #dfe0e3f5;
-  width: 100%;
-  box-shadow: #b4b4b4 0px 13px 22px;
-  font-size: large;
+
+<style lang="scss">
+.auth-header {
+  font-family: 'Open Sans', sans-serif !important;
+  height: 150px;
 }
-.b-collaps-gradido li :hover {
-  background-color: #e9e7e7f5;
+
+.authNavbar > .nav-link {
+  color: #383838 !important;
+}
+
+.navbar-toggler {
+  font-size: 2.25rem;
+}
+
+.authNavbar > .router-link-exact-active {
+  color: #0e79bc !important;
+}
+
+button.navbar-toggler > span.navbar-toggler-icon {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(4, 112, 6, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
+}
+
+.sheet-img {
+  top: -11px;
+  left: 50%;
+  max-width: 64%;
+}
+.alertBox {
+  left: 20%;
+  right: 20%;
+  position: absolute;
+  z-index: 1000;
+  top: 25px;
+}
+@media screen and (max-width: 1170px) {
+  .sheet-img {
+    left: 40%;
+  }
+  .alertBox {
+    position: static;
+    margin-left: 5%;
+    margin-right: 5%;
+    z-index: 0;
+  }
+}
+@media screen and (max-width: 450px) {
+  .sheet-img {
+    top: -15px;
+    left: 10%;
+    max-width: 61%;
+  }
 }
 </style>
diff --git a/frontend/src/components/Menu/NavbarNew.vue b/frontend/src/components/Menu/NavbarNew.vue
deleted file mode 100644
index 5fd913dd4..000000000
--- a/frontend/src/components/Menu/NavbarNew.vue
+++ /dev/null
@@ -1,126 +0,0 @@
-<template>
-  <div class="auth-header position-sticky">
-    <b-navbar toggleable="lg" class="pr-4">
-      <b-navbar-brand>
-        <b-img
-          class="imgLogo ml--3 mt-lg--2 mt-3 p-2 mb-3 zindex1000"
-          :src="logo"
-          width="200"
-          alt="..."
-        />
-        
-      </b-navbar-brand>
-      <b-img class="sheet-img position-absolute zindex1000" :src="sheet"></b-img>
-
-      <b-collapse id="nav-collapse" is-nav class="ml-5">
-        <b-navbar-nav class="ml-auto" right>
-          <div class="mb-2">
-            <router-link to="/profile">
-              <div>
-                <div class="d-flex">
-                  <div class="mr-3">
-                    <b-avatar
-                      button
-                      variant="primary"
-                      :text="avatarShortName"
-                      class="align-baseline"
-                    ></b-avatar>
-                  </div>
-                  <div>
-                    <div class="small">{{ avatarLongName }}</div>
-
-                    <div class="text-right small">
-                      <small>{{ $store.state.email }}</small>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </router-link>
-          </div>
-        </b-navbar-nav>
-      </b-collapse>
-    </b-navbar>
-    <!-- <div class="alertBox">
-      <b-alert show dismissible variant="light" class="nav-alert text-dark">
-        <small>{{ $t('1000thanks') }}</small>
-      </b-alert>
-    </div> -->
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'AuthNavbar',
-  props: {
-    balance: { type: Number, required: true },
-  },
-  data() {
-    return {
-      logo: '/img/brand/green.png',
-      sheet: '/img/template/Blaetter.png',
-    }
-  },
-  computed: {
-    avatarShortName() {
-      return this.$store.state.firstName[0] + this.$store.state.lastName[0]
-    },
-    avatarLongName() {
-      return `${this.$store.state.firstName} ${this.$store.state.lastName}`
-    },
-  },
-}
-</script>
-
-<style lang="scss">
-.auth-header {
-  font-family: 'Open Sans', sans-serif !important;
-  height: 150px;
-}
-
-.authNavbar > .nav-link {
-  color: #383838 !important;
-}
-
-.navbar-toggler {
-  font-size: 2.25rem;
-}
-
-.authNavbar > .router-link-exact-active {
-  color: #0e79bc !important;
-}
-
-button.navbar-toggler > span.navbar-toggler-icon {
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(4, 112, 6, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
-}
-
-.sheet-img {
-  top: -11px;
-  left: 50%;
-  max-width: 64%;
-}
-.alertBox {
-  left: 20%;
-  right: 20%;
-  position: absolute;
-  z-index: 1000;
-  top: 25px;
-}
-@media screen and (max-width: 1170px) {
-  .sheet-img {
-    left: 40%;
-  }
-  .alertBox {
-    position: static;
-    margin-left: 5%;
-    margin-right: 5%;
-    z-index: 0;
-  }
-}
-@media screen and (max-width: 450px) {
-  .sheet-img {
-    top: -15px;
-    left: 10%;
-    max-width: 61%;
-  }
-}
-</style>
diff --git a/frontend/src/components/Menu/Sidebar.vue b/frontend/src/components/Menu/Sidebar.vue
index 42e3b4186..b3b6e93b8 100644
--- a/frontend/src/components/Menu/Sidebar.vue
+++ b/frontend/src/components/Menu/Sidebar.vue
@@ -1,47 +1,72 @@
 <template>
-  <div id="component-sidebar">
-    <div class="pl-3">
-      <p></p>
-      <div class="mb-6">
+  <div id="component-sidebar ">
+    <div id="side-menu" ref="sideMenu" class="pl-lg-1 gradido-border-radius appBoxShadow pt-2 mt-4">
+      <!-- @mouseout="$emit('toogleMobilMenu')" -->
+      <div class="mb-6 mt-3">
         <b-nav vertical class="w-200">
           <b-nav-item to="/overview" class="mb-3">
             <b-icon icon="house" aria-hidden="true"></b-icon>
-            {{ $t('navigation.overview') }}
+            <span class="d-none d-lg-inline ml-2">{{ $t('navigation.overview') }}</span>
           </b-nav-item>
+          <b-nav-item to="/storys" class="mb-3">
+            <b-icon icon="card-heading" aria-hidden="true"></b-icon>
+            <span class="d-none d-lg-inline ml-2">{{ $t('navigation.topStories') }}</span>
+          </b-nav-item>
+          <b-nav-item to="/addresses" class="mb-3">
+            <b-icon icon="bookmark" aria-hidden="true"></b-icon>
+            <span class="d-none d-lg-inline ml-2">{{ $t('navigation.adresses') }}</span>
+          </b-nav-item>
+
           <b-nav-item to="/send" class="mb-3">
             <b-icon icon="arrow-left-right" aria-hidden="true"></b-icon>
-            {{ $t('navigation.send') }}
+            <span class="d-none d-lg-inline ml-2">{{ $t('navigation.send') }}</span>
           </b-nav-item>
           <b-nav-item to="/transactions" class="mb-3">
             <b-icon icon="layout-text-sidebar-reverse" aria-hidden="true"></b-icon>
-            {{ $t('navigation.transactions') }}
+            <span class="d-none d-lg-inline ml-2">{{ $t('navigation.transactions') }}</span>
           </b-nav-item>
-          <b-nav-item to="/gdt" class="mb-3">
-            <b-icon icon="layout-text-sidebar-reverse" aria-hidden="true"></b-icon>
-            {{ $t('gdt.gdt') }}
+          <b-nav-item to="/profile" class="mb-3">
+            <b-icon icon="person" aria-hidden="true"></b-icon>
+            <span class="d-none d-lg-inline ml-2">{{ $t('navigation.profile') }}</span>
           </b-nav-item>
           <b-nav-item to="/community" class="mb-3">
             <b-icon icon="people" aria-hidden="true"></b-icon>
-            {{ $t('navigation.community') }}
-          </b-nav-item>
-          <b-nav-item to="/profile" class="mb-3" data-test="profile-menu">
-            <b-icon icon="gear" aria-hidden="true"></b-icon>
-            {{ $t('navigation.profile') }}
-          </b-nav-item>
-          <b-nav-item to="/information" class="mb-3">
-            <b-icon icon="info-circle" aria-hidden="true"></b-icon>
-            {{ $t('navigation.info') }}
+            <span class="d-none d-lg-inline ml-2">{{ $t('navigation.members') }}</span>
           </b-nav-item>
         </b-nav>
         <hr />
         <b-nav vertical class="w-100">
+          <b-nav-item
+            @click="
+              lightmode = !lightmode
+              $emit('modeToggle')
+            "
+            class="mb-3"
+          >
+            <b-icon :icon="lightmode ? 'toggle-on' : 'toggle-off'" aria-hidden="true"></b-icon>
+            <span class="d-none d-lg-inline ml-2">{{ $t('navigation.lightmode') }}</span>
+            <label for="checkbox" class="switch-label">
+              <span v-if="lightmode">{{ $t('navigation.moon') }}</span>
+              <span v-else>{{ $t('navigation.sun') }}</span>
+            </label>
+          </b-nav-item>
+          <b-nav-item to="/settings" class="mb-3">
+            <b-icon icon="gear" aria-hidden="true"></b-icon>
+            <span class="d-none d-lg-inline ml-2">{{ $t('navigation.settings') }}</span>
+          </b-nav-item>
           <b-nav-item class="mb-3" v-if="$store.state.isAdmin" @click="$emit('admin')">
             <b-icon icon="shield-check" aria-hidden="true"></b-icon>
-            {{ $t('navigation.admin_area') }}
+            <span class="d-none d-lg-inline ml-2">{{ $t('navigation.admin_area') }}</span>
           </b-nav-item>
-          <b-nav-item class="mb-3" @click="$emit('logout')" data-test="logout-menu">
+          <b-nav-item class="mb-3" @click="$emit('logout')">
             <b-icon icon="power" aria-hidden="true"></b-icon>
-            {{ $t('navigation.logout') }}
+            <span class="d-none d-lg-inline ml-2">{{ $t('navigation.logout') }}</span>
+          </b-nav-item>
+          <b-nav-item
+            class="mt-4 mb-3 d-block d-md-none d-lg-none"
+            @click="$emit('toogleMobilMenu')"
+          >
+            <b-icon icon="x" aria-hidden="true"></b-icon>
           </b-nav-item>
         </b-nav>
       </div>
@@ -51,6 +76,11 @@
 <script>
 export default {
   name: 'sidebar',
+  data() {
+    return {
+      lightmode: false,
+    }
+  },
 }
 </script>
 <style>
@@ -58,4 +88,8 @@ export default {
 #component-sidebar .active {
   font-weight: bold;
 }
+#component-sidebar {
+  min-width: 53px;
+  max-width: 200px;
+}
 </style>
diff --git a/frontend/src/components/Menu/SidebarNew.vue b/frontend/src/components/Menu/SidebarNew.vue
deleted file mode 100644
index b3b6e93b8..000000000
--- a/frontend/src/components/Menu/SidebarNew.vue
+++ /dev/null
@@ -1,95 +0,0 @@
-<template>
-  <div id="component-sidebar ">
-    <div id="side-menu" ref="sideMenu" class="pl-lg-1 gradido-border-radius appBoxShadow pt-2 mt-4">
-      <!-- @mouseout="$emit('toogleMobilMenu')" -->
-      <div class="mb-6 mt-3">
-        <b-nav vertical class="w-200">
-          <b-nav-item to="/overview" class="mb-3">
-            <b-icon icon="house" aria-hidden="true"></b-icon>
-            <span class="d-none d-lg-inline ml-2">{{ $t('navigation.overview') }}</span>
-          </b-nav-item>
-          <b-nav-item to="/storys" class="mb-3">
-            <b-icon icon="card-heading" aria-hidden="true"></b-icon>
-            <span class="d-none d-lg-inline ml-2">{{ $t('navigation.topStories') }}</span>
-          </b-nav-item>
-          <b-nav-item to="/addresses" class="mb-3">
-            <b-icon icon="bookmark" aria-hidden="true"></b-icon>
-            <span class="d-none d-lg-inline ml-2">{{ $t('navigation.adresses') }}</span>
-          </b-nav-item>
-
-          <b-nav-item to="/send" class="mb-3">
-            <b-icon icon="arrow-left-right" aria-hidden="true"></b-icon>
-            <span class="d-none d-lg-inline ml-2">{{ $t('navigation.send') }}</span>
-          </b-nav-item>
-          <b-nav-item to="/transactions" class="mb-3">
-            <b-icon icon="layout-text-sidebar-reverse" aria-hidden="true"></b-icon>
-            <span class="d-none d-lg-inline ml-2">{{ $t('navigation.transactions') }}</span>
-          </b-nav-item>
-          <b-nav-item to="/profile" class="mb-3">
-            <b-icon icon="person" aria-hidden="true"></b-icon>
-            <span class="d-none d-lg-inline ml-2">{{ $t('navigation.profile') }}</span>
-          </b-nav-item>
-          <b-nav-item to="/community" class="mb-3">
-            <b-icon icon="people" aria-hidden="true"></b-icon>
-            <span class="d-none d-lg-inline ml-2">{{ $t('navigation.members') }}</span>
-          </b-nav-item>
-        </b-nav>
-        <hr />
-        <b-nav vertical class="w-100">
-          <b-nav-item
-            @click="
-              lightmode = !lightmode
-              $emit('modeToggle')
-            "
-            class="mb-3"
-          >
-            <b-icon :icon="lightmode ? 'toggle-on' : 'toggle-off'" aria-hidden="true"></b-icon>
-            <span class="d-none d-lg-inline ml-2">{{ $t('navigation.lightmode') }}</span>
-            <label for="checkbox" class="switch-label">
-              <span v-if="lightmode">{{ $t('navigation.moon') }}</span>
-              <span v-else>{{ $t('navigation.sun') }}</span>
-            </label>
-          </b-nav-item>
-          <b-nav-item to="/settings" class="mb-3">
-            <b-icon icon="gear" aria-hidden="true"></b-icon>
-            <span class="d-none d-lg-inline ml-2">{{ $t('navigation.settings') }}</span>
-          </b-nav-item>
-          <b-nav-item class="mb-3" v-if="$store.state.isAdmin" @click="$emit('admin')">
-            <b-icon icon="shield-check" aria-hidden="true"></b-icon>
-            <span class="d-none d-lg-inline ml-2">{{ $t('navigation.admin_area') }}</span>
-          </b-nav-item>
-          <b-nav-item class="mb-3" @click="$emit('logout')">
-            <b-icon icon="power" aria-hidden="true"></b-icon>
-            <span class="d-none d-lg-inline ml-2">{{ $t('navigation.logout') }}</span>
-          </b-nav-item>
-          <b-nav-item
-            class="mt-4 mb-3 d-block d-md-none d-lg-none"
-            @click="$emit('toogleMobilMenu')"
-          >
-            <b-icon icon="x" aria-hidden="true"></b-icon>
-          </b-nav-item>
-        </b-nav>
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-export default {
-  name: 'sidebar',
-  data() {
-    return {
-      lightmode: false,
-    }
-  },
-}
-</script>
-<style>
-.component-navbar .active,
-#component-sidebar .active {
-  font-weight: bold;
-}
-#component-sidebar {
-  min-width: 53px;
-  max-width: 200px;
-}
-</style>
diff --git a/frontend/src/components/Template/ContentHeader/CommunityMember.vue b/frontend/src/components/Template/ContentHeader/CommunityMember.vue
index f6f27814d..bd5b0d39e 100644
--- a/frontend/src/components/Template/ContentHeader/CommunityMember.vue
+++ b/frontend/src/components/Template/ContentHeader/CommunityMember.vue
@@ -13,10 +13,10 @@
           <div class="small">{{ CONFIG.COMMUNITY_NAME }}</div>
         </b-col>
         <b-col cols="4" class="border-left border-light">
-          <b-icon icon="people" class="ml-3 mr-3"></b-icon> 1240
+          <b-icon icon="people" class="ml-3 mr-3"></b-icon>
+          1240
         </b-col>
       </b-row>
-       
     </div>
   </div>
 </template>
diff --git a/frontend/src/components/Template/ContentHeader/GddAmount.vue b/frontend/src/components/Template/ContentHeader/GddAmount.vue
index 8806be18c..a74ab87da 100644
--- a/frontend/src/components/Template/ContentHeader/GddAmount.vue
+++ b/frontend/src/components/Template/ContentHeader/GddAmount.vue
@@ -2,32 +2,33 @@
   <div class="translucent-color-opacity">
     <div class="text-center">
       <b-badge
-        v-if="showStatus"
-        class="position-absolute mt--2 ml--5 px-3"
-        :variant="badge ? 'success' : 'light'"
+        class="position-absolute mt--2 ml--4 px-3 zindex1"
+        :variant="showStatus ? 'success' : 'light'"
       >
-        GDD Senden
+        GDD
       </b-badge>
     </div>
     <div
-      class="wallet-amount bg-white appBoxShadow gradido-border-radius p-4 border border-success"
-      :class="badge ? 'border-success' : 'border-light'"
+      class="wallet-amount bg-white appBoxShadow gradido-border-radius p-4 border"
+      :class="showStatus ? 'gradido-global-border-color-accent' : 'border-light opacity-05'"
     >
       <b-row>
         <b-col cols="9" class="h4">GDD Konto</b-col>
         <b-col cols="3" class="text-center">
-          <div v-if="showStatus">
+          <div>
             <b-icon
-              :icon="badge ? 'check-circle' : 'circle'"
-              :variant="badge ? 'success' : 'light'"
+              :icon="showStatus ? 'check-circle' : 'circle'"
+              :class="showStatus ? 'gradido-global-border-color-accent' : ''"
             ></b-icon>
             <div class="small">{{ badge ? 'aktiv' : 'inaktiv' }}</div>
           </div>
         </b-col>
       </b-row>
       <div>
-        <b-icon icon="layers" class="mr-3" variant="success"></b-icon>
-        <span :class="badge ? 'text-success' : 'text-light'">{{ balance | GDD }}</span>
+        <b-icon icon="layers" class="mr-3 gradido-global-border-color-accent"></b-icon>
+        <span :class="badge ? 'gradido-global-color-accent' : 'text-light'">
+          {{ balance | GDD }}
+        </span>
       </div>
     </div>
   </div>
diff --git a/frontend/src/components/Template/ContentHeader/GdtAmount.vue b/frontend/src/components/Template/ContentHeader/GdtAmount.vue
index 6263b5ffc..ef77e140b 100644
--- a/frontend/src/components/Template/ContentHeader/GdtAmount.vue
+++ b/frontend/src/components/Template/ContentHeader/GdtAmount.vue
@@ -10,8 +10,8 @@
     </div>
 
     <div
-      class="wallet-amount bg-white appBoxShadow gradido-border-radius p-4 border opacity-05"
-      :class="badge ? 'border-success' : 'border-light'"
+      class="wallet-amount bg-white appBoxShadow gradido-border-radius p-4 border"
+      :class="showStatus ? 'gradido-global-border-color-accent' : 'border-light opacity-05'"
     >
       <b-row>
         <b-col cols="9" class="h4">GDT Konto</b-col>
@@ -19,7 +19,7 @@
           <div>
             <b-icon
               :icon="badge ? 'check-circle' : 'circle'"
-              :variant="badge ? 'success' : 'light'"
+              class="gradido-global-border-color-accent"
             ></b-icon>
             <div class="small">{{ badge ? 'aktiv' : 'inaktiv' }}</div>
           </div>
@@ -37,6 +37,7 @@ export default {
   name: 'GdtAmount',
   props: {
     badge: { type: Boolean, default: false },
+    showStatus: { type: Boolean, default: false },
   },
 }
 </script>
diff --git a/frontend/src/components/Template/RightSide/ContributionInfo.vue b/frontend/src/components/Template/RightSide/ContributionInfo.vue
new file mode 100644
index 000000000..57b50eb8e
--- /dev/null
+++ b/frontend/src/components/Template/RightSide/ContributionInfo.vue
@@ -0,0 +1,17 @@
+<template>
+  <div class="contribution-info">
+    <div>
+      <h3>{{ $t('contribution.formText.yourContribution') }}</h3>
+      {{ $t('contribution.formText.bringYourTalentsTo') }}
+
+      <div class="my-3">
+        <b>{{ $t('contribution.formText.describeYourCommunity') }}</b>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'LastContributions',
+}
+</script>
diff --git a/frontend/src/components/Transaction.vue b/frontend/src/components/Transaction.vue
index 3d998b2e9..b3c70cef3 100644
--- a/frontend/src/components/Transaction.vue
+++ b/frontend/src/components/Transaction.vue
@@ -1,18 +1,32 @@
 <template>
   <div>
-    <div class="list-group">
+    <div class="list-group bg-white appBoxShadow gradido-border-radius p-3">
       <b-row @click="visible = !visible" class="">
         <b-col cols="2">
-          <b-avatar :icon="getLinesByType.icon" variant="light" size="4em"></b-avatar>
+          <b-avatar
+            :icon="getLinesByType.icon"
+            variant="light"
+            size="4em"
+            :class="getLinesByType.iconclasses"
+          ></b-avatar>
         </b-col>
         <b-col>
-          <div>
+          <!-- <div>
             {{ getLinesByType }}
+          </div> -->
+          <div>
+            {{ date }}
+          </div>
+          <div>
+            {{ getLinesByType.description }}
+          </div>
+          <div class="small">
+            {{ getLinesByType.descriptiontext }}
           </div>
         </b-col>
         <b-col cols="3">
-          <div class="small">Gesendet</div>
-          <div class="small">{{ amount | GDT }}</div>
+          <div class="small mt-2">GDT erhalten</div>
+          <div class="">{{ getLinesByType.credittext }}</div>
         </b-col>
         <b-col cols="1"><collapse-icon class="text-right" :visible="visible" /></b-col>
       </b-row>
@@ -75,7 +89,7 @@ export default {
         case GdtEntryType.CVS2: {
           return {
             icon: 'heart',
-            iconclasses: 'gradido-global-color-accent m-mb-1 font2em',
+            iconclasses: 'gradido-global-color-accent',
             description: this.$t('gdt.contribution'),
             descriptiontext: this.$n(this.amount, 'decimal') + ' €',
             credittext: this.$n(this.gdt, 'decimal') + ' GDT',
@@ -84,7 +98,7 @@ export default {
         case GdtEntryType.ELOPAGE_PUBLISHER: {
           return {
             icon: 'person-check',
-            iconclasses: 'gradido-global-color-accent m-mb-1 font2em',
+            iconclasses: 'gradido-global-color-accent',
             description: this.$t('gdt.recruited-member'),
             descriptiontext: '5%',
             credittext: this.$n(this.amount, 'decimal') + ' GDT',
@@ -93,7 +107,7 @@ export default {
         case GdtEntryType.GLOBAL_MODIFICATOR: {
           return {
             icon: 'gift',
-            iconclasses: 'gradido-global-color-accent m-mb-1 font2em',
+            iconclasses: 'gradido-global-color-accent',
             description: this.$t('gdt.gdt-received'),
             descriptiontext: this.comment,
             credittext: this.$n(this.gdt, 'decimal') + ' GDT',
diff --git a/frontend/src/components/Transactions/TransactionCreation.vue b/frontend/src/components/Transactions/TransactionCreation.vue
index a13b05849..623f429c0 100644
--- a/frontend/src/components/Transactions/TransactionCreation.vue
+++ b/frontend/src/components/Transactions/TransactionCreation.vue
@@ -1,6 +1,5 @@
 <template>
   <div class="transaction-slot-creation">
-
     <b-row @click="visible = !visible" class="">
       <b-col cols="2">
         <b-avatar icon="gift" variant="success" size="4em"></b-avatar>
@@ -19,8 +18,6 @@
     <b-collapse class="pb-4 pt-5" v-model="visible">
       <decay-information :typeId="typeId" :decay="decay" :amount="amount" />
     </b-collapse>
-
- 
   </div>
 </template>
 <script>
diff --git a/frontend/src/layouts/DashboardLayout.vue b/frontend/src/layouts/DashboardLayout.vue
index bf397f00c..9a8358d52 100755
--- a/frontend/src/layouts/DashboardLayout.vue
+++ b/frontend/src/layouts/DashboardLayout.vue
@@ -14,11 +14,11 @@
       <!-- navbar -->
       <b-row>
         <b-col>
-          <navbar-new class="main-navbar" :balance="balance"></navbar-new>
+          <navbar class="main-navbar" :balance="balance"></navbar>
         </b-col>
       </b-row>
       <div ref="sideMenuRow" class="d-none d-lg-none d-md-none zindex1000">
-        <sidebar-new
+        <sidebar
           class="main-sidebar"
           @admin="admin"
           @logout="logout"
@@ -29,7 +29,7 @@
       <b-row fluid class="d-flex">
         <!-- Sidebar left -->
         <b-col cols="2" class="d-none d-lg-block d-md-block">
-          <sidebar-new
+          <sidebar
             class="main-sidebar"
             @admin="admin"
             @logout="logout"
@@ -57,6 +57,7 @@
               />
             </b-col>
             <b-col cols="12">
+              <!-- router-view -->
               <div class="main-content mt-3">
                 <fade-transition :duration="200" origin="center top" mode="out-in">
                   <router-view
@@ -98,10 +99,8 @@
 import ContentHeader from '@/layouts/templates/ContentHeader.vue'
 import RightSide from '@/layouts/templates/RightSide.vue'
 import SkeletonOverview from '@/components/skeleton/Overview.vue'
-// import Navbar from '@/components/Menu/Navbar.vue'
-import NavbarNew from '@/components/Menu/NavbarNew.vue'
-// import Sidebar from '@/components/Menu/Sidebar.vue'
-import SidebarNew from '@/components/Menu/SidebarNew.vue'
+import Navbar from '@/components/Menu/Navbar.vue'
+import Sidebar from '@/components/Menu/Sidebar.vue'
 import SessionLogoutTimeout from '@/components/SessionLogoutTimeout.vue'
 import { transactionsQuery } from '@/graphql/queries'
 import { logout } from '@/graphql/mutations'
@@ -115,10 +114,8 @@ export default {
     SkeletonOverview,
     ContentHeader,
     RightSide,
-    // Navbar,
-    NavbarNew,
-    // Sidebar,
-    SidebarNew,
+    Navbar,
+    Sidebar,
     SessionLogoutTimeout,
     ContentFooter,
     FadeTransition,
diff --git a/frontend/src/layouts/templates/ContentHeader.vue b/frontend/src/layouts/templates/ContentHeader.vue
index 178a2aa34..4348b0f8a 100644
--- a/frontend/src/layouts/templates/ContentHeader.vue
+++ b/frontend/src/layouts/templates/ContentHeader.vue
@@ -1,91 +1,89 @@
 <template>
   <div>
-    <div>
-      <b-container v-if="path === '/overview'">
-        <b-row>
-          <b-col cols="5">
-            <div>
-              <gdd-amount :balance="balance" :showStatus="false" />
-            </div>
-          </b-col>
-          <b-col cols="7">
-            <div>
-              <community-member />
-            </div>
-          </b-col>
-        </b-row>
-      </b-container>
-      <b-container v-if="path === '/storys'"><h2>Deine Community im Überblick</h2></b-container>
-      <b-container v-if="path === '/addresses'">Deine Favoriten im Überblick</b-container>
-      <b-container v-if="path === '/send'">
-        <b-row>
-          <b-col cols="6">
-            <div>
+    <b-container v-if="path === '/overview'">
+      <b-row>
+        <b-col cols="5">
+          <div>
+            <gdd-amount :balance="balance" :showStatus="false" />
+          </div>
+        </b-col>
+        <b-col cols="7">
+          <div>
+            <community-member />
+          </div>
+        </b-col>
+      </b-row>
+    </b-container>
+    <b-container v-if="path === '/storys'"><h2>Deine Community im Überblick</h2></b-container>
+    <b-container v-if="path === '/addresses'">Deine Favoriten im Überblick</b-container>
+    <b-container v-if="path === '/send'">
+      <b-row>
+        <b-col cols="6">
+          <div>
+            <gdd-amount :balance="balance" :badge="true" :showStatus="true" />
+          </div>
+        </b-col>
+        <b-col cols="6">
+          <div>
+            <gdt-amount />
+          </div>
+        </b-col>
+      </b-row>
+    </b-container>
+    <b-container v-if="path === '/transactions'">
+      <b-row>
+        <b-col cols="6">
+          <div>
+            <router-link to="transaction">
               <gdd-amount :balance="balance" :badge="true" :showStatus="true" />
-            </div>
-          </b-col>
-          <b-col cols="6">
-            <div>
+            </router-link>
+          </div>
+        </b-col>
+        <b-col cols="6">
+          <div>
+            <router-link to="gdt">
               <gdt-amount />
-            </div>
-          </b-col>
-        </b-row>
-      </b-container>
-      <b-container v-if="path === '/transactions'">
-        <b-row>
-          <b-col cols="6">
-            <div>
-              <router-link to="transaction">
-                <gdd-amount :balance="balance" :badge="true" :showStatus="true" />
-              </router-link>
-            </div>
-          </b-col>
-          <b-col cols="6">
-            <div>
-              <router-link to="gdt">
-                <gdt-amount />
-              </router-link>
-            </div>
-          </b-col>
-        </b-row>
-      </b-container>
-      <b-container v-if="path === '/gdt'">
-        <b-row>
-          <b-col cols="6">
-            <div>
-              <router-link to="transactions">
-                <gdd-amount :balance="balance" />
-              </router-link>
-            </div>
-          </b-col>
-          <b-col cols="6">
-            <div>
-              <router-link to="gdt">
-                <gdt-amount :badge="true" />
-              </router-link>
-            </div>
-          </b-col>
-        </b-row>
-      </b-container>
-      <b-container v-if="path === '/profile'">
-        <b-row>
-          <b-col>
-            <div class="p-4 bg-white appBoxShadow gradido-border-radius">
-              <b-row>
-                <b-col cols="8" class="h3">Zeige deiner Community wer du bist.</b-col>
-                <b-col cols="4" class="text-small text-muted">vor 4 Stunden geändert</b-col>
-              </b-row>
-              <b-row>
-                <b-col cols="2" class=""><b-avatar size="72px" rounded="lg"></b-avatar></b-col>
-                <b-col cols="10" class="">Text</b-col>
-              </b-row>
-            </div>
-          </b-col>
-        </b-row>
-      </b-container>
-      <b-container v-if="path === '/community'"><nav-community /></b-container>
-      <b-container v-if="path === '/settings'">settings content header</b-container>
-    </div>
+            </router-link>
+          </div>
+        </b-col>
+      </b-row>
+    </b-container>
+    <b-container v-if="path === '/gdt'">
+      <b-row>
+        <b-col cols="6">
+          <div>
+            <router-link to="transactions">
+              <gdd-amount :balance="balance" :badge="true" :showStatus="false" />
+            </router-link>
+          </div>
+        </b-col>
+        <b-col cols="6">
+          <div>
+            <router-link to="gdt">
+              <gdt-amount :badge="true" :showStatus="true" />
+            </router-link>
+          </div>
+        </b-col>
+      </b-row>
+    </b-container>
+    <b-container v-if="path === '/profile'">
+      <b-row>
+        <b-col>
+          <div class="p-4 bg-white appBoxShadow gradido-border-radius">
+            <b-row>
+              <b-col cols="8" class="h3">Zeige deiner Community wer du bist.</b-col>
+              <b-col cols="4" class="text-small text-muted">vor 4 Stunden geändert</b-col>
+            </b-row>
+            <b-row>
+              <b-col cols="2" class=""><b-avatar size="72px" rounded="lg"></b-avatar></b-col>
+              <b-col cols="10" class="">Text</b-col>
+            </b-row>
+          </div>
+        </b-col>
+      </b-row>
+    </b-container>
+    <b-container v-if="path === '/community'"><nav-community /></b-container>
+    <b-container v-if="path === '/settings'">settings content header</b-container>
   </div>
 </template>
 
diff --git a/frontend/src/layouts/templates/RightSide.vue b/frontend/src/layouts/templates/RightSide.vue
index e371f75c4..8c01ff028 100644
--- a/frontend/src/layouts/templates/RightSide.vue
+++ b/frontend/src/layouts/templates/RightSide.vue
@@ -102,7 +102,8 @@
       </b-row>
     </b-container>
     <b-container v-if="path === '/community'">
-      <last-contributions />
+      <contribution-info />
+      <last-contributions class="mt-5" />
     </b-container>
     <b-container v-if="path === '/settings'">settings ride side</b-container>
   </div>
@@ -111,6 +112,7 @@
 import LastTransactions from '@/components/Template/RightSide/LastTransactions.vue'
 import Favourites from '@/components/Template/RightSide/Favourites.vue'
 import TopStorysByMonth from '@/components/Template/RightSide/TopStorysByMonth.vue'
+import ContributionInfo from '@/components/Template/RightSide/ContributionInfo.vue'
 import LastContributions from '@/components/Template/RightSide/LastContributions.vue'
 import YourOverview from '@/components/Template/RightSide/YourOverview.vue'
 
@@ -121,6 +123,7 @@ export default {
     Favourites,
     TopStorysByMonth,
     LastContributions,
+    ContributionInfo,
     YourOverview,
   },
   props: {
diff --git a/frontend/src/pages/Community.vue b/frontend/src/pages/Community.vue
index 5cebc54ce..c04ebac63 100644
--- a/frontend/src/pages/Community.vue
+++ b/frontend/src/pages/Community.vue
@@ -3,12 +3,20 @@
     <div>
       <b-tabs no-nav-style v-model="tabIndex" content-class="mt-3" align="center">
         <b-tab>
-          <open-creations-amount />
+          <open-creations-amount
+            :minimalDate="minimalDate"
+            :maxGddThisMonth="maxGddThisMonth"
+            :maxGddLastMonth="maxGddLastMonth"
+          />
+          <div class="mb-3"></div>
           <contribution-form
             @set-contribution="setContribution"
             @update-contribution="updateContribution"
             v-model="form"
-            :updateAmount="updateAmount"
+            :isThisMonth="isThisMonth"
+            :minimalDate="minimalDate"
+            :maxGddLastMonth="maxGddLastMonth"
+            :maxGddThisMonth="maxGddThisMonth"
           />
         </b-tab>
         <b-tab>
@@ -75,6 +83,7 @@ export default {
         amount: '',
       },
       updateAmount: '',
+      maximalDate: new Date(),
     }
   },
   mounted() {
@@ -89,6 +98,31 @@ export default {
       this.hashLink = to.hash
     },
   },
+  computed: {
+    minimalDate() {
+      const date = new Date(this.maximalDate)
+      return new Date(date.setMonth(date.getMonth() - 1, 1))
+    },
+    isThisMonth() {
+      const formDate = new Date(this.form.date)
+      return (
+        formDate.getFullYear() === this.maximalDate.getFullYear() &&
+        formDate.getMonth() === this.maximalDate.getMonth()
+      )
+    },
+    maxGddLastMonth() {
+      // when existing contribution is edited, the amount is added back on top of the amount
+      return this.form.id && !this.isThisMonth
+        ? parseInt(this.$store.state.creation[1]) + parseInt(this.updateAmount)
+        : parseInt(this.$store.state.creation[1])
+    },
+    maxGddThisMonth() {
+      // when existing contribution is edited, the amount is added back on top of the amount
+      return this.form.id && this.isThisMonth
+        ? parseInt(this.$store.state.creation[2]) + parseInt(this.updateAmount)
+        : parseInt(this.$store.state.creation[2])
+    },
+  },
   methods: {
     setContribution(data) {
       this.$apollo
diff --git a/frontend/src/pages/Overview.vue b/frontend/src/pages/Overview.vue
index 97156bb0f..c6cccd991 100644
--- a/frontend/src/pages/Overview.vue
+++ b/frontend/src/pages/Overview.vue
@@ -1,8 +1,8 @@
 <template>
   <div>
-    <div class="container-fluid">
+    <div>
       <community-news class="mb-5 shadow" />
-      <gdd-transaction-list
+      <!-- <gdd-transaction-list
         :transactions="transactions"
         :pageSize="5"
         :timestamp="timestamp"
@@ -10,38 +10,38 @@
         :transactionLinkCount="transactionLinkCount"
         :pending="pending"
         v-on="$listeners"
-      />
-      <gdd-transaction-list-footer :count="transactionCount" />
+      /> -->
+      <!-- <gdd-transaction-list-footer :count="transactionCount" /> -->
     </div>
   </div>
 </template>
 <script>
 import CommunityNews from '@/components/Overview/CommunityNews.vue'
-import GddTransactionList from '@/components/GddTransactionList.vue'
-import GddTransactionListFooter from '@/components/GddTransactionListFooter.vue'
+// import GddTransactionList from '@/components/GddTransactionList.vue'
+// import GddTransactionListFooter from '@/components/GddTransactionListFooter.vue'
 
 export default {
   name: 'Overview',
   components: {
     CommunityNews,
-    GddTransactionList,
-    GddTransactionListFooter,
+    // GddTransactionList,
+    // GddTransactionListFooter,
   },
   data() {
     return {
-      timestamp: Date.now(),
+      // timestamp: Date.now(),
     }
   },
   props: {
-    transactions: {
-      default: () => [],
-    },
-    transactionCount: { type: Number, default: 0 },
-    transactionLinkCount: { type: Number, default: 0 },
-    pending: {
-      type: Boolean,
-      default: true,
-    },
+    // transactions: {
+    //   default: () => [],
+    // },
+    // transactionCount: { type: Number, default: 0 },
+    // transactionLinkCount: { type: Number, default: 0 },
+    // pending: {
+    //   type: Boolean,
+    //   default: true,
+    // },
   },
   methods: {
     // updateTransactions(pagination) {
@@ -51,9 +51,9 @@ export default {
 }
 </script>
 <style>
-.g-border {
+/* .g-border {
   border: #ffffff 2px;
   border-style: inset;
   border-radius: 5px;
-}
+} */
 </style>
diff --git a/frontend/src/pages/Transactions.vue b/frontend/src/pages/Transactions.vue
index 9a926bab4..6da816a72 100644
--- a/frontend/src/pages/Transactions.vue
+++ b/frontend/src/pages/Transactions.vue
@@ -34,7 +34,11 @@
     </b-tabs> -->
 
     <div v-if="gdt">
-      <div>{{ titleGdt }}</div>
+      <div
+        class="gradido-global-color-accent appBoxShadow gradido-border-radius p-3 mb-3 text-right blurtext"
+      >
+        {{ titleGdt }}
+      </div>
 
       <gdt-transaction-list
         v-model="currentPage"
@@ -140,6 +144,17 @@ export default {
 }
 </script>
 <style>
+.blurtext {
+  color: transparent;
+  text-shadow: #047006 0 0 15px;
+  transition: 0.4s;
+}
+.blurtext:hover {
+  transition: 0.4s;
+  color: #047006;
+  text-shadow: none;
+}
+
 .nav-tabs > li > a {
   padding-top: 14px;
   margin-bottom: 14px;