From 5052c631410d02bb8f82a3da91ff0d9338ccc7e9 Mon Sep 17 00:00:00 2001
From: Jaco <jacogr@gmail.com>
Date: Thu, 29 Dec 2022 12:33:52 +0200
Subject: [PATCH] Move society unbid/unvouch (#8655)

* Move society unbid/unvouch

* Adjust
---
 packages/page-society/src/Candidates/Bid.tsx  | 48 +++++++++----------
 .../page-society/src/Candidates/BidType.tsx   | 26 +++++++---
 packages/page-society/src/Candidates/Bids.tsx |  5 +-
 .../page-society/src/Candidates/Candidate.tsx |  4 +-
 .../src/Candidates/Candidates.tsx             |  2 +-
 .../page-society/src/Suspended/Suspension.tsx |  4 +-
 packages/page-society/src/Suspended/index.tsx |  4 +-
 7 files changed, 54 insertions(+), 39 deletions(-)

diff --git a/packages/page-society/src/Candidates/Bid.tsx b/packages/page-society/src/Candidates/Bid.tsx
index 81f4a0102e..66bdf09ba2 100644
--- a/packages/page-society/src/Candidates/Bid.tsx
+++ b/packages/page-society/src/Candidates/Bid.tsx
@@ -49,7 +49,29 @@ function BidRow ({ index, value: { kind, value, who } }: Props): React.ReactElem
       <td className='address all'>
         <AddressSmall value={who} />
       </td>
-      <BidType value={kind} />
+      <td className='start'>
+        <BidType value={kind} />
+        {kind.isVouch
+          ? isVoucher && (
+            <TxButton
+              accountId={voucher}
+              icon='times'
+              label={t<string>('Unvouch')}
+              params={[index]}
+              tx={api.tx.society.unvouch}
+            />
+          )
+          : isBidder && (
+            <TxButton
+              accountId={who}
+              icon='times'
+              label={t<string>('Unbid')}
+              params={[index]}
+              tx={api.tx.society.unbid}
+            />
+          )
+        }
+      </td>
       <td className='number'>
         <FormatBalance value={value} />
       </td>
@@ -58,30 +80,6 @@ function BidRow ({ index, value: { kind, value, who } }: Props): React.ReactElem
           <FormatBalance value={tip} />
         )}
       </td>
-      <td className='button'>
-        {kind.isVouch
-          ? (
-            <TxButton
-              accountId={voucher}
-              icon='times'
-              isDisabled={!isVoucher}
-              label={t<string>('Unvouch')}
-              params={[index]}
-              tx={api.tx.society.unvouch}
-            />
-          )
-          : (
-            <TxButton
-              accountId={who}
-              icon='times'
-              isDisabled={!isBidder}
-              label={t<string>('Unbid')}
-              params={[index]}
-              tx={api.tx.society.unbid}
-            />
-          )
-        }
-      </td>
     </tr>
   );
 }
diff --git a/packages/page-society/src/Candidates/BidType.tsx b/packages/page-society/src/Candidates/BidType.tsx
index cd9ed4e752..3df49a00ed 100644
--- a/packages/page-society/src/Candidates/BidType.tsx
+++ b/packages/page-society/src/Candidates/BidType.tsx
@@ -4,14 +4,16 @@
 import type { PalletSocietyBidKind } from '@polkadot/types/lookup';
 
 import React, { useMemo } from 'react';
+import styled from 'styled-components';
 
 import { AddressSmall } from '@polkadot/react-components';
 
 interface Props {
+  className?: string;
   value?: PalletSocietyBidKind;
 }
 
-function BidType ({ value }: Props): React.ReactElement<Props> {
+function BidType ({ className, value }: Props): React.ReactElement<Props> {
   const vouchId = useMemo(
     () => value?.isVouch
       ? value.asVouch[0]
@@ -20,11 +22,23 @@ function BidType ({ value }: Props): React.ReactElement<Props> {
   );
 
   return (
-    <>
-      <td className='no-pad-right'>{value && value.type}</td>
-      <td>{vouchId && <AddressSmall value={vouchId} />}</td>
-    </>
+    <div className={className}>
+      <div>{value && value.type}</div>
+      {vouchId && <AddressSmall value={vouchId} />}
+    </div>
   );
 }
 
-export default React.memo(BidType);
+export default React.memo(styled(BidType)`
+  align-items: center;
+  display: flex;
+  flex-wrap: no-wrap;
+
+  > div {
+    flex: 0;
+
+    &:first-child {
+      padding-right: 1.5rem;
+    }
+  }
+`);
diff --git a/packages/page-society/src/Candidates/Bids.tsx b/packages/page-society/src/Candidates/Bids.tsx
index 4ab86a202e..3138c2985c 100644
--- a/packages/page-society/src/Candidates/Bids.tsx
+++ b/packages/page-society/src/Candidates/Bids.tsx
@@ -22,10 +22,9 @@ function Bids ({ className }: Props): React.ReactElement<Props> {
 
   const headerRef = useRef([
     [t('bids'), 'start'],
-    [t('bid kind'), 'start', 2],
+    [t('bid kind'), 'start'],
     [t('value')],
-    [t('tip')],
-    []
+    [t('tip')]
   ]);
 
   return (
diff --git a/packages/page-society/src/Candidates/Candidate.tsx b/packages/page-society/src/Candidates/Candidate.tsx
index 539742c268..e12e24f1e7 100644
--- a/packages/page-society/src/Candidates/Candidate.tsx
+++ b/packages/page-society/src/Candidates/Candidate.tsx
@@ -42,7 +42,9 @@ function Candidate ({ allMembers, isMember, ownMembers, value: { accountId, kind
       <td className='address all'>
         <AddressSmall value={accountId} />
       </td>
-      <BidType value={kind} />
+      <td className='start'>
+        <BidType value={kind} />
+      </td>
       <td className='number'>
         <FormatBalance value={value} />
       </td>
diff --git a/packages/page-society/src/Candidates/Candidates.tsx b/packages/page-society/src/Candidates/Candidates.tsx
index da732050a3..9e7578b74d 100644
--- a/packages/page-society/src/Candidates/Candidates.tsx
+++ b/packages/page-society/src/Candidates/Candidates.tsx
@@ -23,7 +23,7 @@ function Candidates ({ allMembers, candidates, className = '', isMember, ownMemb
 
   const headerRef = useRef([
     [t('candidates'), 'start'],
-    [t('bid kind'), 'start', 2],
+    [t('bid kind'), 'start'],
     [t('value')],
     [undefined, 'expand'],
     []
diff --git a/packages/page-society/src/Suspended/Suspension.tsx b/packages/page-society/src/Suspended/Suspension.tsx
index f8282405e5..debfcbf894 100644
--- a/packages/page-society/src/Suspended/Suspension.tsx
+++ b/packages/page-society/src/Suspended/Suspension.tsx
@@ -23,7 +23,9 @@ function Suspension ({ balance, bid, value }: Props): React.ReactElement<Props>
       <td className='address all'>
         <AddressSmall value={value} />
       </td>
-      <BidType value={bid} />
+      <td className='start'>
+        <BidType value={bid} />
+      </td>
       <td className='number'>
         {balance && (
           <FormatBalance value={balance} />
diff --git a/packages/page-society/src/Suspended/index.tsx b/packages/page-society/src/Suspended/index.tsx
index 665e6f4f3d..4e5a639c71 100644
--- a/packages/page-society/src/Suspended/index.tsx
+++ b/packages/page-society/src/Suspended/index.tsx
@@ -52,11 +52,11 @@ function Suspended ({ className }: Props): React.ReactElement<Props> {
   const headerRef = useRef({
     candidates: [
       [t('candidates'), 'start'],
-      [t('bid kind'), 'start', 2],
+      [t('bid kind'), 'start'],
       [t('value')]
     ],
     members: [
-      [t('members'), 'start']
+      [t('members'), 'start', 3]
     ]
   });