From ac2e910d8b4d1e70275191a6927af8c3aca6a429 Mon Sep 17 00:00:00 2001
From: Jaco <jacogr@gmail.com>
Date: Sun, 8 Jan 2023 15:54:26 +0200
Subject: [PATCH] Adjust Table borders (w/ spacing) (#8729)

* Adjust Table borders (w/ spacing)

* Background only on cells
---
 packages/apps/public/index.html               |   2 +-
 .../page-accounts/src/Accounts/Account.tsx    |   6 +-
 .../page-addresses/src/Contacts/Address.tsx   |   6 +-
 packages/page-bounties/src/Bounty.tsx         |   4 +-
 .../page-democracy/src/Overview/External.tsx  |   4 +-
 .../page-democracy/src/Overview/Proposal.tsx  |   4 +-
 .../src/Overview/Referendum.tsx               |   4 +-
 .../src/Referenda/Referendum.tsx              |   4 +-
 .../page-settings/src/Metadata/Extensions.tsx |   4 +-
 .../src/Validators/Address/index.tsx          |   4 +-
 .../page-treasury/src/Overview/Proposal.tsx   |   4 +-
 packages/react-components/src/Table/Head.tsx  |  19 +---
 packages/react-components/src/Table/Table.tsx | 104 +++++++++++++++---
 13 files changed, 116 insertions(+), 53 deletions(-)

diff --git a/packages/apps/public/index.html b/packages/apps/public/index.html
index 5acec239a3..f1648c8d35 100644
--- a/packages/apps/public/index.html
+++ b/packages/apps/public/index.html
@@ -44,7 +44,7 @@
         --color-summary: rgba(244, 242, 240, 0.75);
         --color-table-foot: rgba(254, 240, 240, 0.66);
         --color-table-head: rgba(254, 240, 240, 0.66);
-        --color-text: rgba(244, 242, 240, 0.9);
+        --color-text: rgba(244, 242, 240, 0.8);
       }
 
       [data-theme="light"] {
diff --git a/packages/page-accounts/src/Accounts/Account.tsx b/packages/page-accounts/src/Accounts/Account.tsx
index e8b67779b1..8440dcc208 100644
--- a/packages/page-accounts/src/Accounts/Account.tsx
+++ b/packages/page-accounts/src/Accounts/Account.tsx
@@ -465,7 +465,7 @@ function Account ({ account: { address, meta }, className = '', delegation, filt
 
   return (
     <>
-      <tr className={`${className} packedBottom`}>
+      <tr className={`${className} isExpanded isFirst packedBottom`}>
         <Table.Column.Favorite
           address={address}
           isFavorite={isFavorite}
@@ -702,7 +702,7 @@ function Account ({ account: { address, meta }, className = '', delegation, filt
           toggle={toggleIsExpanded}
         />
       </tr>
-      <tr className={`${className} isExpanded packedTop`}>
+      <tr className={`${className} isExpanded ${isExpanded ? '' : 'isLast'} packedTop`}>
         <td />
         <td
           className='balance all'
@@ -717,7 +717,7 @@ function Account ({ account: { address, meta }, className = '', delegation, filt
         </td>
         <td />
       </tr>
-      <tr className={`${className} ${isExpanded ? 'isExpanded' : 'isCollapsed'} packedTop`}>
+      <tr className={`${className} ${isExpanded ? 'isExpanded isLast' : 'isCollapsed'} packedTop`}>
         <td />
         <td
           className='balance columar'
diff --git a/packages/page-addresses/src/Contacts/Address.tsx b/packages/page-addresses/src/Contacts/Address.tsx
index f3272ff567..2b3aaae3f6 100644
--- a/packages/page-addresses/src/Contacts/Address.tsx
+++ b/packages/page-addresses/src/Contacts/Address.tsx
@@ -178,7 +178,7 @@ function Address ({ address, className = '', filter, isFavorite, toggleFavorite
 
   return (
     <>
-      <tr className={`${className} packedBottom`}>
+      <tr className={`${className} isExpanded isFirst packedBottom`}>
         <Table.Column.Favorite
           address={address}
           isFavorite={isFavorite}
@@ -229,7 +229,7 @@ function Address ({ address, className = '', filter, isFavorite, toggleFavorite
           toggle={toggleIsExpanded}
         />
       </tr>
-      <tr className={`${className} isExpanded packedTop`}>
+      <tr className={`${className} isExpanded ${isExpanded ? '' : 'isLast'} packedTop`}>
         <td />
         <td
           className='balance all'
@@ -244,7 +244,7 @@ function Address ({ address, className = '', filter, isFavorite, toggleFavorite
         </td>
         <td />
       </tr>
-      <tr className={`${className} ${isExpanded ? 'isExpanded' : 'isCollapsed'} packedTop`}>
+      <tr className={`${className} ${isExpanded ? 'isExpanded isLast' : 'isCollapsed'} packedTop`}>
         <td />
         <td
           className='balance columar'
diff --git a/packages/page-bounties/src/Bounty.tsx b/packages/page-bounties/src/Bounty.tsx
index 9c1999da3f..b3da2bce50 100644
--- a/packages/page-bounties/src/Bounty.tsx
+++ b/packages/page-bounties/src/Bounty.tsx
@@ -56,7 +56,7 @@ function Bounty ({ bestNumber, bounty, className = '', description, index, propo
 
   return (
     <>
-      <tr className={className}>
+      <tr className={`${className} isExpanded isFirst ${isExpanded ? '' : 'isLast'}`}>
         <Table.Column.Id value={index} />
         <td
           className='description-column'
@@ -131,7 +131,7 @@ function Bounty ({ bestNumber, bounty, className = '', description, index, propo
           </div>
         </td>
       </tr>
-      <tr className={`${className} ${isExpanded ? 'isExpanded' : 'isCollapsed'}`}>
+      <tr className={`${className} ${isExpanded ? 'isExpanded isLast' : 'isCollapsed'}`}>
         <td />
         <td
           className='columar'
diff --git a/packages/page-democracy/src/Overview/External.tsx b/packages/page-democracy/src/Overview/External.tsx
index 9c89240120..bdc808acfa 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}>
+      <tr className={`${className} isExpanded isFirst ${isExpanded ? '' : 'isLast'}`}>
         <ProposalCell
           imageHash={imageHash}
           proposal={image?.proposal}
@@ -56,7 +56,7 @@ function External ({ className = '', value: { image, imageHash, threshold } }: P
           </Button.Group>
         </td>
       </tr>
-      <tr className={`${className} ${isExpanded ? 'isExpanded' : 'isCollapsed'}`}>
+      <tr className={`${className} ${isExpanded ? 'isExpanded isLast' : 'isCollapsed'}`}>
         <td
           className='columar'
           colSpan={100}
diff --git a/packages/page-democracy/src/Overview/Proposal.tsx b/packages/page-democracy/src/Overview/Proposal.tsx
index daec6864ff..1effad0d97 100644
--- a/packages/page-democracy/src/Overview/Proposal.tsx
+++ b/packages/page-democracy/src/Overview/Proposal.tsx
@@ -42,7 +42,7 @@ function Proposal ({ className = '', value: { balance, image, imageHash, index,
 
   return (
     <>
-      <tr className={className}>
+      <tr className={`${className} isExpanded isFirst ${isExpanded ? '' : 'isLast'}`}>
         <Table.Column.Id value={index} />
         <ProposalCell
           imageHash={imageHash}
@@ -81,7 +81,7 @@ function Proposal ({ className = '', value: { balance, image, imageHash, index,
           </Button.Group>
         </td>
       </tr>
-      <tr className={`${className} ${isExpanded ? 'isExpanded' : 'isCollapsed'}`}>
+      <tr className={`${className} ${isExpanded ? 'isExpanded isLast' : 'isCollapsed'}`}>
         <td />
         <td
           className='columar'
diff --git a/packages/page-democracy/src/Overview/Referendum.tsx b/packages/page-democracy/src/Overview/Referendum.tsx
index 540bb83ede..46f0824944 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}>
+      <tr className={`${className} isExpanded isFirst ${isExpanded ? '' : 'isLast'}`}>
         <Table.Column.Id value={index} />
         <ProposalCell
           imageHash={imageHash}
@@ -171,7 +171,7 @@ function Referendum ({ className = '', value: { allAye, allNay, image, imageHash
           </Button.Group>
         </td>
       </tr>
-      <tr className={`${className} ${isExpanded ? 'isExpanded' : 'isCollapsed'}`}>
+      <tr className={`${className} ${isExpanded ? 'isExpanded isLast' : 'isCollapsed'}`}>
         <td />
         <td
           className='columar'
diff --git a/packages/page-referenda/src/Referenda/Referendum.tsx b/packages/page-referenda/src/Referenda/Referendum.tsx
index e0010bced1..3ba2a42d72 100644
--- a/packages/page-referenda/src/Referenda/Referendum.tsx
+++ b/packages/page-referenda/src/Referenda/Referendum.tsx
@@ -390,7 +390,7 @@ function Referendum (props: Props): React.ReactElement<Props> {
 
   return (
     <>
-      <tr className={className}>
+      <tr className={`${className} isExpanded isFirst ${isExpanded ? '' : 'isLast'}`}>
         <Table.Column.Id value={id} />
         <Component {...props} />
         <td className='actions'>
@@ -402,7 +402,7 @@ function Referendum (props: Props): React.ReactElement<Props> {
           </div>
         </td>
       </tr>
-      <tr className={`${className} ${isExpanded ? 'isExpanded' : 'isCollapsed'}`}>
+      <tr className={`${className} ${isExpanded ? 'isExpanded isLast' : 'isCollapsed'}`}>
         <td />
         <td
           className='columar'
diff --git a/packages/page-settings/src/Metadata/Extensions.tsx b/packages/page-settings/src/Metadata/Extensions.tsx
index 7f6eb5220a..95a069bde4 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>
+            <tr className='isExpanded isFirst'>
               <td>
                 <Dropdown
                   label={t<string>('upgradable extensions')}
@@ -67,7 +67,7 @@ function Extensions ({ chainInfo, className }: Props): React.ReactElement<Props>
                 />
               </td>
             </tr>
-            <tr className='isExpanded'>
+            <tr className='isExpanded isLast'>
               <td>
                 <Button.Group>
                   <Button
diff --git a/packages/page-staking/src/Validators/Address/index.tsx b/packages/page-staking/src/Validators/Address/index.tsx
index 98b17c6f5e..5f69b4eb34 100644
--- a/packages/page-staking/src/Validators/Address/index.tsx
+++ b/packages/page-staking/src/Validators/Address/index.tsx
@@ -124,7 +124,7 @@ function Address ({ address, className = '', filterName, hasQueries, isElected,
 
   return (
     <>
-      <tr className={`${className} ${isExpanded ? 'packedBottom' : ''}`}>
+      <tr className={`${className} isFirst ${isExpanded ? 'packedBottom' : 'isLast'}`}>
         <Table.Column.Favorite
           address={address}
           isFavorite={isFavorite}
@@ -180,7 +180,7 @@ function Address ({ address, className = '', filterName, hasQueries, isElected,
         />
       </tr>
       {isExpanded && (
-        <tr className={`${className} ${isExpanded ? 'isExpanded' : 'isCollapsed'} packedTop`}>
+        <tr className={`${className} ${isExpanded ? 'isExpanded isLast' : 'isCollapsed'} packedTop`}>
           <td colSpan={2} />
           <td
             className='columar'
diff --git a/packages/page-treasury/src/Overview/Proposal.tsx b/packages/page-treasury/src/Overview/Proposal.tsx
index de184dab45..20964c5909 100644
--- a/packages/page-treasury/src/Overview/Proposal.tsx
+++ b/packages/page-treasury/src/Overview/Proposal.tsx
@@ -37,7 +37,7 @@ function ProposalDisplay ({ className = '', isMember, members, proposal: { counc
 
   return (
     <>
-      <tr className={className}>
+      <tr className={`${className} isExpanded isFirst ${isExpanded ? '' : 'isLast'}`}>
         <Table.Column.Id value={id} />
         <td className='address all'>
           <AddressSmall value={proposal.beneficiary} />
@@ -71,7 +71,7 @@ function ProposalDisplay ({ className = '', isMember, members, proposal: { counc
           toggle={toggleIsExpanded}
         />
       </tr>
-      <tr className={`${className} ${isExpanded ? 'isExpanded' : 'isCollapsed'} packedTop`}>
+      <tr className={`${className} ${isExpanded ? 'isExpanded isLast' : 'isCollapsed'} packedTop`}>
         <td />
         <td
           className='columar'
diff --git a/packages/react-components/src/Table/Head.tsx b/packages/react-components/src/Table/Head.tsx
index 419fa1a077..5d968d6e4b 100644
--- a/packages/react-components/src/Table/Head.tsx
+++ b/packages/react-components/src/Table/Head.tsx
@@ -52,6 +52,7 @@ export default React.memo(styled(Head)`
   z-index: 1;
 
   th {
+    background: var(--bg-table);
     font: var(--font-sans);
     font-weight: var(--font-weight-normal);
     padding: 0.375rem 1rem;
@@ -76,14 +77,6 @@ export default React.memo(styled(Head)`
       }
     }
 
-    &:first-child {
-      border-left: 1px solid var(--border-table);
-    }
-
-    &:last-child {
-      border-right: 1px solid var(--border-table);
-    }
-
     &.address {
       padding-left: 3rem;
       text-align: left;
@@ -99,7 +92,6 @@ export default React.memo(styled(Head)`
     }
 
     &.isClickable {
-      border-bottom: 2px solid transparent;
       cursor: pointer;
     }
 
@@ -126,22 +118,15 @@ export default React.memo(styled(Head)`
   }
 
   tr {
-    background: var(--bg-table);
     text-transform: lowercase;
 
-    &:first-child {
-      th {
-        border-top: 1px solid var(--border-table);
-      }
-    }
-
     &.filter {
       .ui.input,
       .ui.selection.dropdown {
         background: transparent;
 
         &:first-child {
-          margin-top: -1px;
+          margin-top: 0;
         }
       }
 
diff --git a/packages/react-components/src/Table/Table.tsx b/packages/react-components/src/Table/Table.tsx
index c5df1f992a..f9c7a8c82d 100644
--- a/packages/react-components/src/Table/Table.tsx
+++ b/packages/react-components/src/Table/Table.tsx
@@ -97,8 +97,8 @@ function Table ({ children, className = '', empty, emptySpinner, filter, footer,
   );
 }
 
-const BORDER_WIDTH_BT = '2px';
-const BORDER_WIDTH_LR = '1px'; // 50% of bottom/top for isSplit
+const BORDER_RADIUS = '0.5rem';
+const BORDER_WIDTH = '1px';
 
 export default React.memo(styled(Table)`
   max-width: 100%;
@@ -175,7 +175,7 @@ export default React.memo(styled(Table)`
     position: relative;
 
     td {
-      border-top: ${BORDER_WIDTH_BT} solid var(--border-table);
+      background: var(--bg-table);
       padding: 0.5rem 1rem;
       text-align: left;
       vertical-align: middle;
@@ -185,11 +185,11 @@ export default React.memo(styled(Table)`
       }
 
       &:first-child {
-        border-left: ${BORDER_WIDTH_LR} solid var(--border-table);
+        border-left: ${BORDER_WIDTH} solid var(--border-table);
       }
 
       &:last-child {
-        border-right: ${BORDER_WIDTH_LR} solid var(--border-table);
+        border-right: ${BORDER_WIDTH} solid var(--border-table);
       }
 
       label {
@@ -272,10 +272,6 @@ export default React.memo(styled(Table)`
         padding: 0;
       }
 
-      &.combined {
-        border-top-width: 0;
-      }
-
       &.expand {
         &:not(.left) {
           text-align: right;
@@ -384,11 +380,50 @@ export default React.memo(styled(Table)`
     }
 
     tr {
-      background: var(--bg-table);
-
-      & + tr.isExpanded {
+      &:not(.isExpanded) {
         td {
-          border-top: none;
+          border-top: ${BORDER_WIDTH} solid var(--border-table);
+          border-bottom: ${BORDER_WIDTH} solid var(--border-table);
+
+          &:first-child {
+            border-top-left-radius: ${BORDER_RADIUS};
+            border-bottom-left-radius: ${BORDER_RADIUS};
+          }
+
+          &:last-child {
+            border-top-right-radius: ${BORDER_RADIUS};
+            border-bottom-right-radius: ${BORDER_RADIUS};
+          }
+        }
+      }
+
+      &.isExpanded {
+        &.isFirst {
+          td {
+            border-top: ${BORDER_WIDTH} solid var(--border-table);
+
+            &:first-child {
+              border-top-left-radius: ${BORDER_RADIUS};
+            }
+
+            &:last-child {
+              border-top-right-radius: ${BORDER_RADIUS};
+            }
+          }
+        }
+
+        &.isLast {
+          td {
+            border-bottom: ${BORDER_WIDTH} solid var(--border-table);
+
+            &:first-child {
+              border-bottom-left-radius: ${BORDER_RADIUS};
+            }
+
+            &:last-child {
+              border-bottom-right-radius: ${BORDER_RADIUS};
+            }
+          }
         }
       }
 
@@ -434,4 +469,47 @@ export default React.memo(styled(Table)`
       }
     }
   }
+
+  thead {
+    tr {
+      &:first-child {
+        th {
+          border-top: ${BORDER_WIDTH} solid var(--border-table);
+
+          &:first-child {
+            border-top-left-radius: ${BORDER_RADIUS};
+          }
+
+          &:last-child {
+            border-top-right-radius: ${BORDER_RADIUS};
+          }
+        }
+      }
+
+      &:last-child {
+        th {
+          border-bottom: ${BORDER_WIDTH} solid var(--border-table);
+          padding-top: 1rem;
+
+          &:first-child {
+            border-bottom-left-radius: ${BORDER_RADIUS};
+          }
+
+          &:last-child {
+            border-bottom-right-radius: ${BORDER_RADIUS};
+          }
+        }
+      }
+
+      th {
+        &:first-child {
+          border-left: ${BORDER_WIDTH} solid var(--border-table);
+        }
+
+        &:last-child {
+          border-right: ${BORDER_WIDTH} solid var(--border-table);
+        }
+      }
+    }
+  }
 `);