From e344b8a0621fee93fd317c2f753d2a7bb3c5d567 Mon Sep 17 00:00:00 2001
From: Jaco <jacogr@gmail.com>
Date: Mon, 2 Jan 2023 20:19:19 +0200
Subject: [PATCH] Condense Accounts/Addresses displays (#8675)

---
 .../page-accounts/src/Accounts/Account.tsx    | 35 ++++++++-----
 .../page-addresses/src/Contacts/Address.tsx   | 51 +++++++++++--------
 .../page-addresses/src/Contacts/index.tsx     |  2 +-
 packages/react-components/src/Table/index.tsx |  1 +
 4 files changed, 52 insertions(+), 37 deletions(-)

diff --git a/packages/page-accounts/src/Accounts/Account.tsx b/packages/page-accounts/src/Accounts/Account.tsx
index f98edbb3dc..28280b023c 100644
--- a/packages/page-accounts/src/Accounts/Account.tsx
+++ b/packages/page-accounts/src/Accounts/Account.tsx
@@ -684,6 +684,16 @@ function Account ({ account: { address, meta }, className = '', delegation, filt
             )}
           </div>
         </td>
+        <td className='button'>
+          {isFunction(api.api.tx.balances?.transfer) && (
+            <Button
+              className='send-button'
+              icon='paper-plane'
+              label={t<string>('send')}
+              onClick={toggleTransfer}
+            />
+          )}
+        </td>
         <td className='actions'>
           <div>
             <Popup
@@ -701,9 +711,12 @@ function Account ({ account: { address, meta }, className = '', delegation, filt
           </div>
         </td>
       </tr>
-      <tr className={`${className} isExpanded ${isExpanded ? 'packedAll' : 'packedTop'}`}>
+      <tr className={`${className} isExpanded packedTop`}>
         <td />
-        <td className='balance all'>
+        <td
+          className='balance all'
+          colSpan={2}
+        >
           <AddressInfo
             address={address}
             balancesAll={balancesAll}
@@ -711,20 +724,14 @@ function Account ({ account: { address, meta }, className = '', delegation, filt
             withExtended={false}
           />
         </td>
-        <td className='button'>
-          {isFunction(api.api.tx.balances?.transfer) && (
-            <Button
-              className='send-button'
-              icon='paper-plane'
-              label={t<string>('send')}
-              onClick={toggleTransfer}
-            />
-          )}
-        </td>
+        <td />
       </tr>
       <tr className={`${className} ${isExpanded ? 'isExpanded' : 'isCollapsed'} packedTop`}>
         <td />
-        <td className='columar'>
+        <td
+          className='balance columar'
+          colSpan={2}
+        >
           <AddressInfo
             address={address}
             balancesAll={balancesAll}
@@ -741,7 +748,7 @@ function Account ({ account: { address, meta }, className = '', delegation, filt
               />
             </Columar.Column>
           </Columar>
-          <Columar>
+          <Columar size='tiny'>
             <Columar.Column>
               <div data-testid='tags'>
                 <Tags
diff --git a/packages/page-addresses/src/Contacts/Address.tsx b/packages/page-addresses/src/Contacts/Address.tsx
index 58154911cd..67a7da860f 100644
--- a/packages/page-addresses/src/Contacts/Address.tsx
+++ b/packages/page-addresses/src/Contacts/Address.tsx
@@ -217,26 +217,6 @@ function Address ({ address, className = '', filter, isFavorite, toggleFavorite
             </>
           )}
         </td>
-        <td className='actions'>
-          <div>
-            <Popup value={PopupDropdown} />
-            <ExpandButton
-              expanded={isExpanded}
-              onClick={toggleIsExpanded}
-            />
-          </div>
-        </td>
-      </tr>
-      <tr className={`${className} isExpanded ${isExpanded ? 'packedAll' : 'packedTop'}`}>
-        <td />
-        <td className='balance all'>
-          <AddressInfo
-            address={address}
-            balancesAll={balancesAll}
-            withBalance={BALANCE_OPTS_ONLY}
-            withExtended={false}
-          />
-        </td>
         <td className='button'>
           {isFunction(api.api.tx.balances?.transfer) && (
             <Button
@@ -248,10 +228,37 @@ function Address ({ address, className = '', filter, isFavorite, toggleFavorite
             />
           )}
         </td>
+        <td className='actions'>
+          <div>
+            <Popup value={PopupDropdown} />
+            <ExpandButton
+              expanded={isExpanded}
+              onClick={toggleIsExpanded}
+            />
+          </div>
+        </td>
+      </tr>
+      <tr className={`${className} isExpanded packedTop`}>
+        <td />
+        <td
+          className='balance all'
+          colSpan={2}
+        >
+          <AddressInfo
+            address={address}
+            balancesAll={balancesAll}
+            withBalance={BALANCE_OPTS_ONLY}
+            withExtended={false}
+          />
+        </td>
+        <td />
       </tr>
       <tr className={`${className} ${isExpanded ? 'isExpanded' : 'isCollapsed'} packedTop`}>
         <td />
-        <td className='columar'>
+        <td
+          className='balance columar'
+          colSpan={2}
+        >
           <AddressInfo
             address={address}
             balancesAll={balancesAll}
@@ -267,7 +274,7 @@ function Address ({ address, className = '', filter, isFavorite, toggleFavorite
               />
             </Columar.Column>
           </Columar>
-          <Columar>
+          <Columar size='tiny'>
             <Columar.Column>
               <div data-testid='tags'>
                 <Tags
diff --git a/packages/page-addresses/src/Contacts/index.tsx b/packages/page-addresses/src/Contacts/index.tsx
index 79098e265d..a48239d943 100644
--- a/packages/page-addresses/src/Contacts/index.tsx
+++ b/packages/page-addresses/src/Contacts/index.tsx
@@ -27,7 +27,7 @@ function Overview ({ className = '', onStatusChange }: Props): React.ReactElemen
   const isLoading = useLoadingDelay();
 
   const headerRef = useRef([
-    [t('contacts'), 'start', 3]
+    [t('contacts'), 'start', 4]
   ]);
 
   useEffect((): void => {
diff --git a/packages/react-components/src/Table/index.tsx b/packages/react-components/src/Table/index.tsx
index e702185e7b..173f82073d 100644
--- a/packages/react-components/src/Table/index.tsx
+++ b/packages/react-components/src/Table/index.tsx
@@ -239,6 +239,7 @@ export default React.memo(styled(Table)`
 
       &.balance {
         min-width: 20rem;
+        padding: 0.5rem 0 0.75rem;
       }
 
       &.button {