From e3824c04c38ab1ec5f0426400bd579f1eaaf2c98 Mon Sep 17 00:00:00 2001
From: Jaco <jacogr@gmail.com>
Date: Mon, 2 Jan 2023 19:49:25 +0200
Subject: [PATCH] Adjust Table component spacing (#8674)

* Adjust Table component spacing

* px

* Add isExpanded

* Cleanup border placement

* Ref sizing
---
 .../page-accounts/src/Accounts/Account.tsx    |  6 +--
 .../page-addresses/src/Contacts/Address.tsx   |  6 +--
 packages/page-bounties/src/Bounty.tsx         |  2 +-
 .../page-democracy/src/Overview/External.tsx  |  2 +-
 .../page-democracy/src/Overview/Proposal.tsx  |  2 +-
 .../src/Overview/Referendum.tsx               |  2 +-
 .../page-referenda/src/Referenda/Group.tsx    |  2 +-
 .../src/Referenda/Referendum.tsx              |  7 +--
 .../page-settings/src/Metadata/Extensions.tsx |  4 +-
 .../src/Metadata/NetworkSpecs.tsx             |  2 +-
 packages/page-staking/src/Pools/Pool.tsx      |  2 +-
 packages/react-components/src/Table/index.tsx | 49 ++++++++-----------
 12 files changed, 40 insertions(+), 46 deletions(-)

diff --git a/packages/page-accounts/src/Accounts/Account.tsx b/packages/page-accounts/src/Accounts/Account.tsx
index 824f4da999..f98edbb3dc 100644
--- a/packages/page-accounts/src/Accounts/Account.tsx
+++ b/packages/page-accounts/src/Accounts/Account.tsx
@@ -470,7 +470,7 @@ function Account ({ account: { address, meta }, className = '', delegation, filt
 
   return (
     <>
-      <tr className={`${className} noBorder`}>
+      <tr className={`${className} packedBottom`}>
         <td className='favorite'>
           <Icon
             color={isFavorite ? 'orange' : 'gray'}
@@ -701,7 +701,7 @@ function Account ({ account: { address, meta }, className = '', delegation, filt
           </div>
         </td>
       </tr>
-      <tr className={`${className} ${isExpanded ? 'noBorder' : ''} packed`}>
+      <tr className={`${className} isExpanded ${isExpanded ? 'packedAll' : 'packedTop'}`}>
         <td />
         <td className='balance all'>
           <AddressInfo
@@ -722,7 +722,7 @@ function Account ({ account: { address, meta }, className = '', delegation, filt
           )}
         </td>
       </tr>
-      <tr className={`${className} ${isExpanded ? 'isExpanded' : 'isCollapsed'} packed`}>
+      <tr className={`${className} ${isExpanded ? 'isExpanded' : 'isCollapsed'} packedTop`}>
         <td />
         <td className='columar'>
           <AddressInfo
diff --git a/packages/page-addresses/src/Contacts/Address.tsx b/packages/page-addresses/src/Contacts/Address.tsx
index 5ccc8293ea..58154911cd 100644
--- a/packages/page-addresses/src/Contacts/Address.tsx
+++ b/packages/page-addresses/src/Contacts/Address.tsx
@@ -183,7 +183,7 @@ function Address ({ address, className = '', filter, isFavorite, toggleFavorite
 
   return (
     <>
-      <tr className={`${className} noBorder`}>
+      <tr className={`${className} packedBottom`}>
         <td className='favorite'>
           <Icon
             color={isFavorite ? 'orange' : 'gray'}
@@ -227,7 +227,7 @@ function Address ({ address, className = '', filter, isFavorite, toggleFavorite
           </div>
         </td>
       </tr>
-      <tr className={`${className} ${isExpanded ? 'noBorder' : ''} packed`}>
+      <tr className={`${className} isExpanded ${isExpanded ? 'packedAll' : 'packedTop'}`}>
         <td />
         <td className='balance all'>
           <AddressInfo
@@ -249,7 +249,7 @@ function Address ({ address, className = '', filter, isFavorite, toggleFavorite
           )}
         </td>
       </tr>
-      <tr className={`${className} ${isExpanded ? 'isExpanded' : 'isCollapsed'} packed`}>
+      <tr className={`${className} ${isExpanded ? 'isExpanded' : 'isCollapsed'} packedTop`}>
         <td />
         <td className='columar'>
           <AddressInfo
diff --git a/packages/page-bounties/src/Bounty.tsx b/packages/page-bounties/src/Bounty.tsx
index e61956afe2..c9941b30e1 100644
--- a/packages/page-bounties/src/Bounty.tsx
+++ b/packages/page-bounties/src/Bounty.tsx
@@ -57,7 +57,7 @@ function Bounty ({ bestNumber, bounty, className = '', description, index, propo
 
   return (
     <>
-      <tr className={`${className}${isExpanded ? ' noBorder' : ''}`}>
+      <tr className={className}>
         <td className='number'><h1>{formatNumber(index)}</h1></td>
         <td
           className='description-column'
diff --git a/packages/page-democracy/src/Overview/External.tsx b/packages/page-democracy/src/Overview/External.tsx
index e5f1b46fc2..9c89240120 100644
--- a/packages/page-democracy/src/Overview/External.tsx
+++ b/packages/page-democracy/src/Overview/External.tsx
@@ -24,7 +24,7 @@ function External ({ className = '', value: { image, imageHash, threshold } }: P
 
   return (
     <>
-      <tr className={`${className}${isExpanded ? ' noBorder' : ''}`}>
+      <tr className={className}>
         <ProposalCell
           imageHash={imageHash}
           proposal={image?.proposal}
diff --git a/packages/page-democracy/src/Overview/Proposal.tsx b/packages/page-democracy/src/Overview/Proposal.tsx
index 81b136e1e6..265c57a78a 100644
--- a/packages/page-democracy/src/Overview/Proposal.tsx
+++ b/packages/page-democracy/src/Overview/Proposal.tsx
@@ -43,7 +43,7 @@ function Proposal ({ className = '', value: { balance, image, imageHash, index,
 
   return (
     <>
-      <tr className={`${className}${isExpanded ? ' noBorder' : ''}`}>
+      <tr className={className}>
         <td className='number'><h1>{formatNumber(index)}</h1></td>
         <ProposalCell
           imageHash={imageHash}
diff --git a/packages/page-democracy/src/Overview/Referendum.tsx b/packages/page-democracy/src/Overview/Referendum.tsx
index e2cafb18cc..11b6f52b95 100644
--- a/packages/page-democracy/src/Overview/Referendum.tsx
+++ b/packages/page-democracy/src/Overview/Referendum.tsx
@@ -91,7 +91,7 @@ function Referendum ({ className = '', value: { allAye, allNay, image, imageHash
 
   return (
     <>
-      <tr className={`${className}${isExpanded ? ' noBorder' : ''}`}>
+      <tr className={className}>
         <td className='number'><h1>{formatNumber(index)}</h1></td>
         <ProposalCell
           imageHash={imageHash}
diff --git a/packages/page-referenda/src/Referenda/Group.tsx b/packages/page-referenda/src/Referenda/Group.tsx
index 6dc3b870dc..033d47c91f 100644
--- a/packages/page-referenda/src/Referenda/Group.tsx
+++ b/packages/page-referenda/src/Referenda/Group.tsx
@@ -57,7 +57,7 @@ function Group ({ activeIssuance, className, isMember, members, palletReferenda,
       [
         [trackName ? <>{trackName}<div className='sub'>{trackInfo?.text}</div></> : t('referenda'), 'start', 5],
         [undefined, 'number', 2],
-        [headerButton, 'media--1000']
+        [headerButton]
       ],
       trackName
         ? `track:${trackName}`
diff --git a/packages/page-referenda/src/Referenda/Referendum.tsx b/packages/page-referenda/src/Referenda/Referendum.tsx
index 2b7eb92491..6851aa8ba8 100644
--- a/packages/page-referenda/src/Referenda/Referendum.tsx
+++ b/packages/page-referenda/src/Referenda/Referendum.tsx
@@ -370,12 +370,12 @@ function Referendum (props: Props): React.ReactElement<Props> {
 
   return (
     <>
-      <tr className={`${className}${isExpanded ? ' noBorder' : ''}`}>
+      <tr className={className}>
         <td className='number'>
           <h1>{formatNumber(id)}</h1>
         </td>
         <Component {...props} />
-        <td className='action media--1000'>
+        <td className='action'>
           <ExpandButton
             expanded={isExpanded}
             onClick={toggleExpanded}
@@ -386,7 +386,7 @@ function Referendum (props: Props): React.ReactElement<Props> {
         <td />
         <td
           className='columar'
-          colSpan={7}
+          colSpan={6}
         >
           {chartProps && (
             <Columar>
@@ -436,6 +436,7 @@ function Referendum (props: Props): React.ReactElement<Props> {
             </Columar.Column>
           </Columar>
         </td>
+        <td />
       </tr>
     </>
   );
diff --git a/packages/page-settings/src/Metadata/Extensions.tsx b/packages/page-settings/src/Metadata/Extensions.tsx
index edce77c195..c2201d6f0d 100644
--- a/packages/page-settings/src/Metadata/Extensions.tsx
+++ b/packages/page-settings/src/Metadata/Extensions.tsx
@@ -57,7 +57,7 @@ function Extensions ({ chainInfo, className }: Props): React.ReactElement<Props>
       {extensions
         ? options.length !== 0 && (
           <>
-            <tr className='noBorder'>
+            <tr>
               <td>
                 <Dropdown
                   label={t<string>('upgradable extensions')}
@@ -67,7 +67,7 @@ function Extensions ({ chainInfo, className }: Props): React.ReactElement<Props>
                 />
               </td>
             </tr>
-            <tr className='isOdd'>
+            <tr className='isExpanded'>
               <td>
                 <Button.Group>
                   <Button
diff --git a/packages/page-settings/src/Metadata/NetworkSpecs.tsx b/packages/page-settings/src/Metadata/NetworkSpecs.tsx
index 9912ca60d4..b728c5ab12 100644
--- a/packages/page-settings/src/Metadata/NetworkSpecs.tsx
+++ b/packages/page-settings/src/Metadata/NetworkSpecs.tsx
@@ -122,7 +122,7 @@ function NetworkSpecs ({ chainInfo, className }: Props): React.ReactElement<Prop
             <ChainImg className='settings--networkSpecs-logo' />
           </div>
         </td>
-        <td rowSpan={6}>
+        <td rowSpan={7}>
           {qrData.genesisHash && (
             <QrNetworkSpecs
               className='settings--networkSpecs-qr'
diff --git a/packages/page-staking/src/Pools/Pool.tsx b/packages/page-staking/src/Pools/Pool.tsx
index db09e05990..ecdc316371 100644
--- a/packages/page-staking/src/Pools/Pool.tsx
+++ b/packages/page-staking/src/Pools/Pool.tsx
@@ -55,7 +55,7 @@ function Pool ({ className = '', members, ownAccounts, params, poolId }: Props):
 
   return (
     <>
-      <tr className={`${className}${isExpanded ? ' noBorder' : ''}`}>
+      <tr className={className}>
         <td className='number'><h1>{formatNumber(poolId)}</h1></td>
         <td className='start'>{info && info.metadata}</td>
         <td className='number media--1100'>{info && info.bonded.state.type}</td>
diff --git a/packages/react-components/src/Table/index.tsx b/packages/react-components/src/Table/index.tsx
index e781b2ddae..e702185e7b 100644
--- a/packages/react-components/src/Table/index.tsx
+++ b/packages/react-components/src/Table/index.tsx
@@ -111,7 +111,8 @@ function Table ({ children, className = '', empty, emptySpinner, filter, footer,
   );
 }
 
-const BORDER_WIDTH = '0.125rem';
+const BORDER_WIDTH_BT = '2px';
+const BORDER_WIDTH_LR = '1px'; // 50% of bottom/top for isSplit
 
 export default React.memo(styled(Table)`
   max-width: 100%;
@@ -124,10 +125,6 @@ export default React.memo(styled(Table)`
 
     > .ui--Columar {
       margin-bottom: 1.5rem;
-
-      > .ui--Column > table {
-        margin-bottom: -${BORDER_WIDTH};
-      }
     }
   }
 
@@ -196,7 +193,7 @@ export default React.memo(styled(Table)`
     position: relative;
 
     td {
-      border-bottom: ${BORDER_WIDTH} solid var(--border-table);
+      border-top: ${BORDER_WIDTH_BT} solid var(--border-table);
       padding: 0.5rem 1rem;
       text-align: left;
       vertical-align: middle;
@@ -206,11 +203,11 @@ export default React.memo(styled(Table)`
       }
 
       &:first-child {
-        border-left: 1px solid var(--border-table);
+        border-left: ${BORDER_WIDTH_LR} solid var(--border-table);
       }
 
       &:last-child {
-        border-right: 1px solid var(--border-table);
+        border-right: ${BORDER_WIDTH_LR} solid var(--border-table);
       }
 
       label {
@@ -245,7 +242,7 @@ export default React.memo(styled(Table)`
       }
 
       &.button {
-        padding: 0.25rem 0.5rem;
+        padding: 0.25rem 0.5rem 0.5rem;
         text-align: right;
         white-space: nowrap;
 
@@ -406,21 +403,9 @@ export default React.memo(styled(Table)`
     tr {
       background: var(--bg-table);
 
-      &:first-child {
+      & + tr.isExpanded {
         td {
-          border-top: ${BORDER_WIDTH} solid var(--bg-page);
-        }
-      }
-
-      &:last-child {
-        td {
-          border-bottom: ${BORDER_WIDTH} solid var(--border-table);
-        }
-      }
-
-      &.packed, &.packedTop {
-        td {
-          padding-top: 0;
+          border-top: none;
         }
       }
 
@@ -430,13 +415,21 @@ export default React.memo(styled(Table)`
         }
       }
 
-      &.transparent {
-        background: transparent;
+      &.packedTop {
+        td {
+          padding-top: 0;
+        }
       }
 
-      &.noBorder td {
-        border-bottom: 1px solid transparent;
-        padding-bottom: 0 !important;
+      &.packedAll {
+        td {
+          padding-bottom: 0;
+          padding-top: 0;
+        }
+      }
+
+      &.transparent {
+        background: transparent;
       }
 
       &.isCollapsed {