Skip to content

Commit

Permalink
style(feedback): adjust some feedback list css (#73983)
Browse files Browse the repository at this point in the history 
- closes #73628
- adjust uf linked card styles so they align with the [figma
designs](https://www.figma.com/design/DIlstrVINTYNJad4BS0f9L/Assets%3A-User-Feedback-Product-UI?node-id=2-2&t=30176FG9PWWaw0zS-0)

major changes:
- entire purple border when item selected (add back in card spacing)
- better spacing between grid
- updated font sizes
- we only show 1 line of preview now to have more consistent spacing

| before | after | figma |
| --- | --- | --- |
| <img width="420" alt="SCR-20240711-mhzt"
src="https://github.com/getsentry/sentry/assets/56095982/3f2f9549-58ec-4bbb-a5b2-43e3047e8da5">|
<img width="406" alt="SCR-20240711-mhui"
src="https://github.com/getsentry/sentry/assets/56095982/f8a2df8d-ddf4-4303-8558-139e8be4c83b">
| <img width="426" alt="SCR-20240711-mime"
src="https://github.com/getsentry/sentry/assets/56095982/05e022fb-c44a-4b02-b906-5ceb1059eff1">
|



before:


https://github.com/getsentry/sentry/assets/56095982/f325a915-762b-4353-b710-ae3e452daed2

after:


https://github.com/getsentry/sentry/assets/56095982/b6c3caff-2fa7-42a2-93fa-e09a0fa9016f
  • Loading branch information
@michellewzhang
michellewzhang committed Jul 12, 2024
1 parent 1db0ba7 commit 0b130ee
Show file tree
Hide file tree
Showing 2 changed files with 128 additions and 107 deletions.
2 changes: 1 addition & 1 deletion static/app/components/feedback/list/feedbackListHeader.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -96,7 +96,7 @@ const HeaderPanel = styled('div')`
`;

const HeaderPanelItem = styled('div')`
padding: ${space(1)} ${space(1.5)};
padding: ${space(1)} ${space(1.5)} ${space(1)} 18px;
display: flex;
gap: ${space(1)};
align-items: center;
Expand Down
233 changes: 127 additions & 106 deletions static/app/components/feedback/list/feedbackListItem.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,129 +52,128 @@ function FeedbackListItem({feedbackItem, isSelected, onSelect, style}: Props) {
const hasComments = feedbackItem.numComments > 0;

return (
<LinkedFeedbackCard
style={style}
data-selected={isOpen}
to={{
pathname: normalizeUrl(`/organizations/${organization.slug}/feedback/`),
query: {
...location.query,
referrer: 'feedback_list_page',
feedbackSlug: `${feedbackItem.project.slug}:${feedbackItem.id}`,
},
}}
onClick={() => {
trackAnalytics('feedback.list-item-selected', {organization});
}}
>
<InteractionStateLayer />

<Row
style={{gridArea: 'checkbox'}}
onClick={e => {
e.stopPropagation();
<CardSpacing style={style}>
<LinkedFeedbackCard
data-selected={isOpen}
to={{
pathname: normalizeUrl(`/organizations/${organization.slug}/feedback/`),
query: {
...location.query,
referrer: 'feedback_list_page',
feedbackSlug: `${feedbackItem.project.slug}:${feedbackItem.id}`,
},
}}
onClick={() => {
trackAnalytics('feedback.list-item-selected', {organization});
}}
>
<Checkbox
disabled={isSelected === 'all-selected'}
checked={isSelected !== false}
onChange={e => {
onSelect(e.target.checked);
<InteractionStateLayer />

<Row
style={{gridArea: 'checkbox'}}
onClick={e => {
e.stopPropagation();
}}
/>
</Row>
>
<Checkbox
disabled={isSelected === 'all-selected'}
checked={isSelected !== false}
onChange={e => {
onSelect(e.target.checked);
}}
/>
</Row>

<TextOverflow style={{gridArea: 'user'}}>
<strong>
<ContactRow>
{feedbackItem.metadata.name ??
feedbackItem.metadata.contact_email ??
t('Anonymous User')}
</strong>
</TextOverflow>

<TimeSince date={feedbackItem.firstSeen} style={{gridArea: 'time'}} />

{feedbackItem.hasSeen ? null : (
<DotRow style={{gridArea: 'unread'}}>
<IconCircleFill size="xs" color="purple400" />
</DotRow>
)}

<PreviewRow align="flex-start" justify="flex-start" style={{gridArea: 'message'}}>
<StyledTextOverflow>{feedbackItem.metadata.message}</StyledTextOverflow>
</PreviewRow>

<BottomGrid style={{gridArea: 'bottom'}}>
<Row justify="flex-start" gap={space(0.75)}>
<StyledProjectBadge
project={feedbackItem.project}
avatarSize={16}
hideName
avatarProps={{hasTooltip: false}}
/>
<TextOverflow>{feedbackItem.shortId}</TextOverflow>
</Row>
</ContactRow>

<Row justify="flex-end" gap={space(1)}>
<IssueTrackingSignals group={feedbackItem as unknown as Group} />

{hasComments && (
<Tooltip title={t('Has Activity')} containerDisplayMode="flex">
<IconChat color="gray500" size="sm" />
</Tooltip>
)}

{(isCrashReport || isUserReportWithError) && (
<Tooltip title={t('Linked Error')} containerDisplayMode="flex">
<IconFatal color="red400" size="xs" />
</Tooltip>
)}

{hasReplayId && (
<Tooltip title={t('Linked Replay')} containerDisplayMode="flex">
<IconPlay size="xs" />
</Tooltip>
)}

{hasAttachments && (
<Tooltip title={t('Has Screenshot')} containerDisplayMode="flex">
<IconImage size="xs" />
</Tooltip>
)}

{feedbackItem.assignedTo && (
<ActorAvatar
actor={feedbackItem.assignedTo}
size={16}
tooltipOptions={{containerDisplayMode: 'flex'}}
<StyledTimeSince date={feedbackItem.firstSeen} />

{feedbackItem.hasSeen ? null : (
<DotRow style={{gridArea: 'unread'}}>
<IconCircleFill size="xs" color="purple400" />
</DotRow>
)}

<PreviewRow
align="flex-start"
justify="flex-start"
style={{
gridArea: 'message',
}}
>
<StyledTextOverflow>{feedbackItem.metadata.message}</StyledTextOverflow>
</PreviewRow>

<BottomGrid style={{gridArea: 'bottom'}}>
<Row justify="flex-start" gap={space(0.75)}>
<StyledProjectBadge
project={feedbackItem.project}
avatarSize={14}
hideName
avatarProps={{hasTooltip: false}}
/>
)}
</Row>
</BottomGrid>
</LinkedFeedbackCard>
<ShortId>{feedbackItem.shortId}</ShortId>
</Row>

<Row justify="flex-end" gap={space(1)}>
<IssueTrackingSignals group={feedbackItem as unknown as Group} />

{hasComments && (
<Tooltip title={t('Has Activity')} containerDisplayMode="flex">
<IconChat color="gray500" size="sm" />
</Tooltip>
)}

{(isCrashReport || isUserReportWithError) && (
<Tooltip title={t('Linked Error')} containerDisplayMode="flex">
<IconFatal color="red400" size="xs" />
</Tooltip>
)}

{hasReplayId && (
<Tooltip title={t('Linked Replay')} containerDisplayMode="flex">
<IconPlay size="xs" />
</Tooltip>
)}

{hasAttachments && (
<Tooltip title={t('Has Screenshot')} containerDisplayMode="flex">
<IconImage size="xs" />
</Tooltip>
)}

{feedbackItem.assignedTo && (
<ActorAvatar
actor={feedbackItem.assignedTo}
size={16}
tooltipOptions={{containerDisplayMode: 'flex'}}
/>
)}
</Row>
</BottomGrid>
</LinkedFeedbackCard>
</CardSpacing>
);
}

const LinkedFeedbackCard = styled(Link)`
position: relative;
padding: ${space(1)} ${space(3)} ${space(1)} ${space(1.5)};
border: 1px solid transparent;
color: ${p => p.theme.textColor};
&:hover {
color: ${p => p.theme.textColor};
}
&[data-selected='true'] {
background: ${p => p.theme.purple100};
}
&[data-selected='true']::before {
content: '';
position: absolute;
left: 0;
top: 0;
height: 100%;
background: ${p => p.theme.purple300};
width: ${space(0.5)};
z-index: 10;
border: 1px solid ${p => p.theme.purple200};
border-radius: ${space(0.75)};
color: ${p => p.theme.purple300};
}
display: grid;
Expand All @@ -184,7 +183,7 @@ const LinkedFeedbackCard = styled(Link)`
'checkbox user time'
'unread message message'
'. bottom bottom';
gap: ${space(1)};
gap: ${space(0.5)} ${space(1)};
place-items: stretch;
align-items: center;
`;
Expand All @@ -208,22 +207,44 @@ const StyledProjectBadge = styled(ProjectBadge)`
`;

const PreviewRow = styled(Row)`
height: 2.8em;
align-items: flex-start;
font-size: ${p => p.theme.fontSizeSmall};
padding-bottom: ${space(0.75)};
`;

const DotRow = styled(Row)`
height: 2.2em;
height: 1.1em;
align-items: flex-start;
justify-content: center;
`;

const StyledTextOverflow = styled(TextOverflow)`
white-space: initial;
height: 2.8em;
-webkit-line-clamp: 2;
height: 1.4em;
-webkit-line-clamp: 1;
display: -webkit-box;
-webkit-box-orient: vertical;
line-height: ${p => p.theme.text.lineHeightBody};
`;

const ContactRow = styled(TextOverflow)`
font-size: ${p => p.theme.fontSizeMedium};
grid-area: 'user';
font-weight: bold;
`;

const ShortId = styled(TextOverflow)`
font-size: ${p => p.theme.fontSizeSmall};
color: ${p => p.theme.gray300};
`;

const StyledTimeSince = styled(TimeSince)`
font-size: ${p => p.theme.fontSizeSmall};
grid-area: 'time';
`;

const CardSpacing = styled('div')`
padding: ${space(0.5)} ${space(0.5)} 0 ${space(0.5)};
`;

export default FeedbackListItem;

0 comments on commit 0b130ee

Please sign in to comment.