Adjust bounty expanded rows (#4653)

packages/page-bounties/src/Bounties.tsx

@@ -45,17 +45,19 @@ function Bounties ({ className }: Props): React.ReactElement {
         header={headerRef.current}
       >
         {bounties && bestNumber &&
-        bounties.sort((a, b) => b.index.cmp(a.index))
-          .map(({ bounty, description, index, proposals }) => (
-            <Bounty
-              bestNumber={bestNumber}
-              bounty={bounty}
-              description={description}
-              index={index}
-              key={index.toNumber()}
-              proposals={proposals}
-            />
-          ))}
+          bounties
+            .sort((a, b) => b.index.cmp(a.index))
+            .map(({ bounty, description, index, proposals }) => (
+              <Bounty
+                bestNumber={bestNumber}
+                bounty={bounty}
+                description={description}
+                index={index}
+                key={index.toNumber()}
+                proposals={proposals}
+              />
+            ))
+        }
       </Table>
     </div>
   );

packages/page-bounties/src/Bounty.tsx

@@ -64,7 +64,7 @@ function Bounty ({ bestNumber, bounty, className = '', description, index, propo
 
   return (
     <>
-      <tr className={className}>
+      <tr className={`${className}${isExpanded ? ' noBorder' : ''} isOdd`}>
         <td>
           <BountyStatusView bountyStatus={bountyStatus}/>
         </td>
@@ -153,10 +153,8 @@ function Bounty ({ bestNumber, bounty, className = '', description, index, propo
           </div>
         </td>
       </tr>
-      <tr className={className}
-        style={{ visibility: isExpanded ? 'visible' : 'collapse' }}>
-        <td
-          colSpan={2}>
+      <tr className={`${className} ${isExpanded ? 'isExpanded' : 'isCollapsed'} isOdd`}>
+        <td colSpan={2}>
           <div className='label-column-left'>
             <div className='label'>{t('Proposer')}</div>
             <AddressSmall value={proposer} />
@@ -166,8 +164,7 @@ function Bounty ({ bestNumber, bounty, className = '', description, index, propo
             {index.toString()}
           </div>
         </td>
-        <td
-          colSpan={2}>
+        <td colSpan={2}>
           <div className='label-column-right'>
             <div className='label'>{t('Bond')}</div>
             <div className='inline-balance'><FormatBalance value={bond} /></div>
@@ -206,6 +203,14 @@ function Bounty ({ bestNumber, bounty, className = '', description, index, propo
 }
 
 export default React.memo(styled(Bounty)(({ theme }: ThemeProps) => `
+  &.isCollapsed {
+    visibility: collapse;
+  }
+
+  &.isExpanded {
+    visibility: visible;
+  }
+
   .description-column {
     max-width: 200px;
 
@@ -272,11 +277,11 @@ export default React.memo(styled(Bounty)(({ theme }: ThemeProps) => `
   }
 
   .label-column-right {
-    padding: 0 0 1.7rem;
+    padding: 0 0 0.75rem;
   }
 
   .label-column-left {
-    padding: 0 0 1.3rem;
+    padding: 0 0 0.75rem;
   }
 
   & .td-info-action-row {

packages/page-bounties/src/index.tsx

@@ -8,7 +8,7 @@ import { Tabs } from '@polkadot/react-components';
 import { ThemeProps } from '@polkadot/react-components/types';
 
 import Bounties from './Bounties';
-import { bountyBorderColor, bountyOddRowBackground } from './theme';
+import { bountyBorderColor } from './theme';
 import { useTranslation } from './translate';
 
 export { default as useCounter } from './useCounter';
@@ -75,18 +75,18 @@ export default React.memo(styled(BountiesApp)(({ theme }: ThemeProps) => `
   }
 
   tbody tr {
-    &:nth-child(odd) {
-      background: ${bountyOddRowBackground[theme.theme]};
+    &.noBorder td {
+      border-bottom: 1px solid transparent;
+    }
+
+    &:nth-child(even) td {
+      padding: 0 1rem 1.4rem;
     }
 
     &:nth-child(odd) td {
       vertical-align: middle;
     }
 
-    &:nth-child(even) {
-      background: ${theme.bgPage};
-    }
-
     &:first-child {
       td {
         border-top: 1px solid  ${bountyBorderColor[theme.theme]};

packages/page-bounties/src/theme.ts

@@ -8,15 +8,10 @@ type bountyTheme = {
 
 export const bountyBorderColor: bountyTheme = {
   // align with table
-  dark: '#eeecea', // '#2f313c',
+  dark: '#26272c', // '#2f313c',
   light: '#eeecea' // '#dfdfdf'
 };
 
-export const bountyOddRowBackground: bountyTheme = {
-  dark: '#111218',
-  light: '#fff'
-};
-
 export const bountyLabelColor: bountyTheme = {
   dark: '#757575',
   light: '#8B8B8B'