From 91406388e6863e54a85de900bf4f0a861e427230 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Mon, 29 Nov 2021 17:06:26 +0100
Subject: [PATCH 01/16] gray background, show GDD amount on TransactionConfirm
 and TransactionResult

---
 frontend/src/views/Pages/SendOverview.vue     | 13 +------------
 .../GddSend/TransactionConfirmation.vue       | 19 +++++++++++++++----
 2 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/frontend/src/views/Pages/SendOverview.vue b/frontend/src/views/Pages/SendOverview.vue
index ee8537833..00e415c04 100644
--- a/frontend/src/views/Pages/SendOverview.vue
+++ b/frontend/src/views/Pages/SendOverview.vue
@@ -3,13 +3,7 @@
     <b-container fluid>
       <b-row>
         <b-col class="bg-gray text-white text-center p-3">
-          <status
-            class="gdd-status-gdd"
-            v-if="showContext"
-            :pending="pending"
-            :balance="balance"
-            status-text="GDD"
-          />
+          <status class="gdd-status-gdd" :pending="pending" :balance="balance" status-text="GDD" />
         </b-col>
       </b-row>
 
@@ -86,11 +80,6 @@ export default {
       default: true,
     },
   },
-  computed: {
-    showContext() {
-      return this.currentTransactionStep === 0
-    },
-  },
   methods: {
     setTransaction(data) {
       this.transactionData = { ...data }
diff --git a/frontend/src/views/Pages/SendOverview/GddSend/TransactionConfirmation.vue b/frontend/src/views/Pages/SendOverview/GddSend/TransactionConfirmation.vue
index 0d902542b..bd6362922 100644
--- a/frontend/src/views/Pages/SendOverview/GddSend/TransactionConfirmation.vue
+++ b/frontend/src/views/Pages/SendOverview/GddSend/TransactionConfirmation.vue
@@ -2,17 +2,23 @@
   <div>
     <b-row>
       <b-col>
-        <div class="display-4 p-4">{{ $t('form.send_check') }}</div>
+        <div class="display-4 pb-4 gray-background">{{ $t('form.send_check') }}</div>
         <b-list-group>
-          <b-list-group-item class="d-flex justify-content-between align-items-center">
+          <b-list-group-item
+            class="d-flex justify-content-between align-items-center gray-background"
+          >
             {{ email }}
             <b-badge variant="primary" pill>{{ $t('form.recipient') }}</b-badge>
           </b-list-group-item>
-          <b-list-group-item class="d-flex justify-content-between align-items-center">
+          <b-list-group-item
+            class="d-flex justify-content-between align-items-center gray-background"
+          >
             {{ $n(amount, 'decimal') }} GDD
             <b-badge variant="primary" pill>{{ $t('form.amount') }}</b-badge>
           </b-list-group-item>
-          <b-list-group-item class="d-flex justify-content-between align-items-center">
+          <b-list-group-item
+            class="d-flex justify-content-between align-items-center gray-background"
+          >
             {{ memo ? memo : '-' }}
             <b-badge variant="primary" pill>{{ $t('form.message') }}</b-badge>
           </b-list-group-item>
@@ -42,3 +48,8 @@ export default {
   },
 }
 </script>
+<style>
+.gray-background {
+  background-color: #ebebeba3 !important;
+}
+</style>

From 3d5773fe854a09673c284d2c1090155304a794ba Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Mon, 29 Nov 2021 17:15:35 +0100
Subject: [PATCH 02/16] TransactionConfirmation email style changed

---
 .../GddSend/TransactionConfirmation.vue       | 19 +++++++++++++------
 1 file changed, 13 insertions(+), 6 deletions(-)

diff --git a/frontend/src/views/Pages/SendOverview/GddSend/TransactionConfirmation.vue b/frontend/src/views/Pages/SendOverview/GddSend/TransactionConfirmation.vue
index bd6362922..f0cc2f28c 100644
--- a/frontend/src/views/Pages/SendOverview/GddSend/TransactionConfirmation.vue
+++ b/frontend/src/views/Pages/SendOverview/GddSend/TransactionConfirmation.vue
@@ -4,12 +4,19 @@
       <b-col>
         <div class="display-4 pb-4 gray-background">{{ $t('form.send_check') }}</div>
         <b-list-group>
-          <b-list-group-item
-            class="d-flex justify-content-between align-items-center gray-background"
-          >
-            {{ email }}
-            <b-badge variant="primary" pill>{{ $t('form.recipient') }}</b-badge>
-          </b-list-group-item>
+          <b-input-group id="input-group-1" class="border border-default" 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"
+              type="text"
+              style="font-size: large"
+              class="pl-3"
+              :readonly="true"
+              :value="email"
+            ></b-form-input>
+          </b-input-group>
           <b-list-group-item
             class="d-flex justify-content-between align-items-center gray-background"
           >

From 6e1abd67741ad6c6d188ed31bfb8004f668ee36a Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Mon, 29 Nov 2021 17:20:44 +0100
Subject: [PATCH 03/16] TransactionConfirmation GDD amount style changed

---
 .../GddSend/TransactionConfirmation.vue       | 24 +++++++++++++------
 1 file changed, 17 insertions(+), 7 deletions(-)

diff --git a/frontend/src/views/Pages/SendOverview/GddSend/TransactionConfirmation.vue b/frontend/src/views/Pages/SendOverview/GddSend/TransactionConfirmation.vue
index f0cc2f28c..78c9c3685 100644
--- a/frontend/src/views/Pages/SendOverview/GddSend/TransactionConfirmation.vue
+++ b/frontend/src/views/Pages/SendOverview/GddSend/TransactionConfirmation.vue
@@ -3,7 +3,7 @@
     <b-row>
       <b-col>
         <div class="display-4 pb-4 gray-background">{{ $t('form.send_check') }}</div>
-        <b-list-group>
+        <b-list-group class="gray-background">
           <b-input-group id="input-group-1" class="border border-default" size="lg">
             <b-input-group-prepend class="d-none d-md-block">
               <b-icon icon="envelope" class="display-4 m-3"></b-icon>
@@ -17,12 +17,22 @@
               :value="email"
             ></b-form-input>
           </b-input-group>
-          <b-list-group-item
-            class="d-flex justify-content-between align-items-center gray-background"
-          >
-            {{ $n(amount, 'decimal') }} GDD
-            <b-badge variant="primary" pill>{{ $t('form.amount') }}</b-badge>
-          </b-list-group-item>
+          <br />
+          <b-input-group id="input-group-2" class="border border-default" size="lg">
+            <b-input-group-prepend class="p-2 d-none d-md-block">
+              <div class="m-1 mt-2">GDD</div>
+            </b-input-group-prepend>
+
+            <b-form-input
+              id="input-2"
+              :value="$n(amount, 'decimal')"
+              type="text"
+              style="font-size: large"
+              class="pl-3 gray-background"
+            ></b-form-input>
+          </b-input-group>
+
+           <br />
           <b-list-group-item
             class="d-flex justify-content-between align-items-center gray-background"
           >

From 7863de66874e00285ae6d6aa183063584e50ba45 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Mon, 29 Nov 2021 17:28:48 +0100
Subject: [PATCH 04/16] TransactionConfirmation Text style changed

---
 .../GddSend/TransactionConfirmation.vue       | 25 +++++++++++++------
 1 file changed, 17 insertions(+), 8 deletions(-)

diff --git a/frontend/src/views/Pages/SendOverview/GddSend/TransactionConfirmation.vue b/frontend/src/views/Pages/SendOverview/GddSend/TransactionConfirmation.vue
index 78c9c3685..e1733d05e 100644
--- a/frontend/src/views/Pages/SendOverview/GddSend/TransactionConfirmation.vue
+++ b/frontend/src/views/Pages/SendOverview/GddSend/TransactionConfirmation.vue
@@ -2,7 +2,7 @@
   <div>
     <b-row>
       <b-col>
-        <div class="display-4 pb-4 gray-background">{{ $t('form.send_check') }}</div>
+        <div class="display-4 pb-4">{{ $t('form.send_check') }}</div>
         <b-list-group class="gray-background">
           <b-input-group id="input-group-1" class="border border-default" size="lg">
             <b-input-group-prepend class="d-none d-md-block">
@@ -29,16 +29,25 @@
               type="text"
               style="font-size: large"
               class="pl-3 gray-background"
+              :readonly="true"
             ></b-form-input>
           </b-input-group>
 
-           <br />
-          <b-list-group-item
-            class="d-flex justify-content-between align-items-center gray-background"
-          >
-            {{ memo ? memo : '-' }}
-            <b-badge variant="primary" pill>{{ $t('form.message') }}</b-badge>
-          </b-list-group-item>
+          <br />
+
+          <b-input-group id="input-group-3" class="border border-default">
+            <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"
+              :value="memo ? memo : '-'"
+              class="pl-3 gray-background"
+              style="font-size: large"
+              :readonly="true"
+            ></b-form-textarea>
+          </b-input-group>
         </b-list-group>
       </b-col>
     </b-row>

From ea4e24644858d84c13f233ec495b31f0deae8415 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Mon, 29 Nov 2021 22:32:36 +0100
Subject: [PATCH 05/16] TransactionConfirmation preview check style

---
 .../GddSend/TransactionConfirmation.vue       | 39 +++++--------------
 1 file changed, 10 insertions(+), 29 deletions(-)

diff --git a/frontend/src/views/Pages/SendOverview/GddSend/TransactionConfirmation.vue b/frontend/src/views/Pages/SendOverview/GddSend/TransactionConfirmation.vue
index e1733d05e..1be6f27ab 100644
--- a/frontend/src/views/Pages/SendOverview/GddSend/TransactionConfirmation.vue
+++ b/frontend/src/views/Pages/SendOverview/GddSend/TransactionConfirmation.vue
@@ -3,50 +3,31 @@
     <b-row>
       <b-col>
         <div class="display-4 pb-4">{{ $t('form.send_check') }}</div>
-        <b-list-group class="gray-background">
+        <b-list-group class="">
+          <label class="input-1" for="input-1">{{ $t('form.recipient') }}</label>
           <b-input-group id="input-group-1" class="border border-default" size="lg">
-            <b-input-group-prepend class="d-none d-md-block">
+            <b-input-group-prepend class="d-none d-md-block gray-background">
               <b-icon icon="envelope" class="display-4 m-3"></b-icon>
             </b-input-group-prepend>
-            <b-form-input
-              id="input-1"
-              type="text"
-              style="font-size: large"
-              class="pl-3"
-              :readonly="true"
-              :value="email"
-            ></b-form-input>
+            <div class="p-3">{{ email }}</div>
           </b-input-group>
           <br />
+          <label class="input-2" for="input-2">{{ $t('form.amount') }}</label>
           <b-input-group id="input-group-2" class="border border-default" size="lg">
-            <b-input-group-prepend class="p-2 d-none d-md-block">
+            <b-input-group-prepend class="p-2 d-none d-md-block gray-background">
               <div class="m-1 mt-2">GDD</div>
             </b-input-group-prepend>
 
-            <b-form-input
-              id="input-2"
-              :value="$n(amount, 'decimal')"
-              type="text"
-              style="font-size: large"
-              class="pl-3 gray-background"
-              :readonly="true"
-            ></b-form-input>
+            <div class="p-3">{{ $n(amount, 'decimal') }}</div>
           </b-input-group>
 
           <br />
-
+          <label class="input-3" for="input-3">{{ $t('form.message') }}</label>
           <b-input-group id="input-group-3" class="border border-default">
-            <b-input-group-prepend class="d-none d-md-block">
+            <b-input-group-prepend class="d-none d-md-block gray-background">
               <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"
-              :value="memo ? memo : '-'"
-              class="pl-3 gray-background"
-              style="font-size: large"
-              :readonly="true"
-            ></b-form-textarea>
+            <div class="p-3">{{ memo ? memo : '-' }}</div>
           </b-input-group>
         </b-list-group>
       </b-col>

From bf389dd5e2bc2266257e0ea51c55fcb7e296da88 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Mon, 29 Nov 2021 22:52:57 +0100
Subject: [PATCH 06/16] Calculation of total amount prepared after confirmation
 of payment

---
 frontend/src/views/Pages/SendOverview.vue                      | 2 ++
 .../Pages/SendOverview/GddSend/TransactionConfirmation.vue     | 3 +++
 2 files changed, 5 insertions(+)

diff --git a/frontend/src/views/Pages/SendOverview.vue b/frontend/src/views/Pages/SendOverview.vue
index 00e415c04..66cc3136c 100644
--- a/frontend/src/views/Pages/SendOverview.vue
+++ b/frontend/src/views/Pages/SendOverview.vue
@@ -14,6 +14,8 @@
         </template>
         <template #transaction-confirmation>
           <transaction-confirmation
+            :balance="balance"
+            :decay="decay"
             :email="transactionData.email"
             :amount="transactionData.amount"
             :memo="transactionData.memo"
diff --git a/frontend/src/views/Pages/SendOverview/GddSend/TransactionConfirmation.vue b/frontend/src/views/Pages/SendOverview/GddSend/TransactionConfirmation.vue
index 1be6f27ab..0953d6b9b 100644
--- a/frontend/src/views/Pages/SendOverview/GddSend/TransactionConfirmation.vue
+++ b/frontend/src/views/Pages/SendOverview/GddSend/TransactionConfirmation.vue
@@ -32,6 +32,7 @@
         </b-list-group>
       </b-col>
     </b-row>
+    <b-row>{{$n(balance, 'decimal')}}, {{ $n(decay, 'decimal') }}, {{ $n(amount, 'decimal') }}</b-row>
     <b-row class="mt-4">
       <b-col>
         <b-button @click="$emit('on-reset')">{{ $t('form.cancel') }}</b-button>
@@ -48,6 +49,8 @@
 export default {
   name: 'TransactionConfirmation',
   props: {
+    balance: { type: Number, default: 0 },
+    decay: { type: Number, default: 0 },
     email: { type: String, default: '' },
     amount: { type: Number, default: 0 },
     memo: { type: String, default: '' },

From 9566b9e12743c4bda7117fe9bc02d64dc6a620b9 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Tue, 30 Nov 2021 08:32:10 +0100
Subject: [PATCH 07/16] decay set on TransactionConfirm

---
 frontend/src/views/Pages/SendOverview.vue                    | 3 +--
 .../Pages/SendOverview/GddSend/TransactionConfirmation.vue   | 5 ++++-
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/frontend/src/views/Pages/SendOverview.vue b/frontend/src/views/Pages/SendOverview.vue
index 66cc3136c..82f7d7cea 100644
--- a/frontend/src/views/Pages/SendOverview.vue
+++ b/frontend/src/views/Pages/SendOverview.vue
@@ -6,7 +6,6 @@
           <status class="gdd-status-gdd" :pending="pending" :balance="balance" status-text="GDD" />
         </b-col>
       </b-row>
-
       <br />
       <gdd-send :currentTransactionStep="currentTransactionStep">
         <template #transaction-form>
@@ -15,7 +14,7 @@
         <template #transaction-confirmation>
           <transaction-confirmation
             :balance="balance"
-            :decay="decay"
+            :transactions="transactions"
             :email="transactionData.email"
             :amount="transactionData.amount"
             :memo="transactionData.memo"
diff --git a/frontend/src/views/Pages/SendOverview/GddSend/TransactionConfirmation.vue b/frontend/src/views/Pages/SendOverview/GddSend/TransactionConfirmation.vue
index 0953d6b9b..b6025e8a7 100644
--- a/frontend/src/views/Pages/SendOverview/GddSend/TransactionConfirmation.vue
+++ b/frontend/src/views/Pages/SendOverview/GddSend/TransactionConfirmation.vue
@@ -32,6 +32,7 @@
         </b-list-group>
       </b-col>
     </b-row>
+    {{transactions}}
     <b-row>{{$n(balance, 'decimal')}}, {{ $n(decay, 'decimal') }}, {{ $n(amount, 'decimal') }}</b-row>
     <b-row class="mt-4">
       <b-col>
@@ -50,11 +51,13 @@ export default {
   name: 'TransactionConfirmation',
   props: {
     balance: { type: Number, default: 0 },
-    decay: { type: Number, default: 0 },
     email: { type: String, default: '' },
     amount: { type: Number, default: 0 },
     memo: { type: String, default: '' },
     loading: { type: Boolean, default: false },
+    transactions: {
+      default: () => [],
+    },
   },
 }
 </script>

From 13ac14b4a998172b99c1e783e45a02b0efab83bd Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Tue, 30 Nov 2021 09:19:08 +0100
Subject: [PATCH 08/16] Confirm transaction, preview invoice inserted

---
 .../GddSend/TransactionConfirmation.vue       | 34 +++++++++++++++++--
 1 file changed, 32 insertions(+), 2 deletions(-)

diff --git a/frontend/src/views/Pages/SendOverview/GddSend/TransactionConfirmation.vue b/frontend/src/views/Pages/SendOverview/GddSend/TransactionConfirmation.vue
index b6025e8a7..5886c69c5 100644
--- a/frontend/src/views/Pages/SendOverview/GddSend/TransactionConfirmation.vue
+++ b/frontend/src/views/Pages/SendOverview/GddSend/TransactionConfirmation.vue
@@ -32,8 +32,33 @@
         </b-list-group>
       </b-col>
     </b-row>
-    {{transactions}}
-    <b-row>{{$n(balance, 'decimal')}}, {{ $n(decay, 'decimal') }}, {{ $n(amount, 'decimal') }}</b-row>
+    
+      <b-container class="bv-example-row mt-3 gray-background p-2">
+  <b-row>
+    <b-col></b-col>
+    <b-col>aktueller Kontostand</b-col>
+    <b-col>{{$n(balance, 'decimal')}}</b-col>
+  </b-row>
+  <b-row>
+    <b-col> </b-col>
+    <b-col>   <strong>Dein Betrag   </strong></b-col>
+    <b-col>   <strong>- {{$n(amount, 'decimal')}}   </strong></b-col>
+ 
+  </b-row>
+    <b-row >
+    <b-col> </b-col>
+    <b-col>Vergänglichkeit</b-col>
+    <b-col style="border-bottom: double;">- {{$n(decay, 'decimal')}}</b-col>
+  </b-row>
+   
+ 
+   <b-row>
+    <b-col></b-col>
+    <b-col>neuer Kontostand</b-col>
+    <b-col>~ {{$n(balance - amount - decay, 'decimal')}}</b-col>
+  </b-row>
+</b-container>
+    
     <b-row class="mt-4">
       <b-col>
         <b-button @click="$emit('on-reset')">{{ $t('form.cancel') }}</b-button>
@@ -59,6 +84,11 @@ export default {
       default: () => [],
     },
   },
+  data() {
+    return {
+      decay: this.transactions[0].balance,
+    }
+  },
 }
 </script>
 <style>

From e495d3475b0c06185a28528d00ba5eebf531db6d Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Tue, 30 Nov 2021 09:24:24 +0100
Subject: [PATCH 09/16] Confirm transaction, preview invoice inserted clear

---
 .../GddSend/TransactionConfirmation.vue       | 54 +++++++++----------
 1 file changed, 27 insertions(+), 27 deletions(-)

diff --git a/frontend/src/views/Pages/SendOverview/GddSend/TransactionConfirmation.vue b/frontend/src/views/Pages/SendOverview/GddSend/TransactionConfirmation.vue
index 5886c69c5..0cd6e96aa 100644
--- a/frontend/src/views/Pages/SendOverview/GddSend/TransactionConfirmation.vue
+++ b/frontend/src/views/Pages/SendOverview/GddSend/TransactionConfirmation.vue
@@ -32,33 +32,33 @@
         </b-list-group>
       </b-col>
     </b-row>
-    
-      <b-container class="bv-example-row mt-3 gray-background p-2">
-  <b-row>
-    <b-col></b-col>
-    <b-col>aktueller Kontostand</b-col>
-    <b-col>{{$n(balance, 'decimal')}}</b-col>
-  </b-row>
-  <b-row>
-    <b-col> </b-col>
-    <b-col>   <strong>Dein Betrag   </strong></b-col>
-    <b-col>   <strong>- {{$n(amount, 'decimal')}}   </strong></b-col>
- 
-  </b-row>
-    <b-row >
-    <b-col> </b-col>
-    <b-col>Vergänglichkeit</b-col>
-    <b-col style="border-bottom: double;">- {{$n(decay, 'decimal')}}</b-col>
-  </b-row>
-   
- 
-   <b-row>
-    <b-col></b-col>
-    <b-col>neuer Kontostand</b-col>
-    <b-col>~ {{$n(balance - amount - decay, 'decimal')}}</b-col>
-  </b-row>
-</b-container>
-    
+
+    <b-container class="bv-example-row mt-3 gray-background p-2">
+      <b-row>
+        <b-col></b-col>
+        <b-col>aktueller Kontostand</b-col>
+        <b-col>{{ $n(balance, 'decimal') }}</b-col>
+      </b-row>
+      <b-row>
+        <b-col></b-col>
+        <b-col><strong>Dein Betrag</strong></b-col>
+        <b-col>
+          <strong>- {{ $n(amount, 'decimal') }}</strong>
+        </b-col>
+      </b-row>
+      <b-row>
+        <b-col></b-col>
+        <b-col>Vergänglichkeit</b-col>
+        <b-col style="border-bottom: double">- {{ $n(decay, 'decimal') }}</b-col>
+      </b-row>
+
+      <b-row>
+        <b-col></b-col>
+        <b-col>neuer Kontostand</b-col>
+        <b-col>~ {{ $n(balance - amount - decay, 'decimal') }}</b-col>
+      </b-row>
+    </b-container>
+
     <b-row class="mt-4">
       <b-col>
         <b-button @click="$emit('on-reset')">{{ $t('form.cancel') }}</b-button>

From 508b1519ee659e1b6fb9612b6985905e64b28456 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Tue, 30 Nov 2021 09:33:19 +0100
Subject: [PATCH 10/16] TransactionConfirm new translations added

---
 frontend/src/locales/de.json                           |  3 +++
 frontend/src/locales/en.json                           |  3 +++
 .../SendOverview/GddSend/TransactionConfirmation.vue   | 10 ++++++----
 3 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/frontend/src/locales/de.json b/frontend/src/locales/de.json
index b0dfe36d4..574c91d83 100644
--- a/frontend/src/locales/de.json
+++ b/frontend/src/locales/de.json
@@ -52,6 +52,9 @@
   },
   "form": {
     "amount": "Betrag",
+    "your_amount": "Dein Betrag",
+    "current_balance": "aktueller Kontostand",
+    "new_balance": "neuer Kontostand",
     "at": "am",
     "cancel": "Abbrechen",
     "close": "schließen",
diff --git a/frontend/src/locales/en.json b/frontend/src/locales/en.json
index 135729ffa..e51d7fd6f 100644
--- a/frontend/src/locales/en.json
+++ b/frontend/src/locales/en.json
@@ -52,6 +52,9 @@
   },
   "form": {
     "amount": "Amount",
+    "your_amount": "Your amount",
+    "current_balance": "current balance",
+    "new_balance": "new balance",
     "at": "at",
     "cancel": "Cancel",
     "close": "Close",
diff --git a/frontend/src/views/Pages/SendOverview/GddSend/TransactionConfirmation.vue b/frontend/src/views/Pages/SendOverview/GddSend/TransactionConfirmation.vue
index 0cd6e96aa..35c2936d2 100644
--- a/frontend/src/views/Pages/SendOverview/GddSend/TransactionConfirmation.vue
+++ b/frontend/src/views/Pages/SendOverview/GddSend/TransactionConfirmation.vue
@@ -36,25 +36,27 @@
     <b-container class="bv-example-row mt-3 gray-background p-2">
       <b-row>
         <b-col></b-col>
-        <b-col>aktueller Kontostand</b-col>
+        <b-col>{{ $t('form.current_balance') }}</b-col>
         <b-col>{{ $n(balance, 'decimal') }}</b-col>
       </b-row>
       <b-row>
         <b-col></b-col>
-        <b-col><strong>Dein Betrag</strong></b-col>
+        <b-col>
+          <strong>{{ $t('form.your_amount') }}</strong>
+        </b-col>
         <b-col>
           <strong>- {{ $n(amount, 'decimal') }}</strong>
         </b-col>
       </b-row>
       <b-row>
         <b-col></b-col>
-        <b-col>Vergänglichkeit</b-col>
+        <b-col>{{ $t('decay.decay') }}</b-col>
         <b-col style="border-bottom: double">- {{ $n(decay, 'decimal') }}</b-col>
       </b-row>
 
       <b-row>
         <b-col></b-col>
-        <b-col>neuer Kontostand</b-col>
+        <b-col>{{ $t('form.new_balance') }}</b-col>
         <b-col>~ {{ $n(balance - amount - decay, 'decimal') }}</b-col>
       </b-row>
     </b-container>

From 9ed7c9d71e1f8d0ccd948b1644701fd1e84309a0 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Tue, 30 Nov 2021 10:10:24 +0100
Subject: [PATCH 11/16] output error output from graphql that no recipient was
 found in ordinary text

---
 frontend/src/views/Pages/SendOverview.spec.js          | 10 +++++++---
 .../Pages/SendOverview/GddSend/TransactionResult.vue   |  7 +++++--
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/frontend/src/views/Pages/SendOverview.spec.js b/frontend/src/views/Pages/SendOverview.spec.js
index f28ec6126..bd9925740 100644
--- a/frontend/src/views/Pages/SendOverview.spec.js
+++ b/frontend/src/views/Pages/SendOverview.spec.js
@@ -116,18 +116,22 @@ describe('SendOverview', () => {
       describe('transaction is confirmed and server response is error', () => {
         beforeEach(async () => {
           jest.clearAllMocks()
-          sendMock.mockRejectedValue({ message: 'receiver not found' })
+          sendMock.mockRejectedValue({ message: 'recipiant not known' })
           await wrapper
             .findComponent({ name: 'TransactionConfirmation' })
             .vm.$emit('send-transaction')
         })
 
         it('shows the error page', () => {
-          expect(wrapper.find('div.card-body').text()).toContain('form.send_transaction_error')
+          expect(wrapper.find('.test-send_transaction_error').text()).toContain(
+            'form.send_transaction_error',
+          )
         })
 
         it('shows recipient not found', () => {
-          expect(wrapper.text()).toContain('transaction.receiverNotFound')
+          expect(wrapper.find('.test-receiver-not-found').text()).toContain(
+            'transaction.receiverNotFound',
+          )
         })
       })
     })
diff --git a/frontend/src/views/Pages/SendOverview/GddSend/TransactionResult.vue b/frontend/src/views/Pages/SendOverview/GddSend/TransactionResult.vue
index d8a2bd61b..b33f4d6b1 100644
--- a/frontend/src/views/Pages/SendOverview/GddSend/TransactionResult.vue
+++ b/frontend/src/views/Pages/SendOverview/GddSend/TransactionResult.vue
@@ -20,10 +20,13 @@
           <div>{{ $t('form.sorry') }}</div>
           <hr />
 
-          <div>{{ $t('form.send_transaction_error') }}</div>
+          <div class="test-send_transaction_error">{{ $t('form.send_transaction_error') }}</div>
 
           <hr />
-          <div v-if="errorResult === 'receiver not found'">
+          <div
+            class="test-test-receiver-not-found"
+            v-if="errorResult === 'GraphQL error: recipiant not known'"
+          >
             {{ $t('transaction.receiverNotFound') }}
           </div>
           <div v-else>({{ errorResult }})</div>

From 00c2c85306ae4a098c2c364101e32a613188a0ad Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Tue, 14 Dec 2021 11:22:30 +0100
Subject: [PATCH 12/16] Send transaction confirm, new amount structured

---
 frontend/src/locales/de.json                  |  2 +-
 frontend/src/locales/en.json                  |  2 +-
 frontend/src/views/Pages/SendOverview.vue     | 11 ++----
 .../GddSend/TransactionConfirmation.vue       | 39 +++++++++----------
 4 files changed, 24 insertions(+), 30 deletions(-)

diff --git a/frontend/src/locales/de.json b/frontend/src/locales/de.json
index dd9e0a738..71c34170b 100644
--- a/frontend/src/locales/de.json
+++ b/frontend/src/locales/de.json
@@ -54,7 +54,7 @@
     "amount": "Betrag",
     "your_amount": "Dein Betrag",
     "current_balance": "aktueller Kontostand",
-    "new_balance": "neuer Kontostand",
+    "new_balance": "neuer Kontostand nach Bestätigung",
     "at": "am",
     "cancel": "Abbrechen",
     "close": "schließen",
diff --git a/frontend/src/locales/en.json b/frontend/src/locales/en.json
index 9abb6435d..db19a3fd1 100644
--- a/frontend/src/locales/en.json
+++ b/frontend/src/locales/en.json
@@ -54,7 +54,7 @@
     "amount": "Amount",
     "your_amount": "Your amount",
     "current_balance": "current balance",
-    "new_balance": "new balance",
+    "new_balance": "account balance after confirmation",
     "at": "at",
     "cancel": "Cancel",
     "close": "Close",
diff --git a/frontend/src/views/Pages/SendOverview.vue b/frontend/src/views/Pages/SendOverview.vue
index 2ff5e622b..8b416c63d 100644
--- a/frontend/src/views/Pages/SendOverview.vue
+++ b/frontend/src/views/Pages/SendOverview.vue
@@ -1,13 +1,7 @@
 <template>
   <div>
     <b-container>
-      <b-row>
-        <b-col class="bg-gray text-white text-center p-3">
-          <status class="gdd-status-gdd" :pending="pending" :balance="balance" status-text="GDD" />
-        </b-col>
-      </b-row>
-      <br />
-      <gdd-send :currentTransactionStep="currentTransactionStep">
+      <gdd-send :currentTransactionStep="currentTransactionStep" class="pt-3">
         <template #transaction-form>
           <transaction-form :balance="balance" @set-transaction="setTransaction"></transaction-form>
         </template>
@@ -37,6 +31,7 @@
 </template>
 <script>
 import GddSend from './SendOverview/GddSend.vue'
+import Status from '../../components/Status.vue'
 import TransactionForm from './SendOverview/GddSend/TransactionForm.vue'
 import TransactionConfirmation from './SendOverview/GddSend/TransactionConfirmation.vue'
 import TransactionResult from './SendOverview/GddSend/TransactionResult.vue'
@@ -52,7 +47,7 @@ export default {
   name: 'SendOverview',
   components: {
     GddSend,
-
+    Status,
     TransactionForm,
     TransactionConfirmation,
     TransactionResult,
diff --git a/frontend/src/views/Pages/SendOverview/GddSend/TransactionConfirmation.vue b/frontend/src/views/Pages/SendOverview/GddSend/TransactionConfirmation.vue
index 35c2936d2..dd5caf0f8 100644
--- a/frontend/src/views/Pages/SendOverview/GddSend/TransactionConfirmation.vue
+++ b/frontend/src/views/Pages/SendOverview/GddSend/TransactionConfirmation.vue
@@ -5,7 +5,7 @@
         <div class="display-4 pb-4">{{ $t('form.send_check') }}</div>
         <b-list-group class="">
           <label class="input-1" for="input-1">{{ $t('form.recipient') }}</label>
-          <b-input-group id="input-group-1" class="border border-default" size="lg">
+          <b-input-group id="input-group-1" class="borderbottom" size="lg">
             <b-input-group-prepend class="d-none d-md-block gray-background">
               <b-icon icon="envelope" class="display-4 m-3"></b-icon>
             </b-input-group-prepend>
@@ -13,7 +13,7 @@
           </b-input-group>
           <br />
           <label class="input-2" for="input-2">{{ $t('form.amount') }}</label>
-          <b-input-group id="input-group-2" class="border border-default" size="lg">
+          <b-input-group id="input-group-2" class="borderbottom" size="lg">
             <b-input-group-prepend class="p-2 d-none d-md-block gray-background">
               <div class="m-1 mt-2">GDD</div>
             </b-input-group-prepend>
@@ -23,7 +23,7 @@
 
           <br />
           <label class="input-3" for="input-3">{{ $t('form.message') }}</label>
-          <b-input-group id="input-group-3" class="border border-default">
+          <b-input-group id="input-group-3" class="borderbottom">
             <b-input-group-prepend class="d-none d-md-block gray-background">
               <b-icon icon="chat-right-text" class="display-4 m-3 mt-4"></b-icon>
             </b-input-group-prepend>
@@ -34,30 +34,26 @@
     </b-row>
 
     <b-container class="bv-example-row mt-3 gray-background p-2">
-      <b-row>
-        <b-col></b-col>
-        <b-col>{{ $t('form.current_balance') }}</b-col>
-        <b-col>{{ $n(balance, 'decimal') }}</b-col>
+      <b-row class="pr-3">
+        <b-col class="text-right">{{ $t('form.current_balance') }}</b-col>
+        <b-col class="text-right">{{ $n(balance, 'decimal') }}</b-col>
       </b-row>
-      <b-row>
-        <b-col></b-col>
-        <b-col>
+      <b-row class="pr-3">
+        <b-col class="text-right">
           <strong>{{ $t('form.your_amount') }}</strong>
         </b-col>
-        <b-col>
+        <b-col class="text-right">
           <strong>- {{ $n(amount, 'decimal') }}</strong>
         </b-col>
       </b-row>
-      <b-row>
-        <b-col></b-col>
-        <b-col>{{ $t('decay.decay') }}</b-col>
-        <b-col style="border-bottom: double">- {{ $n(decay, 'decimal') }}</b-col>
+      <b-row class="pr-3">
+        <b-col class="text-right">{{ $t('decay.decay') }}</b-col>
+        <b-col class="text-right" style="border-bottom: double">- {{ $n(decay, 'decimal') }}</b-col>
       </b-row>
 
-      <b-row>
-        <b-col></b-col>
-        <b-col>{{ $t('form.new_balance') }}</b-col>
-        <b-col>~ {{ $n(balance - amount - decay, 'decimal') }}</b-col>
+      <b-row class="pr-3">
+        <b-col class="text-right">{{ $t('form.new_balance') }}</b-col>
+        <b-col class="text-right">~ {{ $n(balance - amount - decay, 'decimal') }}</b-col>
       </b-row>
     </b-container>
 
@@ -95,6 +91,9 @@ export default {
 </script>
 <style>
 .gray-background {
-  background-color: #ebebeba3 !important;
+  background-color: #ecebe6a3 !important;
+}
+.borderbottom {
+  border-bottom: 1px solid rgb(70, 65, 65);
 }
 </style>

From e03534108efcc01b99945834f51f00d3ea87ecc4 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Tue, 14 Dec 2021 11:24:04 +0100
Subject: [PATCH 13/16] Status component removed from SendOverview

---
 frontend/src/views/Pages/SendOverview.vue | 2 --
 1 file changed, 2 deletions(-)

diff --git a/frontend/src/views/Pages/SendOverview.vue b/frontend/src/views/Pages/SendOverview.vue
index 8b416c63d..08f2f0159 100644
--- a/frontend/src/views/Pages/SendOverview.vue
+++ b/frontend/src/views/Pages/SendOverview.vue
@@ -31,7 +31,6 @@
 </template>
 <script>
 import GddSend from './SendOverview/GddSend.vue'
-import Status from '../../components/Status.vue'
 import TransactionForm from './SendOverview/GddSend/TransactionForm.vue'
 import TransactionConfirmation from './SendOverview/GddSend/TransactionConfirmation.vue'
 import TransactionResult from './SendOverview/GddSend/TransactionResult.vue'
@@ -47,7 +46,6 @@ export default {
   name: 'SendOverview',
   components: {
     GddSend,
-    Status,
     TransactionForm,
     TransactionConfirmation,
     TransactionResult,

From 17d16df87c9ab5bd837e0d9c3e197970a397f6f2 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Tue, 14 Dec 2021 11:24:56 +0100
Subject: [PATCH 14/16] yarn locales --fix

---
 frontend/src/locales/de.json | 8 ++++----
 frontend/src/locales/en.json | 8 ++++----
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/frontend/src/locales/de.json b/frontend/src/locales/de.json
index 71c34170b..3a12d2d11 100644
--- a/frontend/src/locales/de.json
+++ b/frontend/src/locales/de.json
@@ -52,12 +52,10 @@
   },
   "form": {
     "amount": "Betrag",
-    "your_amount": "Dein Betrag",
-    "current_balance": "aktueller Kontostand",
-    "new_balance": "neuer Kontostand nach Bestätigung",
     "at": "am",
     "cancel": "Abbrechen",
     "close": "schließen",
+    "current_balance": "aktueller Kontostand",
     "date": "Datum",
     "description": "Beschreibung",
     "edit": "bearbeiten",
@@ -67,6 +65,7 @@
     "lastname": "Nachname",
     "memo": "Nachricht",
     "message": "Nachricht",
+    "new_balance": "neuer Kontostand nach Bestätigung",
     "password": "Passwort",
     "passwordRepeat": "Passwort wiederholen",
     "password_new": "neues Passwort",
@@ -91,7 +90,8 @@
       "is-not": "Du kannst dir selbst keine Gradidos überweisen",
       "usernmae-regex": "Der Username muss mit einem Buchstaben beginnen auf den mindestens zwei alfanumerische Zeichen folgen müssen.",
       "usernmae-unique": "Der Username ist bereits vergeben."
-    }
+    },
+    "your_amount": "Dein Betrag"
   },
   "gdt": {
     "action": "Aktion",
diff --git a/frontend/src/locales/en.json b/frontend/src/locales/en.json
index db19a3fd1..49f715717 100644
--- a/frontend/src/locales/en.json
+++ b/frontend/src/locales/en.json
@@ -52,12 +52,10 @@
   },
   "form": {
     "amount": "Amount",
-    "your_amount": "Your amount",
-    "current_balance": "current balance",
-    "new_balance": "account balance after confirmation",
     "at": "at",
     "cancel": "Cancel",
     "close": "Close",
+    "current_balance": "current balance",
     "date": "Date",
     "description": "Description",
     "edit": "Edit",
@@ -67,6 +65,7 @@
     "lastname": "Lastname",
     "memo": "Message",
     "message": "Message",
+    "new_balance": "account balance after confirmation",
     "password": "Password",
     "passwordRepeat": "Repeat password",
     "password_new": "New password",
@@ -91,7 +90,8 @@
       "is-not": "You cannot send Gradidos to yourself",
       "usernmae-regex": "The username must start with a letter, followed by at least two alphanumeric characters.",
       "usernmae-unique": "The username is already taken."
-    }
+    },
+    "your_amount": "Your amount"
   },
   "gdt": {
     "action": "Action",

From 725e5a29e9e8c3b1683bc4b6ca3f23431c54a8ba Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Tue, 14 Dec 2021 12:48:24 +0100
Subject: [PATCH 15/16] add propsData in SendOverview.spec.js, yarn lint --fix

---
 frontend/src/views/Pages/SendOverview.spec.js | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/frontend/src/views/Pages/SendOverview.spec.js b/frontend/src/views/Pages/SendOverview.spec.js
index 075399285..a3a937da2 100644
--- a/frontend/src/views/Pages/SendOverview.spec.js
+++ b/frontend/src/views/Pages/SendOverview.spec.js
@@ -13,7 +13,9 @@ describe('SendOverview', () => {
 
   const propsData = {
     balance: 123.45,
-    transactionCount: 1,
+    GdtBalance: 1234.56,
+    transactions: [],
+    pending: true,
   }
 
   const mocks = {
@@ -42,10 +44,6 @@ describe('SendOverview', () => {
       expect(wrapper.find('div.gdd-send').exists()).toBeTruthy()
     })
 
-    // it('has a transactions table', () => {
-    //  expect(wrapper.find('div.gdd-transaction-list').exists()).toBeTruthy()
-    // })
-
     describe('transaction form', () => {
       it('steps forward in the dialog', async () => {
         await wrapper.findComponent({ name: 'TransactionForm' }).vm.$emit('set-transaction', {
@@ -53,7 +51,8 @@ describe('SendOverview', () => {
           amount: 23.45,
           memo: 'Make the best of it!',
         })
-        expect(wrapper.findComponent({ name: 'TransactionConfirmation' }).exists()).toBeTruthy()
+        await wrapper.vm.$nextTick()
+        expect(wrapper.findComponent({ name: 'TransactionConfirmation' }).exists()).toBe(true)
       })
     })
 

From 52acec08209d916c7fe70bb3ba42c9435372a59d Mon Sep 17 00:00:00 2001
From: elweyn <heine.hannes@gmail.com>
Date: Thu, 16 Dec 2021 12:11:16 +0100
Subject: [PATCH 16/16] Tests  for SendOverview send transaction steps

---
 frontend/src/views/Pages/SendOverview.spec.js            | 9 +++++----
 .../Pages/SendOverview/GddSend/TransactionResult.vue     | 5 +----
 2 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/frontend/src/views/Pages/SendOverview.spec.js b/frontend/src/views/Pages/SendOverview.spec.js
index a3a937da2..429b12baf 100644
--- a/frontend/src/views/Pages/SendOverview.spec.js
+++ b/frontend/src/views/Pages/SendOverview.spec.js
@@ -14,7 +14,7 @@ describe('SendOverview', () => {
   const propsData = {
     balance: 123.45,
     GdtBalance: 1234.56,
-    transactions: [],
+    transactions: [{ balance: 0.1 }],
     pending: true,
   }
 
@@ -45,13 +45,14 @@ describe('SendOverview', () => {
     })
 
     describe('transaction form', () => {
-      it('steps forward in the dialog', async () => {
-        await wrapper.findComponent({ name: 'TransactionForm' }).vm.$emit('set-transaction', {
+      beforeEach(async () => {
+        wrapper.findComponent({ name: 'TransactionForm' }).vm.$emit('set-transaction', {
           email: 'user@example.org',
           amount: 23.45,
           memo: 'Make the best of it!',
         })
-        await wrapper.vm.$nextTick()
+      })
+      it('steps forward in the dialog', () => {
         expect(wrapper.findComponent({ name: 'TransactionConfirmation' }).exists()).toBe(true)
       })
     })
diff --git a/frontend/src/views/Pages/SendOverview/GddSend/TransactionResult.vue b/frontend/src/views/Pages/SendOverview/GddSend/TransactionResult.vue
index b33f4d6b1..7d036bef2 100644
--- a/frontend/src/views/Pages/SendOverview/GddSend/TransactionResult.vue
+++ b/frontend/src/views/Pages/SendOverview/GddSend/TransactionResult.vue
@@ -23,10 +23,7 @@
           <div class="test-send_transaction_error">{{ $t('form.send_transaction_error') }}</div>
 
           <hr />
-          <div
-            class="test-test-receiver-not-found"
-            v-if="errorResult === 'GraphQL error: recipiant not known'"
-          >
+          <div class="test-receiver-not-found" v-if="errorResult === 'recipiant not known'">
             {{ $t('transaction.receiverNotFound') }}
           </div>
           <div v-else>({{ errorResult }})</div>