From 5d5899ad0e77debcafbe3da47f92fbf2ff8338a0 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Fri, 23 Dec 2022 11:32:20 +0100
Subject: [PATCH] contribution messages style

---
 .../ContributionMessagesListItem.vue          | 29 +++++++++----------
 .../src/components/GddTransactionList.spec.js |  2 +-
 2 files changed, 15 insertions(+), 16 deletions(-)

diff --git a/frontend/src/components/ContributionMessages/ContributionMessagesListItem.vue b/frontend/src/components/ContributionMessages/ContributionMessagesListItem.vue
index 85da0abc2..80e4c7978 100644
--- a/frontend/src/components/ContributionMessages/ContributionMessagesListItem.vue
+++ b/frontend/src/components/ContributionMessages/ContributionMessagesListItem.vue
@@ -2,34 +2,33 @@
   <div class="contribution-messages-list-item">
     <div v-if="isNotModerator" class="is-not-moderator text-right">
       <b-row>
-        <b-col cols="auto">
+        <b-col>
+          <div class="font-weight-bold">{{ storeName.username }}</div>
+          <div class="small">{{ $d(new Date(message.createdAt), 'short') }}</div>
+          <parse-message v-bind="message"></parse-message>
+        </b-col>
+        <b-col cols="2">
           <avatar :username="storeName.username" :initials="storeName.initials"></avatar>
         </b-col>
-        <b-col cols="auto">
-          <span class="ml-2 mr-2">{{ storeName.username }}</span>
-        </b-col>
-        <b-col cols="auto">
-          <span class="ml-2">{{ $d(new Date(message.createdAt), 'short') }}</span>
-        </b-col>
       </b-row>
       <!-- <span class="ml-2 mr-2">{{ storeName.username }}</span>
       <span class="ml-2">{{ $d(new Date(message.createdAt), 'short') }}</span> -->
-      <parse-message v-bind="message"></parse-message>
     </div>
     <div v-else class="is-moderator text-left">
       <b-row>
-        <b-col cols="auto">
+        <b-col cols="2">
           <avatar :username="moderationName.username" :initials="moderationName.initials"></avatar>
-          <small class="ml-4 text-success">{{ $t('community.moderator') }}</small>
         </b-col>
         <b-col cols="auto">
-          <span class="ml-2 mr-2">{{ moderationName.username }}</span>
-        </b-col>
-        <b-col cols="auto">
-          <span class="ml-2">{{ $d(new Date(message.createdAt), 'short') }}</span>
+          <div class="font-weight-bold">
+            {{ moderationName.username }}
+            <small class="ml-2 text-success">{{ $t('community.moderator') }}</small>
+          </div>
+
+          <div class="small">{{ $d(new Date(message.createdAt), 'short') }}</div>
+          <parse-message v-bind="message"></parse-message>
         </b-col>
       </b-row>
-      <parse-message v-bind="message"></parse-message>
     </div>
   </div>
 </template>
diff --git a/frontend/src/components/GddTransactionList.spec.js b/frontend/src/components/GddTransactionList.spec.js
index ac4c0431c..a8ae960b6 100644
--- a/frontend/src/components/GddTransactionList.spec.js
+++ b/frontend/src/components/GddTransactionList.spec.js
@@ -447,7 +447,7 @@ describe('GddTransactionList', () => {
       describe('next page button clicked', () => {
         beforeEach(async () => {
           jest.clearAllMocks()
-          // await wrapper.vm.$nextTick()
+          await wrapper.vm.$nextTick()
           await wrapper.findComponent({ name: 'BPagination' }).vm.$emit('input', 2)
         })