Add labels to inputs

riccardobl · Jan 6, 2024 · 0a80d48 · 0a80d48
1 parent 6d23a0d
commit 0a80d48
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 29 deletions.
diff --git a/src/js/ui/stages/ReceiveStage.js b/src/js/ui/stages/ReceiveStage.js
@@ -41,25 +41,17 @@ export default class ReceiveStage extends UIStage {
         const assetSelector = $inputSelect(rightCnt, "Select Asset");
 
         const invoiceQr = $hlist(leftCnt);
-        $title(rightCnt).setValue("Address");
 
         const invoiceTx = Html.$inputText(rightCnt).setEditable(false);
-
+        $text(invoiceTx, ["sub"]).setValue("Address:").setPriority(-1);
         $icon(invoiceTx)
             .setAction(() => {
                 navigator.clipboard.writeText(invoiceTx.getValue());
                 ui.info("Copied to clipboard");
             })
             .setValue("content_copy");
 
-        $title(rightCnt).setValue("Amount");
-        const amountPrimaryEl = $inputNumber(rightCnt).grow(50).setPlaceHolder("0.00");
-        const tickerEl = $text(amountPrimaryEl).setValue(ASSET_INFO.ticker);
-
-        const amountSecondaryEl = Html.$inputNumber(rightCnt).grow(50).setPlaceHolder("0.00");
-        const tickerEl2 = $text(amountSecondaryEl).setValue(SECONDARY_INFO.ticker);
-
-        $text(leftCnt, ["warning"]).setValue(
+        $text(rightCnt, ["warning"]).setValue(
             `
         <span>
         Please ensure that the sender is on the <b>${await lq.getNetworkName()}</b> network.
@@ -68,6 +60,17 @@ export default class ReceiveStage extends UIStage {
             true,
         );
 
+        // $title(rightCnt).setValue("Amount");
+        const amountPrimaryEl = $inputNumber(rightCnt).grow(50).setPlaceHolder("0.00");
+        $text(amountPrimaryEl, ["sub"]).setValue("Amount:").setPriority(-1);
+
+        const tickerEl = $text(amountPrimaryEl).setValue(ASSET_INFO.ticker);
+
+        const amountSecondaryEl = Html.$inputNumber(rightCnt).grow(50).setPlaceHolder("0.00");
+        $text(amountSecondaryEl, ["sub"]).setValue("Amount:").setPriority(-1);
+
+        const tickerEl2 = $text(amountSecondaryEl).setValue(SECONDARY_INFO.ticker);
+
         const _updateInvoice = async () => {
             if (!ASSET_HASH || !ASSET_INFO) return; // if unset do nothing
             const { addr, qr } = await lq.receive(INPUT_AMOUNT, ASSET_HASH); // create invoice

diff --git a/src/js/ui/stages/SendStage.js b/src/js/ui/stages/SendStage.js
@@ -48,16 +48,7 @@ export default class SendStage extends UIStage {
         const parentCnt = $vlist(walletEl).fill().makeScrollable();
 
         const assetInputEl = $inputSelect(parentCnt, "Select Asset");
-
-        const midCnt = $list(parentCnt, ["p$v", "l$h"]).fill().setAlign("top");
-        const midleftCnt = $vlist(midCnt, []).makeScrollable().fill();
-        const midrightCnt = $vlist(midCnt, []).makeScrollable().fill();
-
-        $title(midrightCnt).setValue("To");
-
-        const addrEl = $inputText(midrightCnt).setPlaceHolder("Address");
-
-        $text(midrightCnt, ["warning"]).setValue(
+        $text(parentCnt, ["warning"]).setValue(
             `
         <span>
         Please ensure that the receiver address is on the <b>${await lq.getNetworkName()}</b> network. 
@@ -66,6 +57,13 @@ export default class SendStage extends UIStage {
             true,
         );
 
+        const midCnt = $list(parentCnt, ["p$v", "l$h"]).fill().setAlign("top");
+        const midleftCnt = $vlist(midCnt, []).makeScrollable().fill();
+        const midrightCnt = $vlist(midCnt, []).makeScrollable().fill();
+
+        const addrEl = $inputText(midrightCnt).setPlaceHolder("Address");
+        $text(addrEl, ["sub"]).setValue("To:").setPriority(-1);
+
         $icon(addrEl)
             .setValue("qr_code_scanner")
             .setAction(async () => {
@@ -140,12 +138,13 @@ export default class SendStage extends UIStage {
                 addrEl.setValue(text);
             });
 
-        $title(midleftCnt).setValue("Amount");
-
         const amountNativeEl = $inputNumber(midleftCnt).setPlaceHolder("0.00");
+        $text(amountNativeEl, ["sub"]).setValue("Amount:").setPriority(-1);
+
         const ticker1El = $text(amountNativeEl);
 
         const amountSecondaryEl = $inputNumber(midleftCnt).setPlaceHolder("0.00");
+        $text(amountSecondaryEl, ["sub"]).setValue("Amount:").setPriority(-1);
         const ticker2El = $text(amountSecondaryEl);
 
         const availableBalanceDataEl = $vlist(midleftCnt, ["sub"]).fill();
@@ -160,12 +159,11 @@ export default class SendStage extends UIStage {
 
         const useAllEl = $button(availableBalanceEl, ["small"]).setValue("SEND ALL");
 
-        $title(parentCnt).setValue("Fee");
-        const prioritySlideEl = $inputSlide(parentCnt);
-        prioritySlideEl.setLabel(0, "Low (slow)");
-        prioritySlideEl.setLabel(0.5, "Medium");
-        prioritySlideEl.setLabel(1, "High (fast)");
-        const feeDataEl = $vlist(parentCnt, []).fill();
+        const prioritySlideEl = $inputSlide(midrightCnt);
+        prioritySlideEl.setLabel(0, "Low fee (slow)");
+        prioritySlideEl.setLabel(0.5, "Medium fee");
+        prioritySlideEl.setLabel(1, "High fee (fast)");
+        const feeDataEl = $vlist(midrightCnt, []).fill();
 
         const feeRowEl = $hlist(feeDataEl, ["sub"]).setAlign("center-right");
         $hsep(feeRowEl).grow(100);

diff --git a/src/less/stages/receive.less b/src/less/stages/receive.less
@@ -11,7 +11,6 @@
     width: 100%;
     max-width: 100%;
     margin: auto;
-    margin-top: 2rem;
     flex-shrink: 1;
 }