From 9d6f8cde0e1407d89dc75d8258904bc1a88d6849 Mon Sep 17 00:00:00 2001
From: Hendrik Hofstadt <hendrik@nexantic.com>
Date: Thu, 20 Aug 2020 18:59:58 +0200
Subject: [PATCH] Layout cleanup

---
 web/src/pages/Transfer.tsx       | 12 ++++++------
 web/src/pages/TransferSolana.tsx | 11 ++++++-----
 2 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/web/src/pages/Transfer.tsx b/web/src/pages/Transfer.tsx
index 7b9a5f963..c1410072b 100644
--- a/web/src/pages/Transfer.tsx
+++ b/web/src/pages/Transfer.tsx
@@ -189,15 +189,15 @@ function Transfer() {
                         } else {
                             approveAssets(values["address"], transferAmount)
                         }
-                    }} style={{width: "100%"}} ref={formRef}>
-                        <Form.Item name="address" validateStatus={addressValid ? "success" : "error"}>
+                    }} style={{width: "100%"}} ref={formRef} layout={"vertical"}>
+                        <Form.Item name="address" validateStatus={addressValid ? "success" : "error"} label={"Token:"}>
                             <Input addonAfter={`Balance: ${coinInfo.balance}`} name="address"
                                    placeholder={"ERC20 address"}
                                    onBlur={(v) => {
                                        setAddress(v.target.value)
                                    }}/>
                         </Form.Item>
-                        <Form.Item name="amount" validateStatus={amountValid ? "success" : "error"}>
+                        <Form.Item name="amount" validateStatus={amountValid ? "success" : "error"} label={"Amount:"}>
                             <InputNumber name={"amount"} placeholder={"Amount"} type={"number"} min={0}
                                          onChange={value => {
                                              // @ts-ignore
@@ -205,7 +205,7 @@ function Transfer() {
                                          }}/>
                         </Form.Item>
                         <Form.Item name="target_chain"
-                                   rules={[{required: true, message: "Please choose a target chain"}]}>
+                                   label={"Target Chain:"}>
                             <Select placeholder="Target Chain" defaultValue={1}>
                                 <Select.Option value={1}>
                                     Solana
@@ -213,14 +213,14 @@ function Transfer() {
                             </Select>
                         </Form.Item>
                         <Form.Item name="recipient" validateStatus={solanaAccount.valid ? "success" : "error"}
-                                   help={recipient === "" ? undefined : solanaAccount.message}>
+                                   help={recipient === "" ? undefined : solanaAccount.message} label={"Recipient"}>
                             <Input name="recipient" placeholder={"Address of the recipient"}
                                    onFocus={(v) => {
                                        setRecipient(v.target.value)
                                    }}/>
                         </Form.Item>
                         <Form.Item>
-                            <Button type="primary" htmlType="submit">
+                            <Button type="primary" htmlType="submit" style={{marginLeft:"auto"}}>
                                 {coinInfo.allowance.gte(amount) || coinInfo.isWrapped ? "Transfer" : "Approve"}
                             </Button>
                         </Form.Item>
diff --git a/web/src/pages/TransferSolana.tsx b/web/src/pages/TransferSolana.tsx
index 0703b1379..79d8fbefb 100644
--- a/web/src/pages/TransferSolana.tsx
+++ b/web/src/pages/TransferSolana.tsx
@@ -91,8 +91,8 @@ function TransferSolana() {
                             }
                         }
                         send()
-                    }}>
-                        <Form.Item name="address" validateStatus={addressValid ? "success" : "error"}>
+                    }} layout={"vertical"} >
+                        <Form.Item name="address" validateStatus={addressValid ? "success" : "error"} label={"Token Account:"}>
                             <Input
                                 addonAfter={`Balance: ${coinInfo.balance.div(new BigNumber(Math.pow(10, coinInfo.decimals)))}`}
                                 name="address"
@@ -106,14 +106,15 @@ function TransferSolana() {
                                 let big = new BigNumber(value).mul(new BigNumber(10).pow(coinInfo.decimals));
                                 callback(big.lte(coinInfo.balance) ? undefined : "Amount exceeds balance")
                             }
-                        }]}>
+                        }]} label={"Amount:"}>
                             <InputNumber name={"amount"} placeholder={"Amount"} type={"number"} onChange={value => {
                                 // @ts-ignore
                                 setAmount(value || 0)
                             }}/>
                         </Form.Item>
                         <Form.Item name="target_chain"
-                                   rules={[{required: true, message: "Please choose a target chain"}]}>
+                                   rules={[{required: true, message: "Please choose a target chain"}]}
+                                   label={"Target Chain:"}>
                             <Select placeholder="Target Chain" defaultValue={2}>
                                 <Select.Option value={2}>
                                     Ethereum
@@ -129,7 +130,7 @@ function TransferSolana() {
                                     callback()
                                 }
                             }
-                        }]}>
+                        }]} label={"Recipient:"}>
                             <Input name="recipient" placeholder={"Address of the recipient"}/>
                         </Form.Item>
                         <Form.Item>