From f8e1514bb24d410c315e55f96835283a1b7f6c5e Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Tue, 22 Nov 2022 13:20:41 +0100
Subject: [PATCH] style transactions list, style plugins

---
 frontend/src/App.vue                          |   4 +
 .../src/assets/scss/gradido-template.scss     |  10 +
 .../components/GddSend/TransactionForm.vue    | 266 +++++++++---------
 .../src/components/GddTransactionList.vue     |   5 +-
 frontend/src/components/Menu/NavbarNew.vue    |   8 +-
 .../src/components/Overview/CommunityNews.vue |   2 +-
 .../ContentHeader/CommunityMember.vue         |  13 +-
 .../Template/ContentHeader/GddAmount.vue      |  23 +-
 .../Template/ContentHeader/GdtAmount.vue      |  23 +-
 .../TransactionRows/CollapseIcon.vue          |   2 +-
 .../src/components/TransactionRows/Name.vue   |  58 ++++
 .../Transactions/TransactionCreation.vue      |  67 ++---
 .../Transactions/TransactionDecay.vue         |  43 +--
 .../Transactions/TransactionLinkSummary.vue   |  75 +++--
 .../Transactions/TransactionReceive.vue       |  81 +++---
 .../Transactions/TransactionSend.vue          |  81 +++---
 .../src/layouts/templates/ContentHeader.vue   |  16 +-
 17 files changed, 424 insertions(+), 353 deletions(-)
 create mode 100644 frontend/src/components/TransactionRows/Name.vue

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index a5429c662..fcaf6bb0b 100755
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -56,4 +56,8 @@ export default {
   );
   height: 13px;
 }
+
+.text-color-gdd-yellow {
+  color: rgb(197 141 56);
+}
 </style>
diff --git a/frontend/src/assets/scss/gradido-template.scss b/frontend/src/assets/scss/gradido-template.scss
index 97d91937f..fc1ccf870 100644
--- a/frontend/src/assets/scss/gradido-template.scss
+++ b/frontend/src/assets/scss/gradido-template.scss
@@ -178,6 +178,9 @@ a:hover,
   font-size: 1.5em;
 }
 
+.zindex1 {
+  z-index: 1;
+}
 .zindex10 {
   z-index: 10;
 }
@@ -198,6 +201,13 @@ a:hover,
   z-index: 100000;
 }
 
+.opacity-1 {
+  opacity: 1;
+}
+.opacity-05 {
+  opacity: 0.5;
+}
+
 .gradido-global-color-blue {
   color: #0e79bc;
 }
diff --git a/frontend/src/components/GddSend/TransactionForm.vue b/frontend/src/components/GddSend/TransactionForm.vue
index 69c6b6b45..87929159f 100644
--- a/frontend/src/components/GddSend/TransactionForm.vue
+++ b/frontend/src/components/GddSend/TransactionForm.vue
@@ -1,142 +1,155 @@
 <template>
   <b-row class="transaction-form">
     <b-col xl="12" md="12" class="p-0">
-      <b-card class="p-0 m-0 gradido-custom-background">
+      <b-card class="p-0 m-0 appBoxShadow gradido-border-radius">
         <validation-observer v-slot="{ handleSubmit }" ref="formValidator">
           <b-form role="form" @submit.prevent="handleSubmit(onSubmit)" @reset="onReset">
             <b-row>
               <b-col>
-                <b-form-radio
-                  v-model="radioSelected"
-                  name="radios"
-                  :value="sendTypes.send"
-                  size="lg"
-                >
-                  {{ $t('send_gdd') }}
-                </b-form-radio>
+                <b-row>
+                  <b-col cols="12">
+                    <div v-if="radioSelected === sendTypes.send">
+                      <validation-provider
+                        name="Email"
+                        :rules="{
+                          required: radioSelected === sendTypes.send ? true : false,
+                          email: true,
+                          is_not: $store.state.email,
+                        }"
+                        v-slot="{ errors }"
+                      >
+                        <label class="input-1 mt-4" for="input-1">{{ $t('form.recipient') }}</label>
+                        <b-input-group
+                          id="input-group-1"
+                          class="border border-default border-radius"
+                          description="We'll never share your email with anyone else."
+                          size="lg"
+                        >
+                          <b-input-group-prepend class="d-none d-md-block">
+                            <b-icon icon="envelope" class="display-4 m-3"></b-icon>
+                          </b-input-group-prepend>
+                          <b-form-input
+                            id="input-1"
+                            v-model="form.email"
+                            v-focus="emailFocused"
+                            @focus="emailFocused = true"
+                            @blur="normalizeEmail()"
+                            type="email"
+                            placeholder="E-Mail"
+                            class="pl-3 gradido-font-large"
+                            :disabled="isBalanceDisabled"
+                          ></b-form-input>
+                        </b-input-group>
+                        <b-col v-if="errors">
+                          <span v-for="error in errors" :key="error" class="errors">
+                            {{ error }}
+                          </span>
+                        </b-col>
+                      </validation-provider>
+                    </div>
+                  </b-col>
+                  <b-col cols="12">
+                    <validation-provider
+                      :name="$t('form.amount')"
+                      :rules="{
+                        required: true,
+                        gddSendAmount: [0.01, balance],
+                      }"
+                      v-slot="{ errors, valid }"
+                    >
+                      <label class="input-2" for="input-2">{{ $t('form.amount') }}</label>
+                      <b-input-group
+                        id="input-group-2"
+                        class="border border-default border-radius"
+                        size="lg"
+                      >
+                        <b-input-group-prepend class="p-2 d-none d-md-block">
+                          <div class="m-1 mt-2">{{ $t('GDD') }}</div>
+                        </b-input-group-prepend>
+
+                        <b-form-input
+                          id="input-2"
+                          v-model="form.amount"
+                          type="text"
+                          v-focus="amountFocused"
+                          @focus="amountFocused = true"
+                          @blur="normalizeAmount(valid)"
+                          :placeholder="$n(0.01)"
+                          class="pl-3 gradido-font-large"
+                          :disabled="isBalanceDisabled"
+                        ></b-form-input>
+                      </b-input-group>
+                      <b-col v-if="errors">
+                        <span v-for="error in errors" class="errors" :key="error">{{ error }}</span>
+                      </b-col>
+                    </validation-provider>
+                  </b-col>
+                </b-row>
               </b-col>
               <b-col>
-                <b-form-radio
-                  v-model="radioSelected"
-                  name="radios"
-                  :value="sendTypes.link"
-                  size="lg"
-                >
-                  {{ $t('send_per_link') }}
-                </b-form-radio>
+                <div class="h3">Versandart</div>
+                <b-form-radio-group v-model="radioSelected">
+                  <b-row>
+                    <b-col cols="9">Gdd versenden</b-col>
+                    <b-col cols="3">
+                      <b-form-radio
+                        name="shipping"
+                        size="lg"
+                        :value="sendTypes.send"
+                        stacked
+                      ></b-form-radio>
+                    </b-col>
+                  </b-row>
+                  <b-row>
+                    <b-col cols="9">Gdd versenden per Link</b-col>
+                    <b-col cols="3">
+                      <b-form-radio
+                        name="shipping"
+                        :value="sendTypes.link"
+                        size="lg"
+                      ></b-form-radio>
+                    </b-col>
+                  </b-row>
+                  <div class="mt-4" v-if="radioSelected === sendTypes.link">
+                    <h2 class="alert-heading">{{ $t('gdd_per_link.header') }}</h2>
+                    <div>
+                      {{ $t('gdd_per_link.choose-amount') }}
+                    </div>
+                  </div>
+                </b-form-radio-group>
               </b-col>
             </b-row>
-            <div class="mt-4" v-if="radioSelected === sendTypes.link">
-              <h2 class="alert-heading">{{ $t('gdd_per_link.header') }}</h2>
-              <div>
-                {{ $t('gdd_per_link.choose-amount') }}
-              </div>
-            </div>
 
-            <div v-if="radioSelected === sendTypes.send">
-              <validation-provider
-                name="Email"
-                :rules="{
-                  required: radioSelected === sendTypes.send ? true : false,
-                  email: true,
-                  is_not: $store.state.email,
-                }"
-                v-slot="{ errors }"
-              >
-                <label class="input-1 mt-4" for="input-1">{{ $t('form.recipient') }}</label>
-                <b-input-group
-                  id="input-group-1"
-                  class="border border-default border-radius"
-                  description="We'll never share your email with anyone else."
-                  size="lg"
+            <b-row>
+              <b-col>
+                <validation-provider
+                  :rules="{
+                    required: true,
+                    min: 5,
+                    max: 255,
+                  }"
+                  :name="$t('form.message')"
+                  v-slot="{ errors }"
                 >
-                  <b-input-group-prepend class="d-none d-md-block">
-                    <b-icon icon="envelope" class="display-4 m-3"></b-icon>
-                  </b-input-group-prepend>
-                  <b-form-input
-                    id="input-1"
-                    v-model="form.email"
-                    v-focus="emailFocused"
-                    @focus="emailFocused = true"
-                    @blur="normalizeEmail()"
-                    type="email"
-                    placeholder="E-Mail"
-                    class="pl-3 gradido-font-large"
-                    :disabled="isBalanceDisabled"
-                  ></b-form-input>
-                </b-input-group>
-                <b-col v-if="errors">
-                  <span v-for="error in errors" :key="error" class="errors">{{ error }}</span>
-                </b-col>
-              </validation-provider>
-            </div>
-
-            <div class="mt-4 mb-4">
-              <validation-provider
-                :name="$t('form.amount')"
-                :rules="{
-                  required: true,
-                  gddSendAmount: [0.01, balance],
-                }"
-                v-slot="{ errors, valid }"
-              >
-                <label class="input-2" for="input-2">{{ $t('form.amount') }}</label>
-                <b-input-group
-                  id="input-group-2"
-                  class="border border-default border-radius"
-                  size="lg"
-                >
-                  <b-input-group-prepend class="p-2 d-none d-md-block">
-                    <div class="m-1 mt-2">{{ $t('GDD') }}</div>
-                  </b-input-group-prepend>
-
-                  <b-form-input
-                    id="input-2"
-                    v-model="form.amount"
-                    type="text"
-                    v-focus="amountFocused"
-                    @focus="amountFocused = true"
-                    @blur="normalizeAmount(valid)"
-                    :placeholder="$n(0.01)"
-                    class="pl-3 gradido-font-large"
-                    :disabled="isBalanceDisabled"
-                  ></b-form-input>
-                </b-input-group>
-                <b-col v-if="errors">
-                  <span v-for="error in errors" class="errors" :key="error">{{ error }}</span>
-                </b-col>
-              </validation-provider>
-            </div>
-
-            <div class="mb-4">
-              <validation-provider
-                :rules="{
-                  required: true,
-                  min: 5,
-                  max: 255,
-                }"
-                :name="$t('form.message')"
-                v-slot="{ errors }"
-              >
-                <label class="input-3" for="input-3">{{ $t('form.message') }}</label>
-                <b-input-group id="input-group-3" class="border border-default border-radius">
-                  <b-input-group-prepend class="d-none d-md-block">
-                    <b-icon icon="chat-right-text" class="display-4 m-3 mt-4"></b-icon>
-                  </b-input-group-prepend>
-                  <b-form-textarea
-                    id="input-3"
-                    rows="3"
-                    v-model="form.memo"
-                    class="pl-3 gradido-font-large"
-                    :disabled="isBalanceDisabled"
-                  ></b-form-textarea>
-                </b-input-group>
-                <b-col v-if="errors">
-                  <span v-for="error in errors" class="errors" :key="error">{{ error }}</span>
-                </b-col>
-              </validation-provider>
-            </div>
-
+                  <label class="input-3" for="input-3">{{ $t('form.message') }}</label>
+                  <b-input-group id="input-group-3" class="border border-default border-radius">
+                    <b-input-group-prepend class="d-none d-md-block">
+                      <b-icon icon="chat-right-text" class="display-4 m-3 mt-4"></b-icon>
+                    </b-input-group-prepend>
+                    <b-form-textarea
+                      id="input-3"
+                      rows="3"
+                      v-model="form.memo"
+                      class="pl-3 gradido-font-large"
+                      :disabled="isBalanceDisabled"
+                    ></b-form-textarea>
+                  </b-input-group>
+                  <b-col v-if="errors">
+                    <span v-for="error in errors" class="errors" :key="error">{{ error }}</span>
+                  </b-col>
+                </validation-provider>
+              </b-col>
+            </b-row>
             <div v-if="!!isBalanceDisabled" class="text-danger">
               {{ $t('form.no_gdd_available') }}
             </div>
@@ -152,7 +165,6 @@
                 </b-button>
               </b-col>
             </b-row>
-            <br />
           </b-form>
         </validation-observer>
       </b-card>
diff --git a/frontend/src/components/GddTransactionList.vue b/frontend/src/components/GddTransactionList.vue
index a74be5187..e3ff9624c 100644
--- a/frontend/src/components/GddTransactionList.vue
+++ b/frontend/src/components/GddTransactionList.vue
@@ -13,7 +13,10 @@
       </div>
 
       <div v-for="({ id, typeId }, index) in transactions" :key="id">
-        <transaction-list-item :typeId="typeId" class="pointer">
+        <transaction-list-item
+          :typeId="typeId"
+          class="pointer appBoxShadow gradido-border-radius mb-3"
+        >
           <template #DECAY>
             <transaction-decay
               class="list-group-item"
diff --git a/frontend/src/components/Menu/NavbarNew.vue b/frontend/src/components/Menu/NavbarNew.vue
index 13aa6d0a1..5fd913dd4 100644
--- a/frontend/src/components/Menu/NavbarNew.vue
+++ b/frontend/src/components/Menu/NavbarNew.vue
@@ -27,9 +27,9 @@
                     ></b-avatar>
                   </div>
                   <div>
-                    <div>{{ avatarLongName }}</div>
+                    <div class="small">{{ avatarLongName }}</div>
 
-                    <div class="text-right m">
+                    <div class="text-right small">
                       <small>{{ $store.state.email }}</small>
                     </div>
                   </div>
@@ -40,11 +40,11 @@
         </b-navbar-nav>
       </b-collapse>
     </b-navbar>
-    <div class="alertBox">
+    <!-- <div class="alertBox">
       <b-alert show dismissible variant="light" class="nav-alert text-dark">
         <small>{{ $t('1000thanks') }}</small>
       </b-alert>
-    </div>
+    </div> -->
   </div>
 </template>
 
diff --git a/frontend/src/components/Overview/CommunityNews.vue b/frontend/src/components/Overview/CommunityNews.vue
index ac9e7c6c7..fd7c5abf0 100644
--- a/frontend/src/components/Overview/CommunityNews.vue
+++ b/frontend/src/components/Overview/CommunityNews.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="community-news">
-    <b-card class="bg-white">CommunityNews</b-card>
+    <b-card class="bg-white appBoxShadow gradido-border-radius">CommunityNews</b-card>
   </div>
 </template>
 <script>
diff --git a/frontend/src/components/Template/ContentHeader/CommunityMember.vue b/frontend/src/components/Template/ContentHeader/CommunityMember.vue
index 507cb0f3e..2cf7f4de0 100644
--- a/frontend/src/components/Template/ContentHeader/CommunityMember.vue
+++ b/frontend/src/components/Template/ContentHeader/CommunityMember.vue
@@ -1,7 +1,14 @@
 <template>
-  <div class="community-member">
-    <div>CommunityMember components</div>
-    <div>{{ CONFIG.COMMUNITY_NAME }}</div>
+  <div>
+    <div class="text-center">
+      <b-badge class="position-absolute mt--2 ml--5 px-3" variant="success">aktiv</b-badge>
+    </div>
+    <div
+      class="community-member bg-white appBoxShadow gradido-border-radius p-4 border border-success"
+    >
+      <div>CommunityMember components</div>
+      <div>{{ CONFIG.COMMUNITY_NAME }}</div>
+    </div>
   </div>
 </template>
 <script>
diff --git a/frontend/src/components/Template/ContentHeader/GddAmount.vue b/frontend/src/components/Template/ContentHeader/GddAmount.vue
index b4a3a80c8..f95ba603a 100644
--- a/frontend/src/components/Template/ContentHeader/GddAmount.vue
+++ b/frontend/src/components/Template/ContentHeader/GddAmount.vue
@@ -1,7 +1,23 @@
 <template>
-  <div class="wallet-amount">
-    <div>GDD Amount components</div>
-    <div>{{ balance | GDD }}</div>
+  <div class="translucent-color-opacity">
+    <div v-if="badge" class="text-center">
+      <b-badge class="position-absolute mt--2 ml--5 px-3" variant="success">GDD Senden</b-badge>
+    </div>
+    <div
+      class="wallet-amount bg-white appBoxShadow gradido-border-radius p-4 border border-success"
+    >
+      <b-row>
+        <b-col cols="10" class="h4">GDD Konto</b-col>
+        <b-col cols="2" class="text-center">
+          <b-icon icon="check-circle" variant="success"></b-icon>
+          <div class="small">aktiv</div>
+        </b-col>
+      </b-row>
+      <div>
+        <b-icon icon="layers" class="mr-3" variant="success"></b-icon>
+        <span class="text-success">{{ balance | GDD }}</span>
+      </div>
+    </div>
   </div>
 </template>
 <script>
@@ -9,6 +25,7 @@ export default {
   name: 'GddAmount',
   props: {
     balance: { type: Number, required: true },
+    badge: { type: Boolean, default: false },
   },
 }
 </script>
diff --git a/frontend/src/components/Template/ContentHeader/GdtAmount.vue b/frontend/src/components/Template/ContentHeader/GdtAmount.vue
index ff4d949fe..1030e3e2d 100644
--- a/frontend/src/components/Template/ContentHeader/GdtAmount.vue
+++ b/frontend/src/components/Template/ContentHeader/GdtAmount.vue
@@ -1,7 +1,24 @@
 <template>
-  <div class="wallet-amount">
-    <div>GDT Amount components</div>
-    <div>0.00 GDT</div>
+  <div>
+    <div class="text-center">
+      <b-badge class="position-absolute mt--2 ml--4 px-3 zindex1" variant="light">GDT</b-badge>
+    </div>
+
+    <div
+      class="wallet-amount bg-white appBoxShadow gradido-border-radius p-4 border border-light opacity-05"
+    >
+      <b-row>
+        <b-col cols="9" class="h4">GDT Konto</b-col>
+        <b-col cols="3" class="text-center">
+          <b-icon icon="circle" variant="light"></b-icon>
+          <div class="small">inaktiv</div>
+        </b-col>
+      </b-row>
+      <div>
+        <b-icon icon="layers" class="mr-3"></b-icon>
+        0.00 GDT
+      </div>
+    </div>
   </div>
 </template>
 <script>
diff --git a/frontend/src/components/TransactionRows/CollapseIcon.vue b/frontend/src/components/TransactionRows/CollapseIcon.vue
index 7582d8eb0..ac24d0b0c 100644
--- a/frontend/src/components/TransactionRows/CollapseIcon.vue
+++ b/frontend/src/components/TransactionRows/CollapseIcon.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="collapse-icon">
     <b-icon
-      :icon="visible ? 'caret-up-square' : 'caret-down-square'"
+      :icon="visible ? 'arrow-up-circle' : 'arrow-down-circle'"
       :class="visible ? 'text-black' : 'text-muted'"
     />
   </div>
diff --git a/frontend/src/components/TransactionRows/Name.vue b/frontend/src/components/TransactionRows/Name.vue
new file mode 100644
index 000000000..c7bae8159
--- /dev/null
+++ b/frontend/src/components/TransactionRows/Name.vue
@@ -0,0 +1,58 @@
+<template>
+  <div class="name">
+    <div class="gdd-transaction-list-item-name">
+      <div v-if="linkedUser && linkedUser.email">
+        <b-link @click.stop="tunnelEmail">
+          {{ itemText }}
+        </b-link>
+        <span v-if="transactionLinkId">
+          {{ $t('via_link') }}
+          <b-icon
+            icon="link45deg"
+            variant="muted"
+            class="m-mb-1"
+            :title="$t('gdd_per_link.redeemed-title')"
+          />
+        </span>
+      </div>
+      <span v-else>{{ itemText }}</span>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'Name',
+  props: {
+    amount: {
+      type: String,
+      required: true,
+    },
+    linkedUser: {
+      type: Object,
+      required: false,
+    },
+    text: {
+      type: String,
+      required: false,
+    },
+    transactionLinkId: {
+      type: Number,
+      required: false,
+      default: null,
+    },
+  },
+  methods: {
+    tunnelEmail() {
+      this.$emit('set-tunneled-email', this.linkedUser.email)
+      this.$router.push({ path: '/send' })
+    },
+  },
+  computed: {
+    itemText() {
+      return this.linkedUser
+        ? this.linkedUser.firstName + ' ' + this.linkedUser.lastName
+        : this.text
+    },
+  },
+}
+</script>
diff --git a/frontend/src/components/Transactions/TransactionCreation.vue b/frontend/src/components/Transactions/TransactionCreation.vue
index a5d0ece61..a13b05849 100644
--- a/frontend/src/components/Transactions/TransactionCreation.vue
+++ b/frontend/src/components/Transactions/TransactionCreation.vue
@@ -1,55 +1,46 @@
 <template>
   <div class="transaction-slot-creation">
-    <div @click="visible = !visible">
-      <!-- Collaps Icon  -->
-      <collapse-icon class="text-right" :visible="visible" />
-      <div>
-        <b-row>
-          <!-- ICON  -->
-          <b-col cols="1">
-            <type-icon color="gradido-global-color-accent" icon="gift" />
-          </b-col>
 
-          <b-col cols="11">
-            <!-- Amount / Name || Text -->
-            <amount-and-name-row :amount="amount" :linkedUser="linkedUser" v-on="$listeners" />
+    <b-row @click="visible = !visible" class="">
+      <b-col cols="2">
+        <b-avatar icon="gift" variant="success" size="4em"></b-avatar>
+      </b-col>
+      <b-col>
+        <div>{{ linkedUser.firstName }} {{ linkedUser.lastName }}</div>
+        <div class="small">{{ balanceDate }}</div>
+        <div class="small">{{ balanceDate }}</div>
+      </b-col>
+      <b-col cols="3">
+        <div class="small">Empfangen</div>
+        <div class="small">{{ amount | GDD }}</div>
+      </b-col>
+      <b-col cols="1"><collapse-icon class="text-right" :visible="visible" /></b-col>
+    </b-row>
+    <b-collapse class="pb-4 pt-5" v-model="visible">
+      <decay-information :typeId="typeId" :decay="decay" :amount="amount" />
+    </b-collapse>
 
-            <!-- Nachricht Memo -->
-            <memo-row :memo="memo" />
-
-            <!-- Datum -->
-            <date-row :date="balanceDate" />
-
-            <!-- Decay -->
-            <decay-row :decay="decay.decay" />
-          </b-col>
-        </b-row>
-      </div>
-
-      <b-collapse class="pb-4 pt-5" v-model="visible">
-        <decay-information :typeId="typeId" :decay="decay" :amount="amount" />
-      </b-collapse>
-    </div>
+ 
   </div>
 </template>
 <script>
 import CollapseIcon from '../TransactionRows/CollapseIcon'
-import TypeIcon from '../TransactionRows/TypeIcon'
-import AmountAndNameRow from '../TransactionRows/AmountAndNameRow'
-import MemoRow from '../TransactionRows/MemoRow'
-import DateRow from '../TransactionRows/DateRow'
-import DecayRow from '../TransactionRows/DecayRow'
+// import TypeIcon from '../TransactionRows/TypeIcon'
+// import AmountAndNameRow from '../TransactionRows/AmountAndNameRow'
+// import MemoRow from '../TransactionRows/MemoRow'
+// import DateRow from '../TransactionRows/DateRow'
+// import DecayRow from '../TransactionRows/DecayRow'
 import DecayInformation from '../DecayInformations/DecayInformation'
 
 export default {
   name: 'TransactionCreation',
   components: {
     CollapseIcon,
-    TypeIcon,
-    AmountAndNameRow,
-    MemoRow,
-    DateRow,
-    DecayRow,
+    // TypeIcon,
+    // AmountAndNameRow,
+    // MemoRow,
+    // DateRow,
+    // DecayRow,
     DecayInformation,
   },
   props: {
diff --git a/frontend/src/components/Transactions/TransactionDecay.vue b/frontend/src/components/Transactions/TransactionDecay.vue
index 372705a4c..256dd5601 100644
--- a/frontend/src/components/Transactions/TransactionDecay.vue
+++ b/frontend/src/components/Transactions/TransactionDecay.vue
@@ -1,39 +1,25 @@
 <template>
   <div class="transaction-slot-decay">
-    <div @click="visible = !visible">
-      <!-- Collaps Icon  -->
-      <collapse-icon class="text-right" :visible="visible" />
-      <div>
-        <b-row>
-          <!-- ICON  -->
-          <b-col cols="1">
-            <type-icon color="gradido-global-color-gray" icon="droplet-half" />
-          </b-col>
+    <b-row @click="visible = !visible" class="text-color-gdd-yellow">
+      <b-col cols="1"><type-icon color="text-color-gdd-yellow" icon="droplet-half" /></b-col>
+      <b-col>
+        {{ $t('decay.decay_since_last_transaction') }}
+      </b-col>
+      <b-col cols="1"><collapse-icon class="text-right" :visible="visible" /></b-col>
+    </b-row>
 
-          <b-col cols="11">
-            <!-- Amount / Name || Text -->
-            <amount-and-name-row
-              :amount="amount"
-              :text="$t('decay.decay_since_last_transaction')"
-            />
-          </b-col>
-        </b-row>
-      </div>
-
-      <b-collapse class="pb-4 pt-5" v-model="visible">
-        <decay-information-decay
-          :balance="balance"
-          :decay="decay.decay"
-          :previousBookedBalance="previousBookedBalance"
-        />
-      </b-collapse>
-    </div>
+    <b-collapse class="pb-4 pt-5" v-model="visible">
+      <decay-information-decay
+        :balance="balance"
+        :decay="decay.decay"
+        :previousBookedBalance="previousBookedBalance"
+      />
+    </b-collapse>
   </div>
 </template>
 <script>
 import CollapseIcon from '../TransactionRows/CollapseIcon'
 import TypeIcon from '../TransactionRows/TypeIcon'
-import AmountAndNameRow from '../TransactionRows/AmountAndNameRow'
 import DecayInformationDecay from '../DecayInformations/DecayInformation-Decay'
 
 export default {
@@ -41,7 +27,6 @@ export default {
   components: {
     CollapseIcon,
     TypeIcon,
-    AmountAndNameRow,
     DecayInformationDecay,
   },
   props: {
diff --git a/frontend/src/components/Transactions/TransactionLinkSummary.vue b/frontend/src/components/Transactions/TransactionLinkSummary.vue
index cbce57029..329f2ead7 100644
--- a/frontend/src/components/Transactions/TransactionLinkSummary.vue
+++ b/frontend/src/components/Transactions/TransactionLinkSummary.vue
@@ -1,47 +1,36 @@
 <template>
-  <div class="transaction-slot-link gradido-shadow-inset">
-    <div>
-      <div class="transaction-link-details" @click="showTransactionLinks()">
-        <!-- Collaps Icon  -->
-        <collapse-icon class="text-right" :visible="visible" />
-        <div>
-          <b-row>
-            <b-col cols="1">
-              <type-icon color="text-danger" icon="link45deg" />
-            </b-col>
-
-            <b-col cols="11">
-              <!-- Amount / Name || Text -->
-              <amount-and-name-row :amount="amount" :text="$t('gdd_per_link.links_sum')" />
-
-              <!-- Count Links -->
-              <link-count-row :count="transactionLinkCount" />
-
-              <!-- Decay -->
-              <decay-row :decay="decay.decay" />
-            </b-col>
-          </b-row>
-        </div>
-      </div>
-
-      <b-collapse v-model="visible">
-        <collapse-links-list
-          v-model="currentPage"
-          :pending="pending"
-          :pageSize="pageSize"
-          :transactionLinkCount="transactionLinkCount"
-          :transactionLinks="transactionLinks"
-        />
-      </b-collapse>
-    </div>
+  <div class="transaction-slot-link">
+    <b-row @click="showTransactionLinks()">
+      <b-col cols="2">
+        <b-avatar icon="link" variant="danger" size="4em"></b-avatar>
+      </b-col>
+      <b-col>
+        <div>{{ $t('gdd_per_link.links_sum') }}</div>
+        <div class="small">{{ transactionLinkCount }} offene Links</div>
+      </b-col>
+      <b-col cols="3">
+        <div class="small">Insgesamt</div>
+        <div class="small">{{ amount | GDD }}</div>
+      </b-col>
+      <b-col cols="1"><collapse-icon class="text-right" :visible="visible" /></b-col>
+    </b-row>
+    <b-collapse v-model="visible">
+      <collapse-links-list
+        v-model="currentPage"
+        :pending="pending"
+        :pageSize="pageSize"
+        :transactionLinkCount="transactionLinkCount"
+        :transactionLinks="transactionLinks"
+      />
+    </b-collapse>
   </div>
 </template>
 <script>
 import CollapseIcon from '../TransactionRows/CollapseIcon'
-import TypeIcon from '../TransactionRows/TypeIcon'
-import AmountAndNameRow from '../TransactionRows/AmountAndNameRow'
-import LinkCountRow from '../TransactionRows/LinkCountRow'
-import DecayRow from '../TransactionRows/DecayRow'
+// import TypeIcon from '../TransactionRows/TypeIcon'
+// import AmountAndNameRow from '../TransactionRows/AmountAndNameRow'
+// import LinkCountRow from '../TransactionRows/LinkCountRow'
+// import DecayRow from '../TransactionRows/DecayRow'
 import CollapseLinksList from '../DecayInformations/CollapseLinksList'
 import { listTransactionLinks } from '@/graphql/queries'
 
@@ -49,10 +38,10 @@ export default {
   name: 'TransactionSlotLink',
   components: {
     CollapseIcon,
-    TypeIcon,
-    AmountAndNameRow,
-    LinkCountRow,
-    DecayRow,
+    // TypeIcon,
+    // AmountAndNameRow,
+    // LinkCountRow,
+    // DecayRow,
     CollapseLinksList,
   },
   props: {
diff --git a/frontend/src/components/Transactions/TransactionReceive.vue b/frontend/src/components/Transactions/TransactionReceive.vue
index 14e661cf3..645a5ab74 100644
--- a/frontend/src/components/Transactions/TransactionReceive.vue
+++ b/frontend/src/components/Transactions/TransactionReceive.vue
@@ -1,61 +1,50 @@
 <template>
   <div class="transaction-slot-receive">
-    <div @click="visible = !visible">
-      <!-- Collaps Icon  -->
-      <collapse-icon class="text-right" :visible="visible" />
-
-      <div>
-        <b-row>
-          <!-- ICON  -->
-          <b-col cols="1">
-            <type-icon color="gradido-global-color-accent" icon="arrow-right-circle" />
-          </b-col>
-
-          <b-col cols="11">
-            <!-- Amount / Name || Text -->
-            <amount-and-name-row
-              v-on="$listeners"
-              :amount="amount"
-              :linkedUser="linkedUser"
-              :transactionLinkId="transactionLinkId"
-            />
-
-            <!-- Nachricht Memo -->
-            <memo-row :memo="memo" />
-
-            <!-- Datum -->
-            <date-row :date="balanceDate" />
-
-            <!-- Decay -->
-            <decay-row :decay="decay.decay" />
-          </b-col>
-        </b-row>
-      </div>
-
-      <b-collapse class="pb-4 pt-5" v-model="visible">
-        <decay-information :typeId="typeId" :decay="decay" :amount="amount" />
-      </b-collapse>
-    </div>
+    <b-row @click="visible = !visible" class="">
+      <b-col cols="2">
+        <b-avatar icon="arrow-right-circle" variant="success" size="4em"></b-avatar>
+      </b-col>
+      <b-col>
+        <div>
+          <name
+            v-on="$listeners"
+            :amount="amount"
+            :linkedUser="linkedUser"
+            :transactionLinkId="transactionLinkId"
+          />
+        </div>
+        <div class="small">{{ balanceDate }}</div>
+        <div class="small">{{ balanceDate }}</div>
+      </b-col>
+      <b-col cols="3">
+        <div class="small">Empfangen</div>
+        <div class="small">{{ amount | GDD }}</div>
+      </b-col>
+      <b-col cols="1"><collapse-icon class="text-right" :visible="visible" /></b-col>
+    </b-row>
+    <b-collapse class="pb-4 pt-5" v-model="visible">
+      <decay-information :typeId="typeId" :decay="decay" :amount="amount" />
+    </b-collapse>
   </div>
 </template>
 <script>
 import CollapseIcon from '../TransactionRows/CollapseIcon'
-import TypeIcon from '../TransactionRows/TypeIcon'
-import AmountAndNameRow from '../TransactionRows/AmountAndNameRow'
-import MemoRow from '../TransactionRows/MemoRow'
-import DateRow from '../TransactionRows/DateRow'
-import DecayRow from '../TransactionRows/DecayRow'
+// import TypeIcon from '../TransactionRows/TypeIcon'
+import Name from '../TransactionRows/Name'
+// import MemoRow from '../TransactionRows/MemoRow'
+// import DateRow from '../TransactionRows/DateRow'
+// import DecayRow from '../TransactionRows/DecayRow'
 import DecayInformation from '../DecayInformations/DecayInformation'
 
 export default {
   name: 'TransactionReceive',
   components: {
     CollapseIcon,
-    TypeIcon,
-    AmountAndNameRow,
-    MemoRow,
-    DateRow,
-    DecayRow,
+    // TypeIcon,
+    Name,
+    // MemoRow,
+    // DateRow,
+    // DecayRow,
     DecayInformation,
   },
   props: {
diff --git a/frontend/src/components/Transactions/TransactionSend.vue b/frontend/src/components/Transactions/TransactionSend.vue
index 971819988..9ae2dfaae 100644
--- a/frontend/src/components/Transactions/TransactionSend.vue
+++ b/frontend/src/components/Transactions/TransactionSend.vue
@@ -1,61 +1,50 @@
 <template>
   <div class="transaction-slot-send">
-    <div @click="visible = !visible">
-      <!-- Collaps Icon  -->
-      <collapse-icon class="text-right" :visible="visible" />
-
-      <div>
-        <b-row>
-          <!-- ICON  -->
-          <b-col cols="1">
-            <type-icon color="text-danger" icon="arrow-left-circle" />
-          </b-col>
-
-          <b-col cols="11">
-            <!-- Amount / Name  -->
-            <amount-and-name-row
-              v-on="$listeners"
-              :amount="amount"
-              :linkedUser="linkedUser"
-              :transactionLinkId="transactionLinkId"
-            />
-
-            <!-- Memo -->
-            <memo-row :memo="memo" />
-
-            <!-- Datum -->
-            <date-row :date="balanceDate" />
-
-            <!-- Decay -->
-            <decay-row :decay="decay.decay" />
-          </b-col>
-        </b-row>
-      </div>
-
-      <b-collapse class="pb-4 pt-5" v-model="visible">
-        <decay-information :typeId="typeId" :decay="decay" :amount="amount" />
-      </b-collapse>
-    </div>
+    <b-row @click="visible = !visible" class="">
+      <b-col cols="2">
+        <b-avatar icon="arrow-left-circle" variant="danger" size="4em"></b-avatar>
+      </b-col>
+      <b-col>
+        <div>
+          <name
+            v-on="$listeners"
+            :amount="amount"
+            :linkedUser="linkedUser"
+            :transactionLinkId="transactionLinkId"
+          />
+        </div>
+        <div class="small">{{ balanceDate }}</div>
+        <div class="small">{{ balanceDate }}</div>
+      </b-col>
+      <b-col cols="3">
+        <div class="small">Gesendet</div>
+        <div class="small">{{ amount | GDD }}</div>
+      </b-col>
+      <b-col cols="1"><collapse-icon class="text-right" :visible="visible" /></b-col>
+    </b-row>
+    <b-collapse class="pb-4 pt-5" v-model="visible">
+      <decay-information :typeId="typeId" :decay="decay" :amount="amount" />
+    </b-collapse>
   </div>
 </template>
 <script>
 import CollapseIcon from '../TransactionRows/CollapseIcon'
-import TypeIcon from '../TransactionRows/TypeIcon'
-import AmountAndNameRow from '../TransactionRows/AmountAndNameRow'
-import MemoRow from '../TransactionRows/MemoRow'
-import DateRow from '../TransactionRows/DateRow'
-import DecayRow from '../TransactionRows/DecayRow'
+// import TypeIcon from '../TransactionRows/TypeIcon'
+import Name from '../TransactionRows/Name'
+// import MemoRow from '../TransactionRows/MemoRow'
+// import DateRow from '../TransactionRows/DateRow'
+// import DecayRow from '../TransactionRows/DecayRow'
 import DecayInformation from '../DecayInformations/DecayInformation'
 
 export default {
   name: 'TransactionSend',
   components: {
     CollapseIcon,
-    TypeIcon,
-    AmountAndNameRow,
-    MemoRow,
-    DateRow,
-    DecayRow,
+    // TypeIcon,
+    Name,
+    // MemoRow,
+    // DateRow,
+    // DecayRow,
     DecayInformation,
   },
   props: {
diff --git a/frontend/src/layouts/templates/ContentHeader.vue b/frontend/src/layouts/templates/ContentHeader.vue
index 28a67f382..58c073ad7 100644
--- a/frontend/src/layouts/templates/ContentHeader.vue
+++ b/frontend/src/layouts/templates/ContentHeader.vue
@@ -4,12 +4,12 @@
       <b-container v-if="path === '/overview'">
         <b-row>
           <b-col cols="5">
-            <div class="p-4 bg-white appBoxShadow gradido-border-radius">
+            <div>
               <gdd-amount :balance="balance" />
             </div>
           </b-col>
           <b-col cols="7">
-            <div class="p-4 bg-white appBoxShadow gradido-border-radius">
+            <div>
               <community-member />
             </div>
           </b-col>
@@ -20,12 +20,12 @@
       <b-container v-if="path === '/send'">
         <b-row>
           <b-col cols="6">
-            <div class="p-4 bg-white appBoxShadow gradido-border-radius">
-              <gdd-amount :balance="balance" />
+            <div>
+              <gdd-amount :balance="balance" :badge="true" />
             </div>
           </b-col>
           <b-col cols="6">
-            <div class="p-4 bg-white appBoxShadow gradido-border-radius">
+            <div>
               <gdt-amount />
             </div>
           </b-col>
@@ -34,12 +34,12 @@
       <b-container v-if="path === '/transactions'">
         <b-row>
           <b-col cols="6">
-            <div class="p-4 bg-white appBoxShadow gradido-border-radius">
-              <gdd-amount :balance="balance" />
+            <div>
+              <gdd-amount :balance="balance" :badge="true" />
             </div>
           </b-col>
           <b-col cols="6">
-            <div class="p-4 bg-white appBoxShadow gradido-border-radius">
+            <div>
               <gdt-amount />
             </div>
           </b-col>