From 207fae5961be092a9e271e5bc22af24f6a9584c2 Mon Sep 17 00:00:00 2001
From: Jaco <jacogr@gmail.com>
Date: Thu, 29 Dec 2022 09:57:35 +0200
Subject: [PATCH] Extract Table action classes (#8646)

* Extract Table action classes

* Extract from bounty
---
 .../page-accounts/src/Accounts/Account.tsx    | 28 +----------
 .../page-addresses/src/Contacts/Address.tsx   | 28 +----------
 packages/page-bounties/src/Bounty.tsx         | 49 ++++++-------------
 packages/react-components/src/Table/index.tsx | 19 +++++++
 4 files changed, 38 insertions(+), 86 deletions(-)

diff --git a/packages/page-accounts/src/Accounts/Account.tsx b/packages/page-accounts/src/Accounts/Account.tsx
index b41c59c8e2..f7ccdf6d21 100644
--- a/packages/page-accounts/src/Accounts/Account.tsx
+++ b/packages/page-accounts/src/Accounts/Account.tsx
@@ -694,8 +694,8 @@ function Account ({ account: { address, meta }, className = '', delegation, filt
             withExtended={false}
           />
         </td>
-        <td className='fast-actions'>
-          <div className='fast-actions-row'>
+        <td className='actions'>
+          <div>
             {isFunction(api.api.tx.balances?.transfer) && (
               <Button
                 className='send-button'
@@ -786,28 +786,4 @@ export default React.memo(styled(Account)`
   .devBadge {
     opacity: 0.65;
   }
-
-  && td.button {
-    padding-bottom: 0.5rem;
-  }
-
-  && td.fast-actions {
-    padding-left: 0.2rem;
-    padding-right: 1rem;
-    width: 1%;
-
-    .fast-actions-row {
-      display: flex;
-      align-items: center;
-      justify-content: flex-end;
-
-      & > * + * {
-        margin-left: 0.35rem;
-      }
-
-      .send-button {
-        min-width: 6.5rem;
-      }
-    }
-  }
 `);
diff --git a/packages/page-addresses/src/Contacts/Address.tsx b/packages/page-addresses/src/Contacts/Address.tsx
index b379fd8c7f..84f1add723 100644
--- a/packages/page-addresses/src/Contacts/Address.tsx
+++ b/packages/page-addresses/src/Contacts/Address.tsx
@@ -227,8 +227,8 @@ function Address ({ address, className = '', filter, isFavorite, toggleFavorite
             withExtended={false}
           />
         </td>
-        <td className='fast-actions-addresses'>
-          <div className='fast-actions-row'>
+        <td className='actions'>
+          <div>
             {isFunction(api.api.tx.balances?.transfer) && (
               <Button
                 className='send-button'
@@ -306,28 +306,4 @@ export default React.memo(styled(Address)`
   .ui--Columar {
     margin: 0.5rem 0 1.5rem 0;
   }
-
-  && td.button {
-    padding-bottom: 0.5rem;
-  }
-
-  .fast-actions-addresses {
-    padding-left: 0.2rem;
-    padding-right: 1rem;
-    width: 1%;
-
-    .fast-actions-row {
-      display: flex;
-      align-items: center;
-      justify-content: flex-end;
-
-      & > * + * {
-        margin-left: 0.35rem;
-      }
-
-      .send-button {
-        min-width: 6.5rem;
-      }
-    }
-  }
 `);
diff --git a/packages/page-bounties/src/Bounty.tsx b/packages/page-bounties/src/Bounty.tsx
index 18fd7cd89f..181ee3aa3a 100644
--- a/packages/page-bounties/src/Bounty.tsx
+++ b/packages/page-bounties/src/Bounty.tsx
@@ -100,28 +100,24 @@ function Bounty ({ bestNumber, bounty, className = '', description, index, propo
             status={status}
           />
         </td>
-        <td className='td-info-action-row'>
-          <div className='td-row'>
-            <BountyInfos
-              beneficiary={beneficiary}
+        <td>
+          <BountyInfos
+            beneficiary={beneficiary}
+            proposals={proposals}
+            status={status}
+          />
+        </td>
+        <td className='actions'>
+          <div>
+            <BountyActions
+              bestNumber={bestNumber}
+              description={description}
+              fee={fee}
+              index={index}
               proposals={proposals}
               status={status}
+              value={value}
             />
-            <div className='bounty-action-row'>
-              <BountyActions
-                bestNumber={bestNumber}
-                description={description}
-                fee={fee}
-                index={index}
-                proposals={proposals}
-                status={status}
-                value={value}
-              />
-            </div>
-          </div>
-        </td>
-        <td className='fast-actions'>
-          <div className='fast-actions-row'>
             <LinkExternal
               data={index}
               type='bounty'
@@ -208,21 +204,6 @@ export default React.memo(styled(Bounty)`
     display: inline-flex;
   }
 
-  & td.fast-actions {
-    padding-left: 0.2rem;
-    width: 1%;
-
-    .fast-actions-row {
-      align-items: center;
-      display: flex;
-      justify-content: flex-end;
-
-      & > * + * {
-        margin-left: 0.285rem;
-      }
-    }
-  }
-
   & .inline-balance {
     width: 50%;
     font-size: 1rem;
diff --git a/packages/react-components/src/Table/index.tsx b/packages/react-components/src/Table/index.tsx
index a80952c90e..114a8e93c4 100644
--- a/packages/react-components/src/Table/index.tsx
+++ b/packages/react-components/src/Table/index.tsx
@@ -266,6 +266,25 @@ export default React.memo(styled(Table)`
         text-align: right;
       }
 
+      &.actions {
+        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;