From c2d51d179fabfa47a032617f52f0fee75ab1e91b Mon Sep 17 00:00:00 2001
From: abefernan <44572727+abefernan@users.noreply.github.com>
Date: Fri, 5 May 2023 13:20:46 +0200
Subject: [PATCH] Tweak styles for n messages in TransactionInfo

---
 .../dataViews/TransactionInfo/index.tsx       | 55 ++++++++++---------
 1 file changed, 29 insertions(+), 26 deletions(-)

diff --git a/components/dataViews/TransactionInfo/index.tsx b/components/dataViews/TransactionInfo/index.tsx
index 1537739..593550b 100644
--- a/components/dataViews/TransactionInfo/index.tsx
+++ b/components/dataViews/TransactionInfo/index.tsx
@@ -23,43 +23,46 @@ const TransactionInfo = ({ tx }: Props) => {
   const { state } = useAppContext();
 
   return (
-    <StackableContainer lessPadding lessMargin>
+    <>
       <ul className="meta-data">
         <>
           {tx.msgs.map((msg, index) => (
-            <>
-              {isTxMsgSend(msg) ? <TxMsgSendDetails key={index} msg={msg} /> : null}
-              {isTxMsgDelegate(msg) ? <TxMsgDelegateDetails key={index} msg={msg} /> : null}
-              {isTxMsgUndelegate(msg) ? <TxMsgUndelegateDetails key={index} msg={msg} /> : null}
-              {isTxMsgRedelegate(msg) ? <TxMsgRedelegateDetails key={index} msg={msg} /> : null}
-              {isTxMsgClaimRewards(msg) ? <TxMsgClaimRewardsDetails key={index} msg={msg} /> : null}
-            </>
+            <StackableContainer key={index} lessPadding lessMargin>
+              {isTxMsgSend(msg) ? <TxMsgSendDetails msg={msg} /> : null}
+              {isTxMsgDelegate(msg) ? <TxMsgDelegateDetails msg={msg} /> : null}
+              {isTxMsgUndelegate(msg) ? <TxMsgUndelegateDetails msg={msg} /> : null}
+              {isTxMsgRedelegate(msg) ? <TxMsgRedelegateDetails msg={msg} /> : null}
+              {isTxMsgClaimRewards(msg) ? <TxMsgClaimRewardsDetails msg={msg} /> : null}
+            </StackableContainer>
           ))}
-          {tx.fee ? (
-            <>
+          <StackableContainer lessPadding lessMargin>
+            {tx.fee ? (
+              <>
+                <li>
+                  <label>Gas:</label>
+                  <div>{tx.fee.gas}</div>
+                </li>
+                <li>
+                  <label>Fee:</label>
+                  <div>{printableCoins(tx.fee.amount, state.chain)}</div>
+                </li>
+              </>
+            ) : null}
+            {tx.memo ? (
               <li>
-                <label>Gas:</label>
-                <div>{tx.fee.gas}</div>
+                <label>Memo:</label>
+                <div>{tx.memo}</div>
               </li>
-              <li>
-                <label>Fee:</label>
-                <div>{printableCoins(tx.fee.amount, state.chain)}</div>
-              </li>
-            </>
-          ) : null}
-          {tx.memo ? (
-            <li>
-              <label>Memo:</label>
-              <div>{tx.memo}</div>
-            </li>
-          ) : null}
+            ) : null}
+          </StackableContainer>
         </>
       </ul>
       <style jsx>{`
-        ul {
+        .meta-data {
           list-style: none;
           padding: 0;
           margin: 0;
+          margin-top: 25px;
         }
         .meta-data li {
           margin-top: 10px;
@@ -80,7 +83,7 @@ const TransactionInfo = ({ tx }: Props) => {
           display: block;
         }
       `}</style>
-    </StackableContainer>
+    </>
   );
 };