From e299882fb4efbc4b2d7e68078cecde78482548bc Mon Sep 17 00:00:00 2001
From: Jaco <jacogr@gmail.com>
Date: Tue, 3 Jan 2023 10:44:33 +0200
Subject: [PATCH] Adjust accounts layout (#8677)

* Adjust accounts layout

* Adjust
---
 .../page-accounts/src/Accounts/Account.tsx    | 26 +++++----
 .../page-addresses/src/Contacts/Address.tsx   | 28 +++++-----
 .../src/Referenda/RefOngoing.tsx              |  2 +-
 .../src/Referenda/Referendum.tsx              | 12 ++--
 packages/react-components/src/Table/index.tsx | 56 +++++++++----------
 5 files changed, 65 insertions(+), 59 deletions(-)

diff --git a/packages/page-accounts/src/Accounts/Account.tsx b/packages/page-accounts/src/Accounts/Account.tsx
index 28280b023c..d213cdefee 100644
--- a/packages/page-accounts/src/Accounts/Account.tsx
+++ b/packages/page-accounts/src/Accounts/Account.tsx
@@ -684,18 +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>
+        <td className='actions button'>
+          <Button.Group>
+            {isFunction(api.api.tx.balances?.transfer) && (
+              <Button
+                className='send-button'
+                icon='paper-plane'
+                label={t<string>('send')}
+                onClick={toggleTransfer}
+              />
+            )}
             <Popup
               isDisabled={!menuItems.length}
               value={
@@ -704,6 +702,10 @@ function Account ({ account: { address, meta }, className = '', delegation, filt
                 </Menu>
               }
             />
+          </Button.Group>
+        </td>
+        <td className='actions button'>
+          <div>
             <ExpandButton
               expanded={isExpanded}
               onClick={toggleIsExpanded}
diff --git a/packages/page-addresses/src/Contacts/Address.tsx b/packages/page-addresses/src/Contacts/Address.tsx
index 67a7da860f..cc58262ee1 100644
--- a/packages/page-addresses/src/Contacts/Address.tsx
+++ b/packages/page-addresses/src/Contacts/Address.tsx
@@ -217,20 +217,22 @@ function Address ({ address, className = '', filter, isFavorite, toggleFavorite
             </>
           )}
         </td>
-        <td className='button'>
-          {isFunction(api.api.tx.balances?.transfer) && (
-            <Button
-              className='send-button'
-              icon='paper-plane'
-              key='send'
-              label={t<string>('send')}
-              onClick={_toggleTransfer}
-            />
-          )}
-        </td>
-        <td className='actions'>
-          <div>
+        <td className='actions button'>
+          <Button.Group>
+            {isFunction(api.api.tx.balances?.transfer) && (
+              <Button
+                className='send-button'
+                icon='paper-plane'
+                key='send'
+                label={t<string>('send')}
+                onClick={_toggleTransfer}
+              />
+            )}
             <Popup value={PopupDropdown} />
+          </Button.Group>
+        </td>
+        <td className='actions button'>
+          <div>
             <ExpandButton
               expanded={isExpanded}
               onClick={toggleIsExpanded}
diff --git a/packages/page-referenda/src/Referenda/RefOngoing.tsx b/packages/page-referenda/src/Referenda/RefOngoing.tsx
index 5986b83589..e46489a56a 100644
--- a/packages/page-referenda/src/Referenda/RefOngoing.tsx
+++ b/packages/page-referenda/src/Referenda/RefOngoing.tsx
@@ -131,7 +131,7 @@ function Ongoing ({ isMember, members, palletReferenda, palletVote, ranks, track
           value={tally.ayes}
         />
       </td>
-      <td className='button'>
+      <td className='actions button'>
         <Vote
           id={id}
           isConvictionVote={isConvictionVote}
diff --git a/packages/page-referenda/src/Referenda/Referendum.tsx b/packages/page-referenda/src/Referenda/Referendum.tsx
index 6851aa8ba8..66210b2a38 100644
--- a/packages/page-referenda/src/Referenda/Referendum.tsx
+++ b/packages/page-referenda/src/Referenda/Referendum.tsx
@@ -375,11 +375,13 @@ function Referendum (props: Props): React.ReactElement<Props> {
           <h1>{formatNumber(id)}</h1>
         </td>
         <Component {...props} />
-        <td className='action'>
-          <ExpandButton
-            expanded={isExpanded}
-            onClick={toggleExpanded}
-          />
+        <td className='actions'>
+          <div>
+            <ExpandButton
+              expanded={isExpanded}
+              onClick={toggleExpanded}
+            />
+          </div>
         </td>
       </tr>
       <tr className={`${className} ${isExpanded ? 'isExpanded' : 'isCollapsed'}`}>
diff --git a/packages/react-components/src/Table/index.tsx b/packages/react-components/src/Table/index.tsx
index 173f82073d..16ff3dcb7c 100644
--- a/packages/react-components/src/Table/index.tsx
+++ b/packages/react-components/src/Table/index.tsx
@@ -69,12 +69,12 @@ function Table ({ children, className = '', empty, emptySpinner, filter, footer,
       {splitBody
         ? (
           <>
-            <table className={tableClassName}>
+            <table className={`${tableClassName} noMargin`}>
               {headerNode}
             </table>
             <Columar isPadded={false}>
               <Columar.Column>
-                <table className={tableClassName}>
+                <table className={`${tableClassName} noMargin`}>
                   <Body>
                     {splitBody[0]}
                   </Body>
@@ -119,10 +119,6 @@ export default React.memo(styled(Table)`
   width: 100%;
 
   &.isSplit {
-    > table:first-child {
-      margin-bottom: 0;
-    }
-
     > .ui--Columar {
       margin-bottom: 1.5rem;
     }
@@ -140,7 +136,7 @@ export default React.memo(styled(Table)`
       table-layout: fixed;
     }
 
-    &:not(.isInline) {
+    &:not(.isInline):not(.noMargin) {
       margin-bottom: 1.5rem;
     }
 
@@ -228,6 +224,30 @@ export default React.memo(styled(Table)`
         }
       }
 
+      &.actions {
+        padding-left: 0.35rem;
+        width: 1%;
+
+        > div {
+          display: flex;
+          align-items: center;
+          flex-wrap: nowrap;
+          justify-content: flex-end;
+
+          & > * + * {
+            margin-left: 0.35rem;
+          }
+
+          .ui--Button {
+            white-space: nowrap;
+          }
+        }
+
+        &:not(:last-child) {
+          padding-right: 0;
+        }
+      }
+
       &.address {
         min-width: 11rem;
         overflow-x: hidden;
@@ -243,7 +263,7 @@ export default React.memo(styled(Table)`
       }
 
       &.button {
-        padding: 0.25rem 0.5rem 0.5rem;
+        padding: 0.25rem 0.35rem 0.5rem;
         text-align: right;
         white-space: nowrap;
 
@@ -305,26 +325,6 @@ export default React.memo(styled(Table)`
         text-align: right;
       }
 
-      &.actions {
-        padding-left: 0;
-        width: 1%;
-
-        > div {
-          display: flex;
-          align-items: center;
-          flex-wrap: nowrap;
-          justify-content: flex-end;
-
-          & > * + * {
-            margin-left: 0.35rem;
-          }
-
-          .ui--Button {
-            white-space: nowrap;
-          }
-        }
-      }
-
       &.relative {
         position: relative;