Add .address class to Table (top & padding) (#2451)

packages/page-accounts/src/Account.tsx

@@ -211,7 +211,7 @@ function Account ({ address, className, filter, isFavorite, toggleFavorite }: Pr
           />
         )}
       </td>
-      <td className='top padtop'>
+      <td className='address'>
         <AddressSmall
           overrideName={
             isEditingName

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 padtop'>
+      <td className='address'>
         <AddressSmall
           overrideName={
             isEditingName

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 padtop'>
+      <td className='address'>
         <AddressSmall value={address} />
       </td>
       <td className='council--prime'>

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 padtop'>
+      <td className='address'>
         <AddressSmall value={proposer} />
       </td>
       <td className='number together top'>

packages/page-society/src/Overview/Candidate.tsx

@@ -36,7 +36,7 @@ export default function Candidate ({ allMembers, isMember, ownMembers, value: {
 
   return (
     <tr>
-      <td className='top padtop'>
+      <td className='address'>
         <AddressSmall value={accountId} />
       </td>
       <td className='number top'>

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 padtop'>
+            <td className='address'>
               <AddressSmall value={info.defender} />
             </td>
             <VoteDisplay votes={votes} />

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 padtop'>
+      <td className='address'>
         <AddressSmall value={accountId} />
       </td>
       <td className='society--head'>

packages/page-staking/src/Actions/Account/index.tsx

@@ -193,7 +193,7 @@ function Account ({ allStashes, className, isOwnStash, next, onUpdateType, rewar
           }
         </td>
       )}
-      <td className='top padtop'>
+      <td className='address'>
         <BondExtra
           controllerId={controllerId}
           isOpen={isBondExtraOpen}

packages/page-staking/src/Overview/Address/index.tsx

@@ -142,7 +142,7 @@ function Address ({ address, className, filterName, hasQueries, isAuthor, isElec
         onlineCount={onlineCount}
         onlineMessage={onlineMessage}
       />
-      <td className='top padtop'>
+      <td className='address'>
         <AddressSmall value={address} />
       </td>
       <td className='top'>

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='top padtop'>
+      <td className='address'>
         <AddressSmall value={accountId} />
       </td>
       <td className='number'>

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 top padtop'>
+                    <td className='all address'>
                       <AddressSmall value={accountId} />
                     </td>
                     <td className='right techcomm--prime'>

packages/page-treasury/src/Overview/Proposal.tsx

@@ -29,7 +29,7 @@ function ProposalDisplay ({ className, isMember, proposal: { council, id, propos
       <td className='number top'>
         <h1>{formatNumber(id)}</h1>
       </td>
-      <td className='top padtop'>
+      <td className='address'>
         <AddressSmall value={proposal.proposer} />
       </td>
       <td className='top'>

packages/react-components/src/Table.tsx

@@ -103,6 +103,11 @@ const Memo = React.memo(styled(Table)`
           }
         }
 
+        &.address {
+          padding: 0.85rem 1rem;
+          vertical-align: top;
+        }
+
         &.number {
           text-align: right;
         }
@@ -122,13 +127,13 @@ const Memo = React.memo(styled(Table)`
             margin-top: -0.25rem;
 
             .ui--AddressMini-label {
-              margin-bottom: 0.25rem;
+              margin-bottom: 0rem;
             }
           }
         }
 
         &.padtop {
-          padding: 0.75rem;
+          padding-top: 1.1rem;
         }
       }