minor UI changes

Web3Auth · Oct 23, 2024 · 5f2e6c9 · 5f2e6c9
1 parent 3de8f5a
commit 5f2e6c9
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 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
@@ -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
@@ -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">