Address rwd qa test issues (#4661)

* fix My vote column in the proposal list * fix qa-issues * lint fix * fix ProposalList ColLayout * Update packages/ui/src/proposals/constants/styles.ts Co-authored-by: Theophile Sandoz <[email protected]> --------- Co-authored-by: Theophile Sandoz <[email protected]>
Joystream · Dec 4, 2023 · 04252e3 · 04252e3 · vercel · Dec 4, 2023
1 parent 192f6f3
commit 04252e3
Show file tree

Hide file tree

Showing 7 changed files with 14 additions and 4 deletions.
diff --git a/packages/ui/src/council/components/election/CandidateCard/CandidateCard.tsx b/packages/ui/src/council/components/election/CandidateCard/CandidateCard.tsx
@@ -209,8 +209,14 @@ const CandidateCardStakeAndControls = styled.div`
   align-items: flex-end;
   width: fit-content;
   column-gap: 32px;
+  row-gap: 8px;
   margin-top: auto;
   flex-wrap: wrap;
+
+  @media (min-width: 1440px) {
+    flex-wrap: nowrap;
+    min-width: fit-content;
+  }
 `
 
 const CandidateCardStatistics = styled.div`

diff --git a/packages/ui/src/council/modals/AnnounceCandidacy/components/StakeStep.tsx b/packages/ui/src/council/modals/AnnounceCandidacy/components/StakeStep.tsx
@@ -60,7 +60,7 @@ export const StakeStep = ({ candidacyMember, minStake, errorChecker, errorMessag
               name="staking.account"
               minBalance={minStake}
               lockType="Council Candidate"
-              variant={isMobile ? 's' : size === 'md' ? 'm' : 'l'}
+              variant={size === 'lg' ? 'l' : 's'}
             />
           </InputComponent>
           <RowGapBlock gap={8}>

diff --git a/packages/ui/src/memberships/components/MemberProfile/MemberDetails.tsx b/packages/ui/src/memberships/components/MemberProfile/MemberDetails.tsx
@@ -149,4 +149,6 @@ const AboutInvite = styled.div`
   display: flex;
   justify-content: space-between;
   width: 100%;
+  align-items: center;
+  gap: 8px;
 `
diff --git a/packages/ui/src/memberships/components/MembersSection.tsx b/packages/ui/src/memberships/components/MembersSection.tsx
@@ -86,4 +86,5 @@ const MembershipsGroup = styled.div`
 const MembershipsHeaders = styled(ListHeaders)`
   grid-area: accountstablenav;
   grid-column-gap: 16px;
+  padding: 0 24px;
 `
diff --git a/packages/ui/src/proposals/components/ProposalList/ProposalList.tsx b/packages/ui/src/proposals/components/ProposalList/ProposalList.tsx
@@ -35,7 +35,7 @@ export const ProposalList = ({ proposals, getSortProps, isPast, isLoading }: Pro
 
   return (
     <RowGapBlock gap={4}>
-      <ProposalsListHeaders $colLayout={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
@@ -61,7 +61,7 @@ export const ProposalListItem = ({ proposal, isPast, memberId, isCouncilMember }
     <ProposalItem
       as={GhostRouterLink}
       to={generatePath(ProposalsRoutes.preview, { id: proposal.id })}
-      $colLayout={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,7 +2,8 @@ import styled from 'styled-components'
 
 import { ListHeaders, ListHeader } from '@/common/components/List/ListHeader'
 
-export const ProposalColLayout = '296px 148px 156px 60px 1fr'
+export const ProposalColLayout = (isCouncilMember?: boolean, isPast?: boolean) =>
+  `296px 148px 156px${isPast ? ' 60px' : isCouncilMember ? ' 80px' : ''}`
 
 export const ProposalsListHeaders = styled(ListHeaders)`
   padding-right: 16px;