Move society unbid/unvouch (#8655)

* Move society unbid/unvouch

* Adjust

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>
   );
 }

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;
+    }
+  }
+`);

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 (

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>

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'],
     []

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} />

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]
     ]
   });