From 5cb238bde2449643f56a3722f7bd47d43ef740fc Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Sun, 27 Nov 2022 12:57:23 +0100
Subject: [PATCH] right side last transaction list style

---
 .../Template/RightSide/LastTransactions.vue   | 43 ++++++++++++++++---
 frontend/src/layouts/templates/RightSide.vue  |  4 +-
 2 files changed, 39 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/Template/RightSide/LastTransactions.vue b/frontend/src/components/Template/RightSide/LastTransactions.vue
index 588df65c4..ed2689587 100644
--- a/frontend/src/components/Template/RightSide/LastTransactions.vue
+++ b/frontend/src/components/Template/RightSide/LastTransactions.vue
@@ -6,12 +6,43 @@
         <b-icon icon="three-dots-vertical"></b-icon>
       </b-col>
     </b-row>
-    <!-- {{ transactions }} -->
-    <div class="d-flex mt-3 mb-3" v-for="transaction in transactions" :key="transaction.id">
-      <div class="mr-3"><b-avatar></b-avatar></div>
-      <div class="d-inline">
-        <div>{{ transaction.typeId }}</div>
-        <div>{{ transaction.amount }}</div>
+    <div class="mt-3 mb-3" v-for="(transaction, index) in transactions" :key="transaction.id">
+      <div
+        v-if="
+          index <= 7 &&
+          transaction.typeId !== 'DECAY' &&
+          transaction.typeId !== 'LINK_SUMMARY' &&
+          transaction.typeId !== 'CREATION'
+        "
+        class="bg-white appBoxShadow gradido-border-radius p-1 border"
+        :class="transaction.typeId === 'SEND' ? 'border-danger' : 'border-success'"
+      >
+        <b-row>
+          <b-col cols="3">
+            <b-avatar badge-variant="white" src="https://placekitten.com/300/300">
+              <template #badge>
+                <b-icon
+                  :icon="transaction.typeId === 'SEND' ? 'arrow-left' : 'arrow-right'"
+                  :variant="transaction.typeId === 'SEND' ? 'danger' : 'success'"
+                ></b-icon>
+              </template>
+            </b-avatar>
+          </b-col>
+          <b-col>
+            <b-row>
+              <b-col class="small">
+                {{ transaction.linkedUser.firstName }} {{ transaction.linkedUser.lastName }}
+              </b-col>
+              <b-col cols="2" class="mr-4">
+                <b-icon icon="bookmark-plus" variant="black"></b-icon>
+              </b-col>
+            </b-row>
+            <b-row class="mt-2">
+              <b-col class="small">{{ transaction.amount | GDD }}</b-col>
+              <b-col class="small">{{ $d(new Date(transaction.balanceDate), 'short') }}</b-col>
+            </b-row>
+          </b-col>
+        </b-row>
       </div>
     </div>
   </div>
diff --git a/frontend/src/layouts/templates/RightSide.vue b/frontend/src/layouts/templates/RightSide.vue
index 0b5ce5805..9106be4de 100644
--- a/frontend/src/layouts/templates/RightSide.vue
+++ b/frontend/src/layouts/templates/RightSide.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="right-side mt-3 mt-lg-0">
-    <b-container v-if="path === '/overview'">
+    <div v-if="path === '/overview'">
       <!-- <b-row>
         <b-col>
           <div class="p-4">
@@ -19,7 +19,7 @@
           </div>
         </b-col>
       </b-row>
-    </b-container>
+    </div>
     <!-- <b-container v-if="path === '/storys'">
       <b-row>
         <b-col>