From aa928f10b40f8ef73be40f360b6208da9b54aef6 Mon Sep 17 00:00:00 2001
From: Gilles Barnier <gilles.barnier@gmail.com>
Date: Fri, 15 Apr 2022 07:00:40 +0200
Subject: [PATCH] Fix display issues on the democracy dashboard page (#7360)

* PR7304

* Update packages/page-democracy/src/Overview/ReferendumVote.tsx

Co-authored-by: Jegor Sidorenko <5252494+jsidorenko@users.noreply.github.com>

* Update packages/page-democracy/src/Overview/ReferendumVote.tsx

Co-authored-by: Jegor Sidorenko <5252494+jsidorenko@users.noreply.github.com>

* Update packages/page-democracy/src/Overview/Referendums.tsx

Co-authored-by: Jegor Sidorenko <5252494+jsidorenko@users.noreply.github.com>

* Update packages/page-democracy/src/Overview/Referendum.tsx

Co-authored-by: Jegor Sidorenko <5252494+jsidorenko@users.noreply.github.com>

* Update packages/page-democracy/src/Overview/Referendum.tsx

Co-authored-by: Jegor Sidorenko <5252494+jsidorenko@users.noreply.github.com>

* Update packages/page-democracy/src/Overview/Referendum.tsx

Co-authored-by: Jegor Sidorenko <5252494+jsidorenko@users.noreply.github.com>

* PR7304 after Jegor s comments

* aligned the donut in democracy and fixed the 100% bug on the pie chart

* - fixed the 100% issue with the donut
- fixed the remaining horizontal alignment
- removed the horizontal scrollbar in the votes table
- fixed the vertical alignment of the donut

* - added min and max height to the listed tables (referendum and proposal)
- added the same table listing as referendum to proposals

* Update packages/react-components/src/CallExpander.tsx

Co-authored-by: Jaco <jacogr@gmail.com>

* Update packages/react-components/src/Expander.tsx

Co-authored-by: Jaco <jacogr@gmail.com>

* Update packages/page-democracy/src/Overview/Proposal.tsx

Co-authored-by: Jaco <jacogr@gmail.com>

* Update packages/page-democracy/src/Overview/Proposal.tsx

Co-authored-by: Jaco <jacogr@gmail.com>

* Update packages/page-democracy/src/Overview/Proposals.tsx

Co-authored-by: Jaco <jacogr@gmail.com>

* Update packages/page-democracy/src/Overview/Proposals.tsx

Co-authored-by: Jaco <jacogr@gmail.com>

* Update packages/page-democracy/src/Overview/Referendum.tsx

Co-authored-by: Jaco <jacogr@gmail.com>

* Update packages/page-democracy/src/Overview/Referendums.tsx

Co-authored-by: Jaco <jacogr@gmail.com>

* Update packages/react-components/src/TxButton.tsx

Co-authored-by: Jaco <jacogr@gmail.com>

* Update packages/react-components/src/LinkExternal.tsx

Co-authored-by: Jaco <jacogr@gmail.com>

* Auto-lint fixes (after master merge)

* Use Progress component for democracy (#7376)

* Apply suggestions from code review

* Centering

Co-authored-by: Jegor Sidorenko <5252494+jsidorenko@users.noreply.github.com>
Co-authored-by: Jaco <jacogr@gmail.com>
---
 packages/page-council/src/Motions/Voting.tsx  |  4 +-
 packages/page-council/src/Overview/Vote.tsx   |  2 +-
 .../page-democracy/src/Overview/Proposal.tsx  | 40 ++++++++++++++-----
 .../page-democracy/src/Overview/Proposals.tsx |  1 +
 .../src/Overview/Referendum.tsx               | 20 ++++++----
 .../src/Overview/ReferendumVote.tsx           |  1 +
 .../src/Overview/ReferendumVotes.tsx          | 34 +++++++++++-----
 .../src/Overview/Referendums.tsx              |  1 +
 .../page-democracy/src/Overview/Seconding.tsx | 12 +++---
 .../page-democracy/src/Overview/Voting.tsx    |  2 +-
 packages/react-components/src/Progress.tsx    |  2 +-
 11 files changed, 80 insertions(+), 39 deletions(-)

diff --git a/packages/page-council/src/Motions/Voting.tsx b/packages/page-council/src/Motions/Voting.tsx
index 0105e25aa9..0fdf38ccc2 100644
--- a/packages/page-council/src/Motions/Voting.tsx
+++ b/packages/page-council/src/Motions/Voting.tsx
@@ -70,7 +70,7 @@ function Voting ({ hash, idNumber, isDisabled, members, prime, proposal }: Props
             />
             <TxButton
               accountId={accountId}
-              icon='check'
+              icon='check-to-slot'
               isDisabled={isDisabled}
               label={t<string>('Vote Aye')}
               onStart={toggleVoting}
@@ -81,7 +81,7 @@ function Voting ({ hash, idNumber, isDisabled, members, prime, proposal }: Props
         </Modal>
       )}
       <Button
-        icon='check'
+        icon='check-to-slot'
         isDisabled={isDisabled}
         label={t<string>('Vote')}
         onClick={toggleVoting}
diff --git a/packages/page-council/src/Overview/Vote.tsx b/packages/page-council/src/Overview/Vote.tsx
index f3e422128b..781b4626ec 100644
--- a/packages/page-council/src/Overview/Vote.tsx
+++ b/packages/page-council/src/Overview/Vote.tsx
@@ -72,7 +72,7 @@ function Vote ({ electionsInfo }: Props): React.ReactElement<Props> | null {
   return (
     <>
       <Button
-        icon='check'
+        icon='check-to-slot'
         isDisabled={available.length === 0}
         label={t<string>('Vote')}
         onClick={toggleVisible}
diff --git a/packages/page-democracy/src/Overview/Proposal.tsx b/packages/page-democracy/src/Overview/Proposal.tsx
index 3399207435..c13f7d5a7f 100644
--- a/packages/page-democracy/src/Overview/Proposal.tsx
+++ b/packages/page-democracy/src/Overview/Proposal.tsx
@@ -6,7 +6,7 @@ import type { DeriveProposal } from '@polkadot/api-derive/types';
 import React from 'react';
 import styled from 'styled-components';
 
-import { AddressMini, Button, Expander, LinkExternal } from '@polkadot/react-components';
+import { AddressMini, Button, Expander, LinkExternal, Table } from '@polkadot/react-components';
 import { FormatBalance } from '@polkadot/react-query';
 import { formatNumber } from '@polkadot/util';
 
@@ -39,16 +39,26 @@ function Proposal ({ className = '', value: { balance, image, imageHash, index,
       </td>
       <td className='expand'>
         {seconding.length !== 0 && (
-          <Expander summary={t<string>('Seconds ({{count}})', { replace: { count: seconding.length } })}>
-            {seconding.map((address, count): React.ReactNode => (
-              <AddressMini
-                className='identityIcon'
-                key={`${count}:${address.toHex()}`}
-                value={address}
-                withBalance={false}
-                withShrink
-              />
-            ))}
+          <Expander summary={t<string>('Endorsed ({{count}})', { replace: { count: seconding.length } })}>
+            <div className='endorsementsTable'>
+              <Table
+                empty={seconding && t<string>('No endorsements')}
+              >
+                <tr className='expand'>
+                  <td>
+                    {seconding.map((address, count): React.ReactNode => (
+                      <AddressMini
+                        className='identityIcon'
+                        key={`${count}:${address.toHex()}`}
+                        value={address}
+                        withBalance={false}
+                        withShrink
+                      />
+                    ))}
+                  </td>
+                </tr>
+              </Table>
+            </div>
           </Expander>
         )}
       </td>
@@ -86,4 +96,12 @@ export default React.memo(styled(Proposal)`
       margin-bottom: 4px;
     }
   }
+  
+  div.endorsementsTable {
+    overflow-y: scroll;
+    display: block;
+    min-height: 50px;
+    max-height: 200px;
+    overflow-x: hidden;
+  }
 `);
diff --git a/packages/page-democracy/src/Overview/Proposals.tsx b/packages/page-democracy/src/Overview/Proposals.tsx
index f76496bfe5..2c983f69d7 100644
--- a/packages/page-democracy/src/Overview/Proposals.tsx
+++ b/packages/page-democracy/src/Overview/Proposals.tsx
@@ -36,6 +36,7 @@ function Proposals ({ className }: Props): React.ReactElement<Props> {
     >
       {proposals?.map((proposal): React.ReactNode => (
         <ProposalDisplay
+          help={t<string>('launch period')}
           key={proposal.index.toString()}
           value={proposal}
         />
diff --git a/packages/page-democracy/src/Overview/Referendum.tsx b/packages/page-democracy/src/Overview/Referendum.tsx
index 9196fa5643..7478e01406 100644
--- a/packages/page-democracy/src/Overview/Referendum.tsx
+++ b/packages/page-democracy/src/Overview/Referendum.tsx
@@ -7,7 +7,7 @@ import type { Balance } from '@polkadot/types/interfaces';
 import React, { useMemo } from 'react';
 import styled from 'styled-components';
 
-import { Badge, Button, Icon, LinkExternal } from '@polkadot/react-components';
+import { Badge, Button, Icon, LinkExternal, Progress } from '@polkadot/react-components';
 import { useAccounts, useApi, useBestNumber, useCall } from '@polkadot/react-hooks';
 import { BlockToTime } from '@polkadot/react-query';
 import { BN, BN_ONE, formatNumber, isBoolean } from '@polkadot/util';
@@ -50,6 +50,7 @@ function Referendum ({ className = '', value: { allAye, allNay, image, imageHash
     () => status.threshold.type.toString().replace('majority', ' majority '),
     [status]
   );
+  const totalCalculated = votedAye.add(votedNay);
 
   const [percentages, { hasVoted, hasVotedAye }] = useMemo(
     (): [Percentages | null, VoteType] => {
@@ -106,9 +107,6 @@ function Referendum ({ className = '', value: { allAye, allNay, image, imageHash
         {percentages && (
           <>
             <div>{percentages.turnout}</div>
-            {percentages.aye && (
-              <div>{t<string>('{{percentage}} aye', { replace: { percentage: percentages.aye } })}</div>
-            )}
           </>
         )}
       </td>
@@ -143,6 +141,12 @@ function Referendum ({ className = '', value: { allAye, allNay, image, imageHash
           votes={allNay}
         />
       </td>
+      <td className='media--1000 middle chart'>
+        <Progress
+          total={totalCalculated}
+          value={votedAye}
+        />
+      </td>
       <td className='button'>
         <Button.Group>
           {!image?.proposal && (
@@ -172,11 +176,11 @@ function Referendum ({ className = '', value: { allAye, allNay, image, imageHash
 }
 
 export default React.memo(styled(Referendum)`
-  .democracy--Referendum-results {
-    margin-bottom: 1em;
+  td.chart {
+    padding: 0.5rem 0;
 
-    &.chart {
-      text-align: center;
+    .ui--Progress {
+      display: inline-block;
     }
   }
 `);
diff --git a/packages/page-democracy/src/Overview/ReferendumVote.tsx b/packages/page-democracy/src/Overview/ReferendumVote.tsx
index 133ef63f92..b7d72fd440 100644
--- a/packages/page-democracy/src/Overview/ReferendumVote.tsx
+++ b/packages/page-democracy/src/Overview/ReferendumVote.tsx
@@ -10,6 +10,7 @@ import { AddressMini } from '@polkadot/react-components';
 
 interface Props {
   vote: DeriveReferendumVote;
+  className?: string;
 }
 
 const sizing = ['0.1x', '1x', '2x', '3x', '4x', '5x', '6x'];
diff --git a/packages/page-democracy/src/Overview/ReferendumVotes.tsx b/packages/page-democracy/src/Overview/ReferendumVotes.tsx
index a2dc873473..c3133e4c31 100644
--- a/packages/page-democracy/src/Overview/ReferendumVotes.tsx
+++ b/packages/page-democracy/src/Overview/ReferendumVotes.tsx
@@ -5,8 +5,9 @@ import type { DeriveReferendumVote } from '@polkadot/api-derive/types';
 import type { BN } from '@polkadot/util';
 
 import React, { useMemo } from 'react';
+import styled from 'styled-components';
 
-import { Expander } from '@polkadot/react-components';
+import { Expander, Table } from '@polkadot/react-components';
 import { FormatBalance } from '@polkadot/react-query';
 import { BN_TEN, formatNumber } from '@polkadot/util';
 
@@ -27,7 +28,6 @@ const LOCKS = [1, 10, 20, 30, 40, 50, 60];
 
 function ReferendumVotes ({ change, className, count, isAye, isWinning, total, votes }: Props): React.ReactElement<Props> | null {
   const { t } = useTranslation();
-
   const sorted = useMemo(
     () => votes.sort((a, b) => {
       const ta = a.balance.muln(LOCKS[a.vote.conviction.toNumber()]).div(BN_TEN);
@@ -61,14 +61,30 @@ function ReferendumVotes ({ change, className, count, isAye, isWinning, total, v
         </>
       }
     >
-      {sorted.map((vote) =>
-        <ReferendumVote
-          key={vote.accountId.toString()}
-          vote={vote}
-        />
-      )}
+      <div className='votersTable'>
+        <Table empty={votes && t<string>('No voters')}>
+          <tr className='expand'>
+            <td>
+              {sorted.map((vote) =>
+                <ReferendumVote
+                  key={vote.accountId.toString()}
+                  vote={vote}
+                />
+              )}
+            </td>
+          </tr>
+        </Table>
+      </div>
     </Expander>
   );
 }
 
-export default React.memo(ReferendumVotes);
+export default React.memo(styled(ReferendumVotes)`
+  div.votersTable {
+    overflow-y: scroll;
+    display: block;
+    min-height: 50px;
+    max-height: 200px;
+    overflow-x: hidden;
+  }
+`);
diff --git a/packages/page-democracy/src/Overview/Referendums.tsx b/packages/page-democracy/src/Overview/Referendums.tsx
index 79b24844dd..3deaeb4c53 100644
--- a/packages/page-democracy/src/Overview/Referendums.tsx
+++ b/packages/page-democracy/src/Overview/Referendums.tsx
@@ -25,6 +25,7 @@ function Referendums ({ className = '', referendums }: Props): React.ReactElemen
     [t('turnout'), 'media--1400'],
     [undefined, 'badge'],
     [t('votes'), 'expand'],
+    [t<string>('support'), 'media--1000'],
     [undefined, undefined, 2],
     [undefined, 'media--1000']
   ]);
diff --git a/packages/page-democracy/src/Overview/Seconding.tsx b/packages/page-democracy/src/Overview/Seconding.tsx
index 22296a9047..14e9bbd956 100644
--- a/packages/page-democracy/src/Overview/Seconding.tsx
+++ b/packages/page-democracy/src/Overview/Seconding.tsx
@@ -35,7 +35,7 @@ function Seconding ({ deposit, depositors, image, proposalId }: Props): React.Re
     <>
       {isSecondingOpen && (
         <Modal
-          header={t<string>('Second proposal')}
+          header={t<string>('Endorse proposal')}
           onClose={toggleSeconding}
           size='large'
         >
@@ -46,10 +46,10 @@ function Seconding ({ deposit, depositors, image, proposalId }: Props): React.Re
                 proposal={image?.proposal}
               />
             </Modal.Columns>
-            <Modal.Columns hint={t<string>('Seconding a proposal that indicates your backing for the proposal. Proposals with greater interest moves up the queue for potential next referendums.')}>
+            <Modal.Columns hint={t<string>('Endorsing a proposal that indicates your backing for the proposal. Proposals with greater interest moves up the queue for potential next referendums.')}>
               <InputAddress
-                help={t<string>('Select the account you wish to second with. This will lock your funds until the proposal is either approved or rejected')}
-                label={t<string>('second with account')}
+                help={t<string>('Select the account you wish to endorse with. This will lock your funds until the proposal is either approved or rejected')}
+                label={t<string>('endorse with account')}
                 onChange={setAccountId}
                 type='account'
                 withLabel
@@ -68,7 +68,7 @@ function Seconding ({ deposit, depositors, image, proposalId }: Props): React.Re
               accountId={accountId}
               icon='sign-in-alt'
               isDisabled={!accountId}
-              label={t<string>('Second')}
+              label={t<string>('Endorse')}
               onStart={toggleSeconding}
               params={
                 api.tx.democracy.second.meta.args.length === 2
@@ -82,7 +82,7 @@ function Seconding ({ deposit, depositors, image, proposalId }: Props): React.Re
       )}
       <Button
         icon='toggle-off'
-        label={t<string>('Second')}
+        label={t<string>('Endorse')}
         onClick={toggleSeconding}
       />
     </>
diff --git a/packages/page-democracy/src/Overview/Voting.tsx b/packages/page-democracy/src/Overview/Voting.tsx
index b21ea54199..bc9907fa69 100644
--- a/packages/page-democracy/src/Overview/Voting.tsx
+++ b/packages/page-democracy/src/Overview/Voting.tsx
@@ -108,7 +108,7 @@ function Voting ({ proposal, referendumId }: Props): React.ReactElement<Props> |
         </Modal>
       )}
       <Button
-        icon='check'
+        icon='check-to-slot'
         label={t<string>('Vote')}
         onClick={toggleVoting}
       />
diff --git a/packages/react-components/src/Progress.tsx b/packages/react-components/src/Progress.tsx
index f807c2f152..6fb52f05c3 100644
--- a/packages/react-components/src/Progress.tsx
+++ b/packages/react-components/src/Progress.tsx
@@ -44,7 +44,7 @@ function Progress ({ className = '', isDisabled, total, value }: Props): React.R
     return null;
   }
 
-  const drawAngle = angle % 360;
+  const drawAngle = (angle === 360) ? 360 : angle % 360;
 
   return (
     <div className={`ui--Progress${isDisabled ? ' isDisabled' : ''} ${className}`}>