From e9eb3331fe91b3f9c568c445e0a86a038fe19989 Mon Sep 17 00:00:00 2001
From: ogerly <landmatrosen@googlemail.com>
Date: Wed, 19 May 2021 14:33:23 +0200
Subject: [PATCH] Transactions list clearer + date visible

---
 .../src/views/Pages/AccountOverview.spec.js   |  2 +-
 frontend/src/views/Pages/AccountOverview.vue  | 14 ++--
 .../{GddTable.vue => GddTransactionList.vue}  | 71 +++++++++----------
 ...ooter.vue => GddTransactionListFooter.vue} |  2 +-
 .../Pages/UserProfileTransactionList.vue      | 25 +++----
 5 files changed, 54 insertions(+), 60 deletions(-)
 rename frontend/src/views/Pages/AccountOverview/{GddTable.vue => GddTransactionList.vue} (72%)
 rename frontend/src/views/Pages/AccountOverview/{GddTableFooter.vue => GddTransactionListFooter.vue} (91%)

diff --git a/frontend/src/views/Pages/AccountOverview.spec.js b/frontend/src/views/Pages/AccountOverview.spec.js
index 68d91ee98..d28b295d8 100644
--- a/frontend/src/views/Pages/AccountOverview.spec.js
+++ b/frontend/src/views/Pages/AccountOverview.spec.js
@@ -32,7 +32,7 @@ describe('AccountOverview', () => {
     })
 
     it('has a transactions table', () => {
-      expect(wrapper.find('gdd-table-stub').exists()).toBeTruthy()
+      expect(wrapper.find('gdd-transaction-list-stub').exists()).toBeTruthy()
     })
   })
 })
diff --git a/frontend/src/views/Pages/AccountOverview.vue b/frontend/src/views/Pages/AccountOverview.vue
index 5c7b9fb76..cf05b846a 100644
--- a/frontend/src/views/Pages/AccountOverview.vue
+++ b/frontend/src/views/Pages/AccountOverview.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <base-header class="pb-lg-4 pt-lg-2 bg-transparent"></base-header>
-    <b-container fluid class="p-lg-2 mt-lg-5">
+    <b-container fluid class="p-0 p-lg-2 mt-lg-5">
       <gdd-status
         v-if="showContext"
         :pending="pending"
@@ -29,7 +29,7 @@
         </template>
       </gdd-send>
       <hr />
-      <gdd-table
+      <gdd-transaction-list
         v-if="showContext"
         :transactions="transactions"
         :max="5"
@@ -37,15 +37,15 @@
         :transactionCount="transactionCount"
         @update-transactions="$emit('update-transactions')"
       />
-      <gdd-table-footer v-if="showContext" :count="transactionCount" />
+      <gdd-transaction-list-footer v-if="showContext" :count="transactionCount" />
     </b-container>
   </div>
 </template>
 <script>
 import GddStatus from './AccountOverview/GddStatus.vue'
 import GddSend from './AccountOverview/GddSend.vue'
-import GddTable from './AccountOverview/GddTable.vue'
-import GddTableFooter from './AccountOverview/GddTableFooter.vue'
+import GddTransactionList from './AccountOverview/GddTransactionList.vue'
+import GddTransactionListFooter from './AccountOverview/GddTransactionListFooter.vue'
 import TransactionForm from './AccountOverview/GddSend/TransactionForm.vue'
 import TransactionConfirmation from './AccountOverview/GddSend/TransactionConfirmation.vue'
 import TransactionResult from './AccountOverview/GddSend/TransactionResult.vue'
@@ -63,8 +63,8 @@ export default {
   components: {
     GddStatus,
     GddSend,
-    GddTable,
-    GddTableFooter,
+    GddTransactionList,
+    GddTransactionListFooter,
     TransactionForm,
     TransactionConfirmation,
     TransactionResult,
diff --git a/frontend/src/views/Pages/AccountOverview/GddTable.vue b/frontend/src/views/Pages/AccountOverview/GddTransactionList.vue
similarity index 72%
rename from frontend/src/views/Pages/AccountOverview/GddTable.vue
rename to frontend/src/views/Pages/AccountOverview/GddTransactionList.vue
index f516f7cbb..7a7c5cb7f 100644
--- a/frontend/src/views/Pages/AccountOverview/GddTable.vue
+++ b/frontend/src/views/Pages/AccountOverview/GddTransactionList.vue
@@ -6,43 +6,36 @@
         :key="item.id"
         style="background-color: #ebebeba3 !important"
       >
-        <div class="d-flex w-100 justify-content-between">
-          <b-icon
-            v-if="item.type === 'send'"
-            icon="arrow-left-circle"
-            class="m-1 text-danger"
-            font-scale="2"
-            style="color: red"
-          ></b-icon>
-          <b-icon
-            v-else-if="item.type === 'receive'"
-            icon="arrow-right-circle"
-            class="m-1"
-            font-scale="2"
-            style="color: green"
-          ></b-icon>
-          <b-icon
-            v-else-if="item.type === 'creation'"
-            icon="gift"
-            class="m-1"
-            font-scale="2"
-            style="color: orange"
-          ></b-icon>
-          <b-icon
-            v-else
-            icon="droplet-half"
-            class="m-1"
-            font-scale="2"
-            style="color: orange"
-          ></b-icon>
-          <h1 class="">
+        <div class="d-flex">
+          <div style="width: 10%">
+            <b-icon
+              v-if="item.type === 'send'"
+              icon="arrow-left-circle"
+              class="m-mb-1 text-danger font2em"
+            ></b-icon>
+            <b-icon
+              v-else-if="item.type === 'receive'"
+              icon="arrow-right-circle"
+              class="m-md-1 text-success font2em"
+            ></b-icon>
+            <b-icon
+              v-else-if="item.type === 'creation'"
+              icon="gift"
+              class="m-md-1 font2em"
+              style="color: green"
+            ></b-icon>
+            <b-icon v-else icon="droplet-half" class="m-md-1 font2em" style="color: gray"></b-icon>
+          </div>
+          <div class="font1_2em pl-2" style="width: 30%">
+            {{ $n(item.balance) }}
             <span v-if="item.type === 'receive' || item.type === 'creation'">+</span>
             <span v-else>-</span>
-            {{ $n(item.balance) }}
-            <small>GDD</small>
-          </h1>
-          <h2 class="text-muted">{{ item.name }}</h2>
-          <b-button v-b-toggle="'a' + item.transaction_id" variant="secondary">
+          </div>
+          <div class="font1_2em" style="width: 50%">
+            {{ item.name }} -
+            <div class="text-sm">{{ $moment(item.date).format('DD.MM.YYYY - HH:mm:ss') }}</div>
+          </div>
+          <b-button v-b-toggle="'a' + item.transaction_id" class="btn-sm">
             <b>i</b>
           </b-button>
         </div>
@@ -97,7 +90,7 @@
 
 <script>
 export default {
-  name: 'GddTable',
+  name: 'gdd-transaction-list',
   props: {
     transactions: { default: [] },
     max: { type: Number, default: 1000 },
@@ -125,6 +118,12 @@ export default {
 }
 </script>
 <style>
+.font1_2em {
+  font-size: 1.2em;
+}
+.font2em {
+  font-size: 1.5em;
+}
 .el-table .cell {
   padding-left: 0px;
   padding-right: 0px;
diff --git a/frontend/src/views/Pages/AccountOverview/GddTableFooter.vue b/frontend/src/views/Pages/AccountOverview/GddTransactionListFooter.vue
similarity index 91%
rename from frontend/src/views/Pages/AccountOverview/GddTableFooter.vue
rename to frontend/src/views/Pages/AccountOverview/GddTransactionListFooter.vue
index 74f254ebb..0e30d85dc 100644
--- a/frontend/src/views/Pages/AccountOverview/GddTableFooter.vue
+++ b/frontend/src/views/Pages/AccountOverview/GddTransactionListFooter.vue
@@ -13,7 +13,7 @@
 
 <script>
 export default {
-  name: 'GddTableFooter',
+  name: 'GddTransactionListFooter',
   props: {
     count: { count: Number },
   },
diff --git a/frontend/src/views/Pages/UserProfileTransactionList.vue b/frontend/src/views/Pages/UserProfileTransactionList.vue
index 6b1a32d48..1b5b30f7b 100644
--- a/frontend/src/views/Pages/UserProfileTransactionList.vue
+++ b/frontend/src/views/Pages/UserProfileTransactionList.vue
@@ -1,29 +1,24 @@
 <template>
   <div>
     <div
-      class="header pb-8 pt-lg-4 d-flex align-items-center profile-header"
+      class="header pb-sm-1 pb-md-7 d-flex align-items-center profile-header"
       style="max-height: 200px"
     ></div>
-    <b-container fluid class="mt--6">
-      <b-row>
-        <b-col class="order-xl-1">
-          <gdd-table
-            :timestamp="timestamp"
-            :transactionCount="transactionCount"
-            :transactions="transactions"
-            @update-transactions="updateTransactions"
-          />
-        </b-col>
-      </b-row>
-    </b-container>
+
+    <gdd-transaction-list
+      :timestamp="timestamp"
+      :transactionCount="transactionCount"
+      :transactions="transactions"
+      @update-transactions="updateTransactions"
+    />
   </div>
 </template>
 <script>
-import GddTable from '../../views/Pages/AccountOverview/GddTable.vue'
+import GddTransactionList from './AccountOverview/GddTransactionList.vue'
 
 export default {
   components: {
-    GddTable,
+    GddTransactionList,
   },
   props: {
     transactions: {