From 05a60dc49094b1d0f2e5b81393b827e3049b6656 Mon Sep 17 00:00:00 2001
From: abefernan <44572727+abefernan@users.noreply.github.com>
Date: Fri, 28 Jul 2023 19:27:11 +0200
Subject: [PATCH 1/2] Add h-padding. Add hover-focus style

---
 components/inputs/Button.tsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/components/inputs/Button.tsx b/components/inputs/Button.tsx
index 0bf2e7d0..b3903e6e 100644
--- a/components/inputs/Button.tsx
+++ b/components/inputs/Button.tsx
@@ -38,7 +38,7 @@ const Button = (props: Props) => (
         border-radius: 10px;
         background: rgba(255, 255, 255, 0.15);
         border: none;
-        padding: 12px 0;
+        padding: 12px;
         font-size: 1rem;
         color: white;
         font-style: italic;
@@ -49,7 +49,10 @@ const Button = (props: Props) => (
       .primary {
         border: 2px solid white;
       }
-
+      button:hover,
+      button:focus {
+        outline: 1px solid white;
+      }
       button:first-child {
         margin-top: 0;
       }

From 7626f5d08fde83a8fe862cff5850073ccc5643bb Mon Sep 17 00:00:00 2001
From: abefernan <44572727+abefernan@users.noreply.github.com>
Date: Fri, 28 Jul 2023 19:27:26 +0200
Subject: [PATCH 2/2] New layout for buttons

---
 components/forms/CreateTxForm/index.tsx | 145 ++++++++++++++++++------
 1 file changed, 113 insertions(+), 32 deletions(-)

diff --git a/components/forms/CreateTxForm/index.tsx b/components/forms/CreateTxForm/index.tsx
index dd4b315f..0b84234a 100644
--- a/components/forms/CreateTxForm/index.tsx
+++ b/components/forms/CreateTxForm/index.tsx
@@ -152,38 +152,90 @@ const CreateTxForm = ({ router, senderAddress, accountOnChain }: CreateTxFormPro
           onChange={({ target }) => setMemo(target.value)}
         />
       </div>
-      <StackableContainer>
-        <Button label="Add MsgSend" onClick={() => addMsgType(MsgTypeUrls.Send)} />
-        <Button label="Add MsgDelegate" onClick={() => addMsgType(MsgTypeUrls.Delegate)} />
-        <Button label="Add MsgUndelegate" onClick={() => addMsgType(MsgTypeUrls.Undelegate)} />
-        <Button
-          label="Add MsgBeginRedelegate"
-          onClick={() => addMsgType(MsgTypeUrls.BeginRedelegate)}
-        />
-        <Button
-          label="Add MsgWithdrawDelegatorReward"
-          onClick={() => addMsgType(MsgTypeUrls.WithdrawDelegatorReward)}
-        />
-        <Button
-          label="Add MsgSetWithdrawAddress"
-          onClick={() => addMsgType(MsgTypeUrls.SetWithdrawAddress)}
-        />
-        <Button
-          label="Add MsgCreateVestingAccount"
-          onClick={() => addMsgType(MsgTypeUrls.CreateVestingAccount)}
-        />
-        <Button label="Add MsgTransfer" onClick={() => addMsgType(MsgTypeUrls.Transfer)} />
-        <Button label="Add MsgExecuteContract" onClick={() => addMsgType(MsgTypeUrls.Execute)} />
-        <Button
-          label="Add MsgInstantiateContract"
-          onClick={() => addMsgType(MsgTypeUrls.Instantiate)}
-        />
-        <Button
-          label="Add MsgInstantiateContract2"
-          onClick={() => addMsgType(MsgTypeUrls.Instantiate2)}
-        />
-        <Button label="Add MsgMigrateContract" onClick={() => addMsgType(MsgTypeUrls.Migrate)} />
-      </StackableContainer>
+      <h4>Add New Msg</h4>
+      <div className="btn-cluster-grid">
+        <div className="btn-cluster">
+          <label>Bank</label>
+          <ul>
+            <li>
+              <Button label="Send" onClick={() => addMsgType(MsgTypeUrls.Send)} />
+            </li>
+          </ul>
+        </div>
+        <div className="btn-cluster">
+          <label>IBC</label>
+          <ul>
+            <li>
+              <Button label="Transfer" onClick={() => addMsgType(MsgTypeUrls.Transfer)} />
+            </li>
+          </ul>
+        </div>
+        <div className="btn-cluster">
+          <label>Vesting</label>
+          <ul>
+            <li>
+              <Button
+                label="CreateVestingAccount"
+                onClick={() => addMsgType(MsgTypeUrls.CreateVestingAccount)}
+              />
+            </li>
+          </ul>
+        </div>
+        <div className="btn-cluster">
+          <label>Staking</label>
+          <ul>
+            <li>
+              <Button label="Delegate" onClick={() => addMsgType(MsgTypeUrls.Delegate)} />
+            </li>
+            <li>
+              <Button label="Undelegate" onClick={() => addMsgType(MsgTypeUrls.Undelegate)} />
+            </li>
+            <li>
+              <Button
+                label="BeginRedelegate"
+                onClick={() => addMsgType(MsgTypeUrls.BeginRedelegate)}
+              />
+            </li>
+          </ul>
+          <ul>
+            <li>
+              <Button
+                label="WithdrawDelegatorReward"
+                onClick={() => addMsgType(MsgTypeUrls.WithdrawDelegatorReward)}
+              />
+            </li>
+            <li>
+              <Button
+                label="SetWithdrawAddress"
+                onClick={() => addMsgType(MsgTypeUrls.SetWithdrawAddress)}
+              />
+            </li>
+          </ul>
+        </div>
+        <div className="btn-cluster">
+          <label>CosmWasm</label>
+          <ul>
+            <li>
+              <Button
+                label="InstantiateContract"
+                onClick={() => addMsgType(MsgTypeUrls.Instantiate)}
+              />
+            </li>
+            <li>
+              <Button
+                label="InstantiateContract2"
+                onClick={() => addMsgType(MsgTypeUrls.Instantiate2)}
+              />
+            </li>
+            <li>
+              <Button label="ExecuteContract" onClick={() => addMsgType(MsgTypeUrls.Execute)} />
+            </li>
+            <li>
+              <Button label="MigrateContract" onClick={() => addMsgType(MsgTypeUrls.Migrate)} />
+            </li>
+          </ul>
+        </div>
+      </div>
       {showCreateTxError ? (
         <StackableContainer lessMargin lessPadding>
           <p className="multisig-error">
@@ -215,6 +267,35 @@ const CreateTxForm = ({ router, senderAddress, accountOnChain }: CreateTxFormPro
           font-size: 16px;
           text-align: center;
         }
+        .btn-cluster-grid {
+          display: flex;
+          flex-wrap: wrap;
+          gap: 0.5rem;
+          justify-content: flex-start;
+          align-items: center;
+        }
+        .btn-cluster {
+          padding: 0.5rem;
+          background: rgba(255, 255, 255, 0.05);
+          border-radius: 10px;
+          display: flex;
+          flex-direction: column;
+          gap: 0.5rem;
+        }
+        .btn-cluster label {
+          text-decoration: underline;
+        }
+        .btn-cluster ul {
+          list-style: none;
+          margin: 0;
+          padding: 0;
+
+          display: flex;
+          flex-wrap: wrap;
+          gap: 0.5rem;
+          justify-content: flex-start;
+          align-items: center;
+        }
       `}</style>
     </StackableContainer>
   );