fix ProposalList ColLayout

Joystream · Nov 30, 2023 · 8488191 · 8488191
1 parent f7ba1e9
commit 8488191
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 11 deletions.
diff --git a/packages/ui/src/proposals/components/ProposalList/ProposalList.tsx b/packages/ui/src/proposals/components/ProposalList/ProposalList.tsx
@@ -9,12 +9,7 @@ import { RowGapBlock } from '@/common/components/page/PageContent'
 import { NotFoundText } from '@/common/components/typography/NotFoundText'
 import { GetSortProps } from '@/common/hooks/useSort'
 import { useMyMemberships } from '@/memberships/hooks/useMyMemberships'
-import {
-  ProposalColLayout,
-  ProposalsListHeaders,
-  ProposalListHeader,
-  ProposalColLayoutWithVoteDetails,
-} from '@/proposals/constants'
+import { ProposalColLayout, ProposalsListHeaders, ProposalListHeader } from '@/proposals/constants'
 import { Proposal } from '@/proposals/types'
 
 import { ProposalListItem } from './ProposalListItem'
@@ -40,7 +35,7 @@ export const ProposalList = ({ proposals, getSortProps, isPast, isLoading }: Pro
 
   return (
     <RowGapBlock gap={4}>
-      <ProposalsListHeaders $colLayout={isCouncilMember ? ProposalColLayoutWithVoteDetails : ProposalColLayout}>
+      <ProposalsListHeaders $colLayout={ProposalColLayout(isCouncilMember, isPast)}>
         {getSortProps ? <SortHeader {...getSortProps('title')}>Title</SortHeader> : <ProposalListHeader />}
         <ProposalListHeader>Stage</ProposalListHeader>
         <ProposalListHeader>Proposer</ProposalListHeader>

diff --git a/packages/ui/src/proposals/components/ProposalList/ProposalListItem.tsx b/packages/ui/src/proposals/components/ProposalList/ProposalListItem.tsx
@@ -13,7 +13,7 @@ import { Colors, Overflow } from '@/common/constants'
 import { camelCaseToText } from '@/common/helpers'
 import { toDDMMYY } from '@/common/utils/dates'
 import { MemberInfo } from '@/memberships/components'
-import { ProposalColLayout, ProposalColLayoutWithVoteDetails } from '@/proposals/constants'
+import { ProposalColLayout } from '@/proposals/constants'
 import { ProposalsRoutes } from '@/proposals/constants/routes'
 import { isProposalActive } from '@/proposals/model/proposalStatus'
 import { Proposal } from '@/proposals/types'
@@ -61,7 +61,7 @@ export const ProposalListItem = ({ proposal, isPast, memberId, isCouncilMember }
     <ProposalItem
       as={GhostRouterLink}
       to={generatePath(ProposalsRoutes.preview, { id: proposal.id })}
-      $colLayout={isCouncilMember ? ProposalColLayoutWithVoteDetails : ProposalColLayout}
+      $colLayout={ProposalColLayout(isCouncilMember, isPast)}
       $isPast={!isProposalActive(proposal.status)}
     >
       <FieldWrapper>

diff --git a/packages/ui/src/proposals/constants/styles.ts b/packages/ui/src/proposals/constants/styles.ts
@@ -2,8 +2,8 @@ import styled from 'styled-components'
 
 import { ListHeaders, ListHeader } from '@/common/components/List/ListHeader'
 
-export const ProposalColLayout = '296px 148px 156px 60px'
-export const ProposalColLayoutWithVoteDetails = ProposalColLayout + ' 80px'
+export const ProposalColLayout = (isCouncilMember?: boolean, isPast?: boolean) =>
+  `296px 148px 156px${isPast ? ' 60px' : ''}${isCouncilMember ? ' 80px' : ''}`
 
 export const ProposalsListHeaders = styled(ListHeaders)`
   padding-right: 16px;