Adjust row padding with primary addresses (#2449)

* Adjust row padding (accounts) * Expander padding
2020-03-24 09:37:49 +01:00 · 2020-03-24 09:37:49 +01:00 · 83ac8a99af
commit 83ac8a99af
parent ce82c1f0aa
16 changed files with 37 additions and 37 deletions
--- a/packages/page-accounts/src/Account.tsx
+++ b/packages/page-accounts/src/Account.tsx
@ -211,7 +211,7 @@ function Account ({ address, className, filter, isFavorite, toggleFavorite }: Pr
          />
        )}
      </td>
-      <td className='top'>
+      <td className='top padtop'>
        <AddressSmall
          overrideName={
            isEditingName
--- a/packages/page-address-book/src/Address.tsx
+++ b/packages/page-address-book/src/Address.tsx
@ -161,7 +161,7 @@ function Address ({ address, className, filter, isFavorite, toggleFavorite }: Pr
          onClick={_onFavorite}
        />
      </td>
-      <td className='top'>
+      <td className='top padtop'>
        <AddressSmall
          overrideName={
            isEditingName
--- a/packages/page-council/src/Overview/Candidate.tsx
+++ b/packages/page-council/src/Overview/Candidate.tsx
@ -25,7 +25,7 @@ function Candidate ({ className, address, balance, isPrime, voters }: Props): Re

  return (
    <tr className={`${className} ${isPrime ? 'council--isPrime' : ''}`}>
-      <td className='top'>
+      <td className='top padtop'>
        <AddressSmall value={address} />
      </td>
      <td className='council--prime'>
--- a/packages/page-council/src/Overview/Members.tsx
+++ b/packages/page-council/src/Overview/Members.tsx
@ -28,19 +28,15 @@ function Members ({ allVotes = {}, className, electionsInfo, prime }: Props): Re
          ? (
            <Table>
              <Table.Body>
-                {electionsInfo.members.map(([accountId, balance]): React.ReactNode => {
-                  const isPrime = prime?.toString() === accountId.toString();
-
-                  return (
-                    <Candidate
-                      address={accountId}
-                      balance={balance}
-                      isPrime={isPrime}
-                      key={accountId.toString()}
-                      voters={allVotes[accountId.toString()]}
-                    />
-                  );
-                })}
+                {electionsInfo.members.map(([accountId, balance]): React.ReactNode => (
+                  <Candidate
+                    address={accountId}
+                    balance={balance}
+                    isPrime={prime?.eq(accountId)}
+                    key={accountId.toString()}
+                    voters={allVotes[accountId.toString()]}
+                  />
+                ))}
              </Table.Body>
            </Table>
          )
--- a/packages/page-democracy/src/Overview/Proposal.tsx
+++ b/packages/page-democracy/src/Overview/Proposal.tsx
@ -27,7 +27,7 @@ function Proposal ({ className, value: { balance, hash, index, proposal, propose
  return (
    <tr className={className}>
      <td className='number top'><h1>{formatNumber(index)}</h1></td>
-      <td className='top'>
+      <td className='top padtop'>
        <AddressSmall value={proposer} />
      </td>
      <td className='number together top'>
--- a/packages/page-society/src/Overview/Candidate.tsx
+++ b/packages/page-society/src/Overview/Candidate.tsx
@ -36,7 +36,7 @@ export default function Candidate ({ allMembers, isMember, ownMembers, value: {

  return (
    <tr>
-      <td className='top'>
+      <td className='top padtop'>
        <AddressSmall value={accountId} />
      </td>
      <td className='number top'>
--- a/packages/page-society/src/Overview/Defender.tsx
+++ b/packages/page-society/src/Overview/Defender.tsx
@ -39,7 +39,7 @@ export default function Defender ({ className, info, isMember, ownMembers }: Pro
      <Table>
        <Table.Body>
          <tr>
-            <td className='top'>
+            <td className='top padtop'>
              <AddressSmall value={info.defender} />
            </td>
            <VoteDisplay votes={votes} />
--- a/packages/page-society/src/Overview/Member.tsx
+++ b/packages/page-society/src/Overview/Member.tsx
@ -21,7 +21,7 @@ function Member ({ className, isHead, value: { accountId, strikes } }: Props): R

  return (
    <tr className={`${className} ${isHead && 'society--isHead'}`}>
-      <td className='top'>
+      <td className='top padtop'>
        <AddressSmall value={accountId} />
      </td>
      <td className='society--head'>
--- a/packages/page-staking/src/Actions/Account/index.tsx
+++ b/packages/page-staking/src/Actions/Account/index.tsx
@ -193,7 +193,7 @@ function Account ({ allStashes, className, isOwnStash, next, onUpdateType, rewar
          }
        </td>
      )}
-      <td>
+      <td className='top padtop'>
        <BondExtra
          controllerId={controllerId}
          isOpen={isBondExtraOpen}
@ -256,7 +256,7 @@ function Account ({ allStashes, className, isOwnStash, next, onUpdateType, rewar
        )}
        <AddressSmall value={stashId} />
      </td>
-      <td className='top '>
+      <td className='top'>
        <AddressMini
          className='mini-nopad'
          label={t('controller')}
--- a/packages/page-staking/src/Overview/Address/index.tsx
+++ b/packages/page-staking/src/Overview/Address/index.tsx
@ -22,7 +22,6 @@ import StakeOther from './StakeOther';
 interface Props {
  address: string;
  className?: string;
-  defaultName: string;
  filterName: string;
  hasQueries: boolean;
  isAuthor?: boolean;
@ -143,7 +142,7 @@ function Address ({ address, className, filterName, hasQueries, isAuthor, isElec
        onlineCount={onlineCount}
        onlineMessage={onlineMessage}
      />
-      <td>
+      <td className='top padtop'>
        <AddressSmall value={address} />
      </td>
      <td className='top'>
--- a/packages/page-staking/src/Overview/CurrentList.tsx
+++ b/packages/page-staking/src/Overview/CurrentList.tsx
@ -116,11 +116,10 @@ function CurrentList ({ authorsMap, hasQueries, isIntentions, isVisible, lastAut
    );
  }, [stakingOverview, validators]);

-  const _renderRows = (addresses: AccountExtend[], defaultName: string, isMain: boolean): React.ReactNode =>
+  const _renderRows = (addresses: AccountExtend[], isMain: boolean): React.ReactNode =>
    addresses.map(([address, isElected, isFavorite]): React.ReactNode => (
      <Address
        address={address}
-        defaultName={defaultName}
        filterName={nameFilter}
        hasQueries={hasQueries}
        isAuthor={lastAuthors && lastAuthors.includes(address)}
@ -152,7 +151,7 @@ function CurrentList ({ authorsMap, hasQueries, isIntentions, isVisible, lastAut
      />
      <Table className={isIntentions ? 'staking--hidden' : ''}>
        <Table.Body>
-          {_renderRows(validators, t('validators'), true)}
+          {_renderRows(validators, true)}
        </Table.Body>
      </Table>
      {isIntentions && (
@ -160,8 +159,8 @@ function CurrentList ({ authorsMap, hasQueries, isIntentions, isVisible, lastAut
          ? (
            <Table>
              <Table.Body>
-                {_renderRows(elected, t('intention'), false)}
-                {_renderRows(waiting, t('intention'), false)}
+                {_renderRows(elected, false)}
+                {_renderRows(waiting, false)}
              </Table.Body>
            </Table>
          )
--- a/packages/page-staking/src/Targets/Validator.tsx
+++ b/packages/page-staking/src/Targets/Validator.tsx
@ -35,7 +35,7 @@ function Validator ({ info: { accountId, bondOther, bondOwn, bondTotal, commissi
        toggleFavorite={toggleFavorite}
      />
      <td className='number'>{formatNumber(rankOverall)}</td>
-      <td className='address'>
+      <td className='top padtop'>
        <AddressSmall value={accountId} />
      </td>
      <td className='number'>
--- a/packages/page-tech-comm/src/Overview/Members.tsx
+++ b/packages/page-tech-comm/src/Overview/Members.tsx
@ -33,7 +33,7 @@ function Members ({ className, members, prime }: Props): React.ReactElement<Prop
                    className={isPrime ? 'techcomm--isPrime' : ''}
                    key={accountId.toString()}
                  >
-                    <td className='all'>
+                    <td className='all top padtop'>
                      <AddressSmall value={accountId} />
                    </td>
                    <td className='right techcomm--prime'>
@ -60,7 +60,7 @@ function Members ({ className, members, prime }: Props): React.ReactElement<Prop
  );
 }

-export default styled(Members)`
+export default React.memo(styled(Members)`
  .techcomm--isPrime td {
    background: rgba(239, 255, 239, 0.8);
  }
@ -73,4 +73,4 @@ export default styled(Members)`
      color: green;
    }
  }
-`;
+`);
--- a/packages/page-treasury/src/Overview/Proposal.tsx
+++ b/packages/page-treasury/src/Overview/Proposal.tsx
@ -21,7 +21,7 @@ interface Props {
  withSend: boolean;
 }

-export default function ProposalDisplay ({ className, isMember, proposal: { council, id, proposal }, withSend }: Props): React.ReactElement<Props> | null {
+function ProposalDisplay ({ className, isMember, proposal: { council, id, proposal }, withSend }: Props): React.ReactElement<Props> | null {
  const { t } = useTranslation();

  return (
@ -29,7 +29,7 @@ export default function ProposalDisplay ({ className, isMember, proposal: { coun
      <td className='number top'>
        <h1>{formatNumber(id)}</h1>
      </td>
-      <td className='top'>
+      <td className='top padtop'>
        <AddressSmall value={proposal.proposer} />
      </td>
      <td className='top'>
@ -72,3 +72,5 @@ export default function ProposalDisplay ({ className, isMember, proposal: { coun
    </tr>
  );
 }
+
+export default React.memo(ProposalDisplay);
--- a/packages/react-components/src/Expander.tsx
+++ b/packages/react-components/src/Expander.tsx
@ -50,13 +50,17 @@ export default React.memo(styled(Expander)`
    display: none;
  }

+  &.isExpanded .ui--Expander-contents {
+    margin-top: 0.5rem;
+  }
+
  &.hasContent .ui--Expander-summary {
    cursor: pointer;
  }

  .ui--Expander-summary {
    display: block;
-    margin: 0 0 0.5rem 0;
+    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
--- a/packages/react-components/src/Table.tsx
+++ b/packages/react-components/src/Table.tsx
@ -128,7 +128,7 @@ const Memo = React.memo(styled(Table)`
        }

        &.padtop {
-          padding-top: 1.1rem;
+          padding: 0.75rem;
        }
      }