From 98cec17f6dfbaea7bc2be73e1d3e98f4c1cc7f01 Mon Sep 17 00:00:00 2001
From: Ewa Kowalska <30404388+ekowalsk@users.noreply.github.com>
Date: Mon, 21 Dec 2020 19:29:55 +0100
Subject: [PATCH] Add second column to bounty add modal (#4259)

---
 packages/page-bounties/src/BountyCreate.tsx | 76 +++++++++++++--------
 1 file changed, 49 insertions(+), 27 deletions(-)

diff --git a/packages/page-bounties/src/BountyCreate.tsx b/packages/page-bounties/src/BountyCreate.tsx
index 8524b3f886..08bbe23318 100644
--- a/packages/page-bounties/src/BountyCreate.tsx
+++ b/packages/page-bounties/src/BountyCreate.tsx
@@ -47,33 +47,55 @@ function BountyCreate () {
           header={t<string>('Add Bounty')}
         >
           <Modal.Content>
-            <Input
-              autoFocus
-              help={t<string>('The description of this bounty')}
-              label={t<string>('bounty title')}
-              onChange={onTitleChange}
-              value={title}
-            />
-            <InputBalance
-              help={t<string>('The total payment amount of this bounty, curators fee included.')}
-              isZeroable
-              label={t<string>('bounty requested allocation')}
-              onChange={setAmount}
-              value={ amount }
-            />
-            <InputBalance
-              defaultValue={bond.toString()}
-              help={t<string>('This amount will be reserved from origin account and returned on approval or slashed upon rejection.')}
-              isDisabled
-              label={t<string>('bounty bond')}
-            />
-            <InputAddress
-              help={t<string>('Select the account you wish to propose the bounty from.')}
-              label={t<string>('submit with account')}
-              onChange={setAccountId}
-              type='account'
-              withLabel
-            />
+            <Modal.Columns>
+              <Modal.Column>
+                <Input
+                  autoFocus
+                  help={t<string>('The description of this bounty')}
+                  label={t<string>('bounty title')}
+                  onChange={onTitleChange}
+                  value={title}
+                />
+              </Modal.Column>
+            </Modal.Columns>
+            <Modal.Columns>
+              <Modal.Column>
+                <InputBalance
+                  help={t<string>('The total payment amount of this bounty, curators fee included.')}
+                  isZeroable
+                  label={t<string>('bounty requested allocation')}
+                  onChange={setAmount}
+                  value={amount}
+                />
+              </Modal.Column>
+            </Modal.Columns>
+            <Modal.Columns>
+              <Modal.Column>
+                <InputBalance
+                  defaultValue={bond.toString()}
+                  help={t<string>('This amount will be reserved from origin account and returned on approval or slashed upon rejection.')}
+                  isDisabled
+                  label={t<string>('bounty bond')}
+                />
+              </Modal.Column>
+              <Modal.Column>
+                <p>{t<string>('Bond is estimated based on bountyDepositBase and dataDepositPerByte constants.')}</p>
+              </Modal.Column>
+            </Modal.Columns>
+            <Modal.Columns>
+              <Modal.Column>
+                <InputAddress
+                  help={t<string>('Select the account you wish to propose the bounty from.')}
+                  label={t<string>('submit with account')}
+                  onChange={setAccountId}
+                  type='account'
+                  withLabel
+                />
+              </Modal.Column>
+              <Modal.Column>
+                <p>{t<string>('Use this account to propose bounty from. This can be a normal or council account.')}</p>
+              </Modal.Column>
+            </Modal.Columns>
           </Modal.Content>
           <Modal.Actions onCancel={toggleIsOpen}>
             <TxButton