From e571df6371fd3f9520ce2e0db5f5cfb431ac6553 Mon Sep 17 00:00:00 2001
From: Jaco Greeff <jacogr@gmail.com>
Date: Sat, 9 May 2020 09:28:47 +0200
Subject: [PATCH] Adjust all council modals with columns (#2714)

---
 .../src/Motions/ProposeExternal.tsx           | 45 ++++++++----
 .../src/Motions/ProposeMotion.tsx             | 70 +++++++++++++------
 .../page-council/src/Motions/Slashing.tsx     | 65 ++++++++++-------
 packages/page-council/src/Motions/Voting.tsx  | 47 +++++++++----
 4 files changed, 151 insertions(+), 76 deletions(-)

diff --git a/packages/page-council/src/Motions/ProposeExternal.tsx b/packages/page-council/src/Motions/ProposeExternal.tsx
index 7e4d4f179c..5b95699268 100644
--- a/packages/page-council/src/Motions/ProposeExternal.tsx
+++ b/packages/page-council/src/Motions/ProposeExternal.tsx
@@ -51,23 +51,38 @@ function ProposeExternal ({ className, isMember, members }: Props): React.ReactE
         <Modal
           className={className}
           header={t('Propose external (majority)')}
+          size='large'
         >
           <Modal.Content>
-            <InputAddress
-              filter={members}
-              help={t('Select the account you wish to make the proposal with.')}
-              label={t('propose from account')}
-              onChange={setAcountId}
-              type='account'
-              withLabel
-            />
-            <Input
-              autoFocus
-              help={t('The preimage hash of the proposal')}
-              label={t('preimage hash')}
-              onChange={_onChangeHash}
-              value={hash}
-            />
+            <Modal.Columns>
+              <Modal.Column>
+                <InputAddress
+                  filter={members}
+                  help={t('Select the account you wish to make the proposal with.')}
+                  label={t('propose from account')}
+                  onChange={setAcountId}
+                  type='account'
+                  withLabel
+                />
+              </Modal.Column>
+              <Modal.Column>
+                <p>{t('The council account for the proposal. The selection is filtered by the current members.')}</p>
+              </Modal.Column>
+            </Modal.Columns>
+            <Modal.Columns>
+              <Modal.Column>
+                <Input
+                  autoFocus
+                  help={t('The preimage hash of the proposal')}
+                  label={t('preimage hash')}
+                  onChange={_onChangeHash}
+                  value={hash}
+                />
+              </Modal.Column>
+              <Modal.Column>
+                <p>{t('The hash of the proposal image, either already submitted or valid for the specific call.')}</p>
+              </Modal.Column>
+            </Modal.Columns>
           </Modal.Content>
           <Modal.Actions onCancel={toggleVisible}>
             <TxButton
diff --git a/packages/page-council/src/Motions/ProposeMotion.tsx b/packages/page-council/src/Motions/ProposeMotion.tsx
index 0882cd97b8..4c6356dc3b 100644
--- a/packages/page-council/src/Motions/ProposeMotion.tsx
+++ b/packages/page-council/src/Motions/ProposeMotion.tsx
@@ -58,30 +58,54 @@ function Propose ({ isMember, members }: Props): React.ReactElement<Props> {
         onClick={toggleOpen}
       />
       {isOpen && (
-        <Modal header={t('Propose a council motion')}>
+        <Modal
+          header={t('Propose a council motion')}
+          size='large'
+        >
           <Modal.Content>
-            <InputAddress
-              filter={members}
-              help={t('Select the account you wish to make the proposal with.')}
-              label={t('propose from account')}
-              onChange={setAcountId}
-              type='account'
-              withLabel
-            />
-            <InputNumber
-              className='medium'
-              help={t('The minimum number of council votes required to approve this motion')}
-              isError={!threshold || threshold.eqn(0) || threshold.gtn(members.length)}
-              label={t('threshold')}
-              onChange={_setThreshold}
-              placeholder={t('Positive number between 1 and {{memberCount}}', { replace: { memberCount: members.length } })}
-              value={threshold || new BN(0)}
-            />
-            <Extrinsic
-              defaultValue={apiDefaultTxSudo}
-              label={t('proposal')}
-              onChange={_setMethod}
-            />
+            <Modal.Columns>
+              <Modal.Column>
+                <InputAddress
+                  filter={members}
+                  help={t('Select the account you wish to make the proposal with.')}
+                  label={t('propose from account')}
+                  onChange={setAcountId}
+                  type='account'
+                  withLabel
+                />
+              </Modal.Column>
+              <Modal.Column>
+                <p>{t('The council account for the proposal. The selection is filtered by the current members.')}</p>
+              </Modal.Column>
+            </Modal.Columns>
+            <Modal.Columns>
+              <Modal.Column>
+                <InputNumber
+                  className='medium'
+                  help={t('The minimum number of council votes required to approve this motion')}
+                  isError={!threshold || threshold.eqn(0) || threshold.gtn(members.length)}
+                  label={t('threshold')}
+                  onChange={_setThreshold}
+                  placeholder={t('Positive number between 1 and {{memberCount}}', { replace: { memberCount: members.length } })}
+                  value={threshold || new BN(0)}
+                />
+              </Modal.Column>
+              <Modal.Column>
+                <p>{t('The desired threshold. Here set to a default of 50%+1, as applicable for general proposals.')}</p>
+              </Modal.Column>
+            </Modal.Columns>
+            <Modal.Columns>
+              <Modal.Column>
+                <Extrinsic
+                  defaultValue={apiDefaultTxSudo}
+                  label={t('proposal')}
+                  onChange={_setMethod}
+                />
+              </Modal.Column>
+              <Modal.Column>
+                <p>{t('The actual proposal to make, based on the selected call and parameters thereof.')}</p>
+              </Modal.Column>
+            </Modal.Columns>
           </Modal.Content>
           <Modal.Actions onCancel={toggleOpen}>
             <TxButton
diff --git a/packages/page-council/src/Motions/Slashing.tsx b/packages/page-council/src/Motions/Slashing.tsx
index 9c24a72806..a094b8418f 100644
--- a/packages/page-council/src/Motions/Slashing.tsx
+++ b/packages/page-council/src/Motions/Slashing.tsx
@@ -69,34 +69,49 @@ function Slashing ({ className, isMember, members }: Props): React.ReactElement<
         <Modal
           className={className}
           header={t('Revert pending slashes')}
+          size='large'
         >
           <Modal.Content>
-            <InputAddress
-              filter={members}
-              help={t('Select the account you wish to make the proposal with.')}
-              label={t('propose from account')}
-              onChange={setAcountId}
-              type='account'
-              withLabel
-            />
-            {eras.length
-              ? (
-                <Dropdown
-                  defaultValue={eras[0].value}
-                  help={t('The unapplied slashed era to cancel.')}
-                  label={t('the era to cancel for')}
-                  onChange={setSelectedEra}
-                  options={eras}
+            <Modal.Columns>
+              <Modal.Column>
+                <InputAddress
+                  filter={members}
+                  help={t('Select the account you wish to make the proposal with.')}
+                  label={t('propose from account')}
+                  onChange={setAcountId}
+                  type='account'
+                  withLabel
                 />
-              )
-              : (
-                <Input
-                  isDisabled
-                  label={t('the era to cancel for')}
-                  value={t('no unapplied slashes found')}
-                />
-              )
-            }
+              </Modal.Column>
+              <Modal.Column>
+                <p>{t('The council account for the proposal. The selection is filtered by the current members.')}</p>
+              </Modal.Column>
+            </Modal.Columns>
+            <Modal.Columns>
+              <Modal.Column>
+                {eras.length
+                  ? (
+                    <Dropdown
+                      defaultValue={eras[0].value}
+                      help={t('The unapplied slashed era to cancel.')}
+                      label={t('the era to cancel for')}
+                      onChange={setSelectedEra}
+                      options={eras}
+                    />
+                  )
+                  : (
+                    <Input
+                      isDisabled
+                      label={t('the era to cancel for')}
+                      value={t('no unapplied slashes found')}
+                    />
+                  )
+                }
+              </Modal.Column>
+              <Modal.Column>
+                <p>{t('The specific eras on which there are unapplied slashes. For each era a separate proposal is to be made.')}</p>
+              </Modal.Column>
+            </Modal.Columns>
           </Modal.Content>
           <Modal.Actions onCancel={toggleVisible}>
             <TxButton
diff --git a/packages/page-council/src/Motions/Voting.tsx b/packages/page-council/src/Motions/Voting.tsx
index 63ef6b7c5f..4ed94f0ac8 100644
--- a/packages/page-council/src/Motions/Voting.tsx
+++ b/packages/page-council/src/Motions/Voting.tsx
@@ -47,21 +47,42 @@ function Voting ({ hash, idNumber, isDisabled, members, prime, proposal }: Props
       {isVotingOpen && (
         <Modal
           header={t('Vote on proposal')}
-          size='small'
+          size='large'
         >
           <Modal.Content>
-            <ProposedAction
-              idNumber={idNumber}
-              proposal={proposal}
-            />
-            <VoteAccount
-              filter={members}
-              onChange={setAccountId}
-            />
-            <VoteToggle
-              onChange={_onChangeVote}
-              value={voteValue}
-            />
+            <Modal.Columns>
+              <Modal.Column>
+                <ProposedAction
+                  idNumber={idNumber}
+                  proposal={proposal}
+                />
+              </Modal.Column>
+              <Modal.Column>
+                <p>{t('The proposal that is being voted on. It will pass when the threshold is reached.')}</p>
+              </Modal.Column>
+            </Modal.Columns>
+            <Modal.Columns>
+              <Modal.Column>
+                <VoteAccount
+                  filter={members}
+                  onChange={setAccountId}
+                />
+              </Modal.Column>
+              <Modal.Column>
+                <p>{t('The council account for this vote. The selection is filtered by the current members.')}</p>
+              </Modal.Column>
+            </Modal.Columns>
+            <Modal.Columns>
+              <Modal.Column>
+                <VoteToggle
+                  onChange={_onChangeVote}
+                  value={voteValue}
+                />
+              </Modal.Column>
+              <Modal.Column>
+                <p>{t('The vote to record for this proposal, either for or against.')}</p>
+              </Modal.Column>
+            </Modal.Columns>
             {isPrime && (
               <article className='warning'>
                 <div><Icon name='warning sign' />{t('You are voting with this collective\'s prime account. The vote will be the default outcome in case of any abstentions.')}</div>