diff --git a/packages/page-council/src/Motions/Voters.tsx b/packages/page-council/src/Motions/Voters.tsx index 7e1ada1a76..45d62d39e7 100644 --- a/packages/page-council/src/Motions/Voters.tsx +++ b/packages/page-council/src/Motions/Voters.tsx @@ -3,9 +3,9 @@ import type { AccountId, MemberCount } from '@polkadot/types/interfaces'; -import React, { useMemo } from 'react'; +import React, { useCallback, useMemo } from 'react'; -import { AddressMini, Expander } from '@polkadot/react-components'; +import { AddressMini, ExpanderScroll } from '@polkadot/react-components'; import { useTranslation } from '../translate'; @@ -33,26 +33,30 @@ function Voters ({ isAye, members, threshold, votes }: Props): React.ReactElemen [isAye, members, threshold, votes] ); + const renderVotes = useCallback( + () => votes && votes.map((address): React.ReactNode => ( + + )), + [votes] + ); + if (!count || !votes.length) { return null; } return ( - ('Aye {{count}}', { replace: { count } }) : t('Nay {{count}}', { replace: { count } }) } - > - {votes.map((address): React.ReactNode => ( - - ))} - + /> ); } diff --git a/packages/react-components/src/ExpanderScroll.tsx b/packages/react-components/src/ExpanderScroll.tsx index 268df61457..95e8d95519 100644 --- a/packages/react-components/src/ExpanderScroll.tsx +++ b/packages/react-components/src/ExpanderScroll.tsx @@ -11,6 +11,7 @@ import Table from './Table'; interface Props extends ExpanderProps { empty?: string; + renderChildren?: () => React.ReactNode[]; } // TODO Not 100% convinced we need a table here since we only have a single row, @@ -28,9 +29,18 @@ function ExpanderScroll ({ children, className, empty, help, helpIcon, renderChi empty={empty} isInline > - - {renderChildren ? renderChildren() : children} - + { + renderChildren + ? renderChildren().map((row, key) => ( + + {row} + + )) + : {children} + } ), diff --git a/packages/react-components/src/Table/index.tsx b/packages/react-components/src/Table/index.tsx index a414bcf601..c193dea16d 100644 --- a/packages/react-components/src/Table/index.tsx +++ b/packages/react-components/src/Table/index.tsx @@ -82,6 +82,21 @@ export default React.memo(styled(Table)` margin-bottom: 1.5rem; } + &.isInline { + &.highlight--bg-faint, + &.highlight--bg-faint::before { + background: transparent; + } + + tbody tr { + background: transparent; + + td { + border-top-width: 1px; + } + } + } + tr { max-width: 100%; width: 100%;