Adjust bounty rows (#4728)

packages/page-bounties/src/Bounties.tsx

@@ -41,12 +41,13 @@ function Bounties ({ className }: Props): React.ReactElement {
         {bounties && bestNumber &&
           bounties
             .sort((a, b) => b.index.cmp(a.index))
-            .map(({ bounty, description, index, proposals }) => (
+            .map(({ bounty, description, index, proposals }, count) => (
               <Bounty
                 bestNumber={bestNumber}
                 bounty={bounty}
                 description={description}
                 index={index}
+                isEven={!!(count % 2)}
                 key={index.toNumber()}
                 proposals={proposals}
               />
@@ -59,27 +60,16 @@ function Bounties ({ className }: Props): React.ReactElement {
 
 export default React.memo(styled(Bounties)`
   .bounties-table-wrapper table {
-    background: none;
-
-    &::before {
-      background: none;
-    }
-
     tr {
       td,
       &:not(.filter) th {
-        &:first-child {
-          padding-left: 1.14rem;
-        }
-
         &:last-child {
           padding-right: 1.14rem;
         }
       }
     }
   }
-
-  .ui--IdentityIcon {
+.ui--IdentityIcon {
     margin-right: 0.42rem;
   }
 

packages/page-bounties/src/Bounty.tsx

@@ -31,12 +31,13 @@ interface Props {
   className?: string;
   description: string;
   index: BountyIndex;
+  isEven: boolean;
   proposals?: DeriveCollectiveProposal[];
 }
 
 const EMPTY_CELL = '-';
 
-function Bounty ({ bestNumber, bounty, className = '', description, index, proposals }: Props): React.ReactElement<Props> {
+function Bounty ({ bestNumber, bounty, className = '', description, index, isEven, proposals }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const [isExpanded, setIsExpanded] = useState(false);
 
@@ -65,7 +66,7 @@ function Bounty ({ bestNumber, bounty, className = '', description, index, propo
 
   return (
     <>
-      <tr className={`${className}${isExpanded ? ' noBorder' : ''} isOdd`}>
+      <tr className={`${className}${isExpanded ? ' noBorder' : ''} ${isEven ? 'isEven' : 'isOdd'}`}>
         <td className='number'><h1>{formatNumber(index)}</h1></td>
         <td
           className='description-column'
@@ -154,7 +155,7 @@ function Bounty ({ bestNumber, bounty, className = '', description, index, propo
           </div>
         </td>
       </tr>
-      <tr className={`${className} ${isExpanded ? 'isExpanded' : 'isCollapsed'} isOdd`}>
+      <tr className={`${className} ${isExpanded ? 'isExpanded' : 'isCollapsed'} ${isEven ? 'isEven' : 'isOdd'}`}>
         <td colSpan={2}>
           <div className='label-column-left'>
             <div className='label'>{t('Proposer')}</div>