diff --git a/packages/components-faraday/src/components/Reviewers/InviteReviewers.js b/packages/components-faraday/src/components/Reviewers/InviteReviewers.js index d0d31f9b947dee0c29544e6d1b8de26cfa5bd7bd..4b38cfaae26c281305ee65ea0a9c34fccf192432 100644 --- a/packages/components-faraday/src/components/Reviewers/InviteReviewers.js +++ b/packages/components-faraday/src/components/Reviewers/InviteReviewers.js @@ -72,7 +72,7 @@ const InviteReviewersModal = compose( /> <Row> - <Subtitle>Reviewers Info</Subtitle> + <Subtitle hidden={reviewers.length === 0}>Reviewers Info</Subtitle> {fetchingReviewers && <Spinner size={3} />} </Row> <ReviewersList @@ -131,6 +131,7 @@ const CloseIcon = styled.div` const Subtitle = styled.span` ${defaultText}; align-self: flex-start; + opacity: ${({ hidden }) => (hidden ? 0 : 1)}; margin-bottom: ${th('subGridUnit')}; text-transform: uppercase; ` diff --git a/packages/components-faraday/src/components/Reviewers/ReviewerList.js b/packages/components-faraday/src/components/Reviewers/ReviewerList.js index 83d9d1f1d02e2ca1d69f2117b3fa4b1394f6bc9f..13c092285db6d5e76d82a537667192021990dc21 100644 --- a/packages/components-faraday/src/components/Reviewers/ReviewerList.js +++ b/packages/components-faraday/src/components/Reviewers/ReviewerList.js @@ -28,36 +28,37 @@ const ReviewersList = ({ showConfirmResend, showConfirmRevoke, renderTimestamp, -}) => ( - <Root> - <ScrollContainer> - {reviewers.map((r, index) => ( - <ReviewerItem key={r.invitationId}> - <Column flex={3}> - <div> - <ReviewerName>{r.name}</ReviewerName> - {r.status === 'accepted' && ( - <AcceptedReviewer>{`Reviewer ${index + 1}`}</AcceptedReviewer> - )} - </div> - <ReviewerEmail>{r.email}</ReviewerEmail> - </Column> - <Column> - <StatusText>{r.status}</StatusText> - <DateText>{renderTimestamp(r.timestamp)}</DateText> - </Column> - {r.status !== 'accepted' && ( - <ResendRevoke - showConfirmResend={showConfirmResend(r)} - showConfirmRevoke={showConfirmRevoke(r.invitationId)} - status={r.status} - /> - )} - </ReviewerItem> - ))} - </ScrollContainer> - </Root> -) +}) => + reviewers.length > 0 && ( + <Root> + <ScrollContainer> + {reviewers.map((r, index) => ( + <ReviewerItem key={r.invitationId}> + <Column flex={3}> + <div> + <ReviewerName>{r.name}</ReviewerName> + {r.status === 'accepted' && ( + <AcceptedReviewer>{`Reviewer ${index + 1}`}</AcceptedReviewer> + )} + </div> + <ReviewerEmail>{r.email}</ReviewerEmail> + </Column> + <Column> + <StatusText>{r.status}</StatusText> + <DateText>{renderTimestamp(r.timestamp)}</DateText> + </Column> + {r.status !== 'accepted' && ( + <ResendRevoke + showConfirmResend={showConfirmResend(r)} + showConfirmRevoke={showConfirmRevoke(r.invitationId)} + status={r.status} + /> + )} + </ReviewerItem> + ))} + </ScrollContainer> + </Root> + ) export default compose( connect(null, { inviteReviewer, revokeReviewer }),