From ff814bb667cda380d2a7c08bad2fde1dcfb2df84 Mon Sep 17 00:00:00 2001
From: ogerly <landmatrosen@googlemail.com>
Date: Tue, 15 Jun 2021 14:42:05 +0200
Subject: [PATCH] fix ui mobil send transaction form

---
 .../GddSend/TransactionForm.spec.js           |  8 +--
 .../GddSend/TransactionForm.vue               | 53 +++++++++----------
 .../views/Pages/AccountOverview/GddStatus.vue |  8 +--
 3 files changed, 32 insertions(+), 37 deletions(-)

diff --git a/frontend/src/views/Pages/AccountOverview/GddSend/TransactionForm.spec.js b/frontend/src/views/Pages/AccountOverview/GddSend/TransactionForm.spec.js
index f9adfcd70..aa3e4d0ca 100644
--- a/frontend/src/views/Pages/AccountOverview/GddSend/TransactionForm.spec.js
+++ b/frontend/src/views/Pages/AccountOverview/GddSend/TransactionForm.spec.js
@@ -45,7 +45,7 @@ describe('GddSend', () => {
         })
 
         it('has a label form.receiver', () => {
-          expect(wrapper.findAll('div.text-left').at(0).text()).toBe('form.receiver')
+          expect(wrapper.find('label.input-1').text()).toBe('form.receiver')
         })
 
         it('has a placeholder "E-Mail"', () => {
@@ -61,11 +61,11 @@ describe('GddSend', () => {
         })
 
         it('has an GDD text icon', () => {
-          expect(wrapper.find('#input-group-2').find('div.h3').text()).toBe('GDD')
+          expect(wrapper.find('#input-group-2').find('div.h4').text()).toBe('GDD')
         })
 
         it('has a label form.amount', () => {
-          expect(wrapper.findAll('div.text-left').at(1).text()).toBe('form.amount')
+          expect(wrapper.find('label.input-2').text()).toBe('form.amount')
         })
 
         it('has a placeholder "0.01"', () => {
@@ -87,7 +87,7 @@ describe('GddSend', () => {
         })
 
         it('has a label form.memo', () => {
-          expect(wrapper.findAll('div.text-left').at(2).text()).toBe('form.memo')
+          expect(wrapper.find('label.input-3').text()).toBe('form.memo')
         })
       })
 
diff --git a/frontend/src/views/Pages/AccountOverview/GddSend/TransactionForm.vue b/frontend/src/views/Pages/AccountOverview/GddSend/TransactionForm.vue
index 66bc16be4..c573d7275 100644
--- a/frontend/src/views/Pages/AccountOverview/GddSend/TransactionForm.vue
+++ b/frontend/src/views/Pages/AccountOverview/GddSend/TransactionForm.vue
@@ -1,7 +1,7 @@
 <template>
   <b-row class="transaction-form">
-    <b-col xl="12" md="12">
-      <b-card class="p-0 p-md-3" style="background-color: #ebebeba3 !important">
+    <b-col xl="12" md="12" class="p-0">
+      <b-card class="p-0 m-0" style="background-color: #ebebeba3 !important">
         <!-- -<QrCode @set-transaction="setTransaction"></QrCode> -->
         <validation-observer v-slot="{ handleSubmit }" ref="formValidator">
           <b-form role="form" @submit.prevent="handleSubmit(onSubmit)" @reset="onReset">
@@ -10,6 +10,7 @@
                  </div>
                  <br />
             -->
+
             <div>
               <validation-provider
                 name="Email"
@@ -21,20 +22,17 @@
                 v-slot="{ errors }"
               >
                 <b-row>
-                  <b-col class="text-left p-3 p-sm-1">{{ $t('form.receiver') }}</b-col>
                   <b-col v-if="errors" class="text-right p-3 p-sm-1">
                     <span v-for="error in errors" :key="error" class="errors">{{ error }}</span>
                   </b-col>
                 </b-row>
+                <label class="input-1"  for="input-1">{{ $t('form.receiver') }}</label>
                 <b-input-group
                   id="input-group-1"
-                  label="Empfänger:"
-                  label-for="input-1"
                   description="We'll never share your email with anyone else."
                   size="lg"
-                  class="mb-3"
                 >
-                  <b-input-group-prepend class="p-3 d-none d-md-block">
+                  <b-input-group-prepend class="p-2 d-none d-md-block">
                     <b-icon icon="envelope" class="display-3"></b-icon>
                   </b-input-group-prepend>
                   <b-form-input
@@ -42,12 +40,15 @@
                     v-model="form.email"
                     type="email"
                     placeholder="E-Mail"
-                    style="font-size: xx-large; padding-left: 20px"
+                    style="font-size: large"
+                    class="pl-3"
                   ></b-form-input>
                 </b-input-group>
               </validation-provider>
             </div>
+
             <br />
+
             <div>
               <validation-provider
                 :name="$t('form.amount')"
@@ -58,21 +59,16 @@
                 v-slot="{ errors, valid }"
               >
                 <b-row>
-                  <b-col class="text-left p-3 p-sm-1">{{ $t('form.amount') }}</b-col>
-                  <b-col v-if="errors" class="text-right p-3 p-sm-1">
+                  <b-col v-if="errors" class="col-12 text-right p-3 p-sm-1">
                     <span v-for="error in errors" class="errors" :key="error">{{ error }}</span>
                   </b-col>
                 </b-row>
-                <b-input-group
-                  id="input-group-2"
-                  label="Betrag:"
-                  label-for="input-2"
-                  size="lg"
-                  class="mb-3"
-                >
+                <label class="input-2" for="input-2">{{ $t('form.amount') }}</label>
+                <b-input-group id="input-group-2" size="lg">
                   <b-input-group-prepend class="p-2 d-none d-md-block">
-                    <div class="h3 pt-3 pr-3">GDD</div>
+                    <div class="h4 pt-2 pr-2">GDD</div>
                   </b-input-group-prepend>
+
                   <b-form-input
                     id="input-2"
                     v-model="form.amount"
@@ -81,10 +77,14 @@
                     @focus="amountFocused = !amountFocused"
                     @blur="normalizeAmount(valid)"
                     :placeholder="$n(0.01)"
-                    style="font-size: xx-large; padding-left: 20px"
+                    style="font-size: large"
+                    class="pl-3"
                   ></b-form-input>
                 </b-input-group>
               </validation-provider>
+            </div>
+
+            <div class="mt-4">
               <validation-provider
                 :rules="{
                   required: true,
@@ -94,22 +94,17 @@
                 :name="$t('form.memo')"
                 v-slot="{ errors }"
               >
-                <b-row>
-                  <b-col class="text-left p-3 p-sm-1">{{ $t('form.memo') }}</b-col>
+                <b-row>                   
                   <b-col v-if="errors" class="text-right p-3 p-sm-1">
                     <span v-for="error in errors" class="errors" :key="error">{{ error }}</span>
                   </b-col>
                 </b-row>
+                <label class="input-3" for="input-3">{{ $t('form.memo') }}</label>
                 <b-input-group id="input-group-3">
-                  <b-input-group-prepend class="p-3 d-none d-md-block">
-                    <b-icon icon="chat-right-text" class="display-3"></b-icon>
+                  <b-input-group-prepend class="d-none d-md-block">
+                    <b-icon icon="chat-right-text" class="display-3 mr-3"></b-icon>
                   </b-input-group-prepend>
-                  <b-form-textarea
-                    rows="3"
-                    v-model="form.memo"
-                    class="pl-3"
-                    style="font-size: x-large"
-                  ></b-form-textarea>
+                  <b-form-textarea id="input-3" rows="3" v-model="form.memo" class="pl-3"></b-form-textarea>
                 </b-input-group>
               </validation-provider>
             </div>
diff --git a/frontend/src/views/Pages/AccountOverview/GddStatus.vue b/frontend/src/views/Pages/AccountOverview/GddStatus.vue
index 6bf03d69c..c0c4869dd 100644
--- a/frontend/src/views/Pages/AccountOverview/GddStatus.vue
+++ b/frontend/src/views/Pages/AccountOverview/GddStatus.vue
@@ -1,13 +1,13 @@
 <template>
   <div>
     <b-row>
-      <b-col>
-        <b-card style="background-color: #ebebeba3 !important">
+      <b-col class="p-0">
+        <b-card class="p-0" style="background-color: #ebebeba3 !important">
           {{ pending ? '—' : $n(balance, 'decimal') }} GDD
         </b-card>
       </b-col>
-      <b-col>
-        <b-card class="lg-h2 text-right" style="background-color: #ebebeba3 !important">
+      <b-col class="pr-0">
+        <b-card class="p-0 text-right" style="background-color: #ebebeba3 !important">
           {{ pending ? '—' : $n(GdtBalance, 'decimal') }} GDT
         </b-card>
       </b-col>