Contributions list style edited

frontend/src/assets/scss/gradido-template.scss

@@ -9,9 +9,9 @@ body {
   cursor: pointer;
 }
 
-// .bg-default {
+.bg-gray300 {
-//   background-color: rgba(245 245 245 / 75%) !important;
+  background-color: $gray-300
-// }
+}
 
 .shadow-default {
   box-shadow: rgb(0 0 0 / 14%) 0 4px 10px;
@@ -222,6 +222,10 @@ a:hover,
   border-color: #047006 !important;
 }
 
+.gradido-global-border-color-danger {
+  border-color: rgb(140 5 5) !important;
+}
+
 .gradido-global-color-gray {
   color: #858383;
 }

frontend/src/components/Contributions/ContributionListItem.vue

@@ -1,5 +1,8 @@
 <template>
-  <div class="contribution-list-item bg-white appBoxShadow gradido-border-radius p-3">
+  <div
+    class="contribution-list-item bg-white appBoxShadow gradido-border-radius p-3"
+    :class="state === 'IN_PROGRESS' ? 'border gradido-global-border-color-danger' : ''"
+  >
     <slot>
       <div class="">
         <b-row>
@@ -8,12 +11,12 @@
               v-if="firstName"
               :text="avatarText"
               :badge-variant="variant"
-              size="4em"
+              size="3em"
               class="font-weight-bold"
             >
               <template #badge><b-icon :icon="icon"></b-icon></template>
             </b-avatar>
-            <b-avatar v-else :icon="icon" :variant="variant" size="4em"></b-avatar>
+            <b-avatar v-else :icon="icon" :variant="variant" size="3em"></b-avatar>
           </b-col>
           <b-col>
             <div v-if="firstName" class="mr-3 font-weight-bold">{{ firstName }} {{ lastName }}</div>
@@ -38,7 +41,12 @@
             <collapse-icon class="text-right" :visible="visible" v-if="messagesCount > 0" />
           </b-col>
         </b-row>
-        <b-row class="mt-2">
+        <b-row
+          v-if="
+            (!['CONFIRMED', 'DELETED'].includes(state) && !allContribution) || messagesCount > 0
+          "
+          class="mt-4 bg-gray300 p-4"
+        >
           <b-col>
             <div
               v-if="!['CONFIRMED', 'DELETED'].includes(state) && !allContribution"
@@ -49,7 +57,7 @@
               {{ $t('delete') }}
             </div>
           </b-col>
-          <b-col>
+          <b-col class="text-center">
             <div
               v-if="!['CONFIRMED', 'DELETED'].includes(state) && !allContribution"
               class="test-edit-contribution pointer mr-3"
@@ -67,7 +75,7 @@
             </div>
           </b-col>
 
-          <b-col>
+          <b-col class="text-right">
             <div v-if="messagesCount > 0" class="pointer">
               <b-icon icon="chat-dots" @click="visible = !visible"></b-icon>
               {{ $t('moderatorChat') }}

frontend/src/components/GddSend/TransactionConfirmationSend.vue

@@ -4,7 +4,7 @@
       <div class="h3 mb-4">{{ $t('form.send_check') }}</div>
       <b-row class="mt-5">
         <b-col cols="2">
-          <b-avatar :text="avatarText" variant="success" size="4em"></b-avatar>
+          <b-avatar :text="avatarText" variant="success" size="3em"></b-avatar>
         </b-col>
         <b-col>
           <div class="h4">

frontend/src/components/Overview/CommunityNews.vue

@@ -31,6 +31,7 @@ export default {
 </script>
 <style scoped>
 .card {
+  height: 400px;
   background-attachment: absolute;
   background-position: center;
   background-repeat: no-repeat;

frontend/src/components/Transaction.vue

@@ -6,7 +6,7 @@
           <b-avatar
             :icon="getLinesByType.icon"
             variant="light"
-            size="4em"
+            size="3em"
             :class="getLinesByType.iconclasses"
           ></b-avatar>
         </b-col>
@@ -26,7 +26,7 @@
         </b-col>
         <b-col cols="3">
           <div class="small mt-2">{{ $t('gdt.credit') }}</div>
-          <div class="">{{ getLinesByType.credittext }}</div>
+          <div class="font-weight-bold">{{ getLinesByType.credittext }}</div>
         </b-col>
         <b-col cols="1"><collapse-icon class="text-right" :visible="visible" /></b-col>
       </b-row>

frontend/src/components/TransactionRows/CollapseIcon.vue

@@ -3,6 +3,7 @@
     <b-icon
       :icon="visible ? 'arrow-up-circle' : 'arrow-down-circle'"
       :class="visible ? 'text-black' : 'text-muted'"
+      class="h1"
     />
   </div>
 </template>

frontend/src/components/Transactions/TransactionCreation.vue

@@ -2,7 +2,7 @@
   <div class="transaction-slot-creation">
     <b-row @click="visible = !visible" class="">
       <b-col cols="2">
-        <b-avatar icon="gift" variant="success" size="4em"></b-avatar>
+        <b-avatar icon="gift" variant="success" size="3em"></b-avatar>
       </b-col>
       <b-col>
         <div>{{ linkedUser.firstName }} {{ linkedUser.lastName }}</div>

frontend/src/components/Transactions/TransactionLinkSummary.vue

@@ -2,7 +2,7 @@
   <div class="transaction-slot-link">
     <b-row @click="showTransactionLinks()">
       <b-col cols="2">
-        <b-avatar icon="link" variant="danger" size="4em"></b-avatar>
+        <b-avatar icon="link" variant="light" size="3em"></b-avatar>
       </b-col>
       <b-col>
         <div>{{ $t('gdd_per_link.links_sum') }}</div>

frontend/src/components/Transactions/TransactionReceive.vue

@@ -2,7 +2,7 @@
   <div class="transaction-slot-receive">
     <b-row @click="visible = !visible" class="">
       <b-col cols="2">
-        <b-avatar :text="avatarText" variant="success" size="4em"></b-avatar>
+        <b-avatar :text="avatarText" variant="success" size="3em"></b-avatar>
       </b-col>
       <b-col>
         <div>

frontend/src/components/Transactions/TransactionSend.vue

@@ -2,7 +2,7 @@
   <div class="transaction-slot-send">
     <b-row @click="visible = !visible" class="">
       <b-col cols="2">
-        <b-avatar :text="avatarText" variant="danger" size="4em"></b-avatar>
+        <b-avatar :text="avatarText" variant="danger" size="3em"></b-avatar>
       </b-col>
       <b-col>
         <div>