Transaction styling

changes/mario_3078-improve-transaction-styling

@@ -0,0 +1 @@
+[Added] [#3078](https://github.com/cosmos/lunie/issues/3078) Improve design of Activity page and support multisend transactions @mariopino

src/components/transactions/TransactionIcon.vue

@@ -1,10 +1,6 @@
 <template>
   <div class="tx__icon">
-    <img
-      :class="transactionGroup"
-      src="~assets/images/cosmos-logo.png"
-      alt="cosmic atom token"
-    />
+    <img :class="transactionGroup" :src="icon" :alt="transactionType" />
   </div>
 </template>
 
@@ -15,6 +11,47 @@ export default {
     transactionGroup: {
       type: String,
       required: true
+    },
+    transactionType: {
+      type: String,
+      required: true
+    }
+  },
+  computed: {
+    icon() {
+      if (this.transactionType === `Sent`) {
+        return `/img/icons/activity/Sent.svg`
+      } else if (this.transactionType === `Received`) {
+        return `/img/icons/activity/Received.svg`
+      } else if (this.transactionType === `Staked`) {
+        return `/img/icons/activity/Delegate.svg`
+      } else if (this.transactionType === `Restaked`) {
+        return `/img/icons/activity/Redelegate.svg`
+      } else if (this.transactionType === `Unstaked`) {
+        return `/img/icons/activity/Undelegate.svg`
+      } else if (this.transactionType.search(`Withdrawal`) === 0) {
+        return `/img/icons/activity/Withdrawal.svg`
+      } else if (this.transactionType === `Update withdraw address`) {
+        return `/img/icons/activity/Withdrawal.svg`
+      } else if (this.transactionType.search(`Voted`) === 0) {
+        return `/img/icons/activity/Voted.svg`
+      } else if (this.transactionType === `Deposit`) {
+        return `/img/icons/activity/Deposit.svg`
+      } else if (this.transactionType.search(`Submitted`) === 0) {
+        // MISSING ICON!
+        return `/img/icons/activity/Proposal.svg`
+      } else if (this.transactionType === `Create validator`) {
+        // MISSING ICON!
+        return `/img/icons/activity/Create.svg`
+      } else if (this.transactionType === `Edit validator`) {
+        // MISSING ICON!
+        return `/img/icons/activity/Edit.svg`
+      } else if (this.transactionType.search(`Unjail`) === 0) {
+        // MISSING ICON!
+        return `/img/icons/activity/Unjail.svg`
+      } else {
+        return ``
+      }
     }
   }
 }
@@ -24,14 +61,14 @@ export default {
 @import "../../styles/variables.css";
 
 .tx__icon {
-  padding: 12px 0 12px 1rem;
+  padding: 1rem 0 1rem 1rem;
 }
 
 .tx__icon img {
   max-height: 100%;
   max-width: 52px;
-  border: 2px solid;
   border-radius: 50%;
+  border: 2px solid;
   display: block;
   border-color: grey;
 }