From 5f2e6c9161dc75c0ade8bf5b3856d07804d38ecf Mon Sep 17 00:00:00 2001
From: Mohammad Shahbaz Alam <shahbaz17@users.noreply.github.com>
Date: Wed, 23 Oct 2024 13:25:56 +0530
Subject: [PATCH] minor UI changes

---
 .../mpc-core-kit-bitcoin/src/App.css          | 16 ++++++++++
 .../src/BitcoinComponent.tsx                  | 29 ++++++++-----------
 2 files changed, 28 insertions(+), 17 deletions(-)

diff --git a/mpc-core-kit-web/mpc-core-kit-bitcoin/src/App.css b/mpc-core-kit-web/mpc-core-kit-bitcoin/src/App.css
index 4010bda9..30de5b3c 100644
--- a/mpc-core-kit-web/mpc-core-kit-bitcoin/src/App.css
+++ b/mpc-core-kit-web/mpc-core-kit-bitcoin/src/App.css
@@ -255,3 +255,19 @@
 	padding: 10px;
 	border-radius: 5px;
 }
+
+.input-field {
+	margin-right: 10px;
+	margin-bottom: 10px;
+	padding: 8px;
+	border: 1px solid #ccc;
+	border-radius: 4px;
+	font-size: 14px;
+	width: calc(33.33% - 10px); /* Adjust based on your layout needs */
+}
+
+.flex-container {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 10px;
+}
diff --git a/mpc-core-kit-web/mpc-core-kit-bitcoin/src/BitcoinComponent.tsx b/mpc-core-kit-web/mpc-core-kit-bitcoin/src/BitcoinComponent.tsx
index 1842112b..da0505ba 100644
--- a/mpc-core-kit-web/mpc-core-kit-bitcoin/src/BitcoinComponent.tsx
+++ b/mpc-core-kit-web/mpc-core-kit-bitcoin/src/BitcoinComponent.tsx
@@ -315,29 +315,24 @@ export const BitcoinComponent = (props: BitcoinComponentParams) => {
         <input
           value={receiverAddr as string}
           onChange={(e) => setReceiverAddr(e.target.value)}
-          placeholder="set Receiver Address"
-          style={{ marginRight: "10px" }}
+          placeholder="Receiver Address"
+          className="input-field"
         />
-        <input
-          value={amount as string}
-          onChange={(e) => setAmount(e.target.value)}
-          placeholder="set Receiver Amount"
-          style={{ marginRight: "10px" }}
-        />
-        <input value={minerFee as string} onChange={(e) => setMinerFee(e.target.value)} placeholder="set Miner Fee" style={{ marginRight: "10px" }} />
+        <input value={amount as string} onChange={(e) => setAmount(e.target.value)} placeholder="Amount (BTC)" className="input-field" />
+        <input value={minerFee as string} onChange={(e) => setMinerFee(e.target.value)} placeholder="Miner Fee (BTC)" className="input-field" />
         <input
           value={latestBalance as string}
           onChange={(e) => setLatestBalance(e.target.value)}
-          placeholder="set latest balance"
-          style={{ marginRight: "10px" }}
+          placeholder="Latest Balance (BTC)"
+          className="input-field"
         />
+        <input value={bitcoinUTXID as string} onChange={(e) => setBitcoinUTXID(e.target.value)} placeholder="UTXID" className="input-field" />
         <input
-          value={bitcoinUTXID as string}
-          onChange={(e) => setBitcoinUTXID(e.target.value)}
-          placeholder="set UTXID here"
-          style={{ marginRight: "10px" }}
+          value={fundingTxIndex as string}
+          onChange={(e) => setFundingTxIndex(e.target.value)}
+          placeholder="Funding Tx Index"
+          className="input-field"
         />
-        <input value={fundingTxIndex as string} onChange={(e) => setFundingTxIndex(e.target.value)} placeholder="FundingTxIndex (often 0)" />
       </div>
       <div className="flex-container">
         <button onClick={() => signTransaction()} className="card">
@@ -363,7 +358,7 @@ export const BitcoinComponent = (props: BitcoinComponentParams) => {
 
       <div className="flex-container">
         <button onClick={showAddress} className="card">
-          Show Address
+          Show BitcoinAddress
         </button>
 
         <button onClick={() => signTransaction(true)} className="card">