[User Feedback] List Item CSS Tweaks

[Jesse-Box]

Problems

1. Too much ornamentation for indicating when a piece of user feedback is selected.
2. The unread dots are inconsistent with how the rest of the frontend deals with “unseen” stuff (instead unread email address should be bold, normal font size when it is read)
3. Vertical spacing between email address and feedback preview is awkward when compared with the feedback preview and the footer information (project name + icons)
4. Font sizes of the feedback preview and project name are too big

Solution

See Figma Library

Component in Isolation

Component in Composition

[michellewzhang]

@Jesse-Box what did you mean by "Vertical spacing between email address and feedback preview is awkward when compared with the feedback preview and the footer information (project name + icons)"?

With the updated font sizes, the UI now looks like this - the name part is 14px, all other text is 12px.

We leave room at the bottom of 1-line feedback previews to account for the space that 2-line previews take up; otherwise the heights of the feedback cards wouldn't all be consistent. Did you have a different spacing in mind? (currently the gap is 8px which is what it looks to be in the figma

Unrelated to the spacing -- it's also significantly harder to tell which feedback is unread vs read after getting rid of the purple dot

pr here: https://github.com/getsentry/sentry/pull/73983

[Jesse-Box]

what did you mean by "Vertical spacing between email address and feedback preview is awkward when compared with the feedback preview and the footer information (project name + icons)"?

I DM'd you a rewatch video, since it contains customer data. Hopefully, that explains myself as well!

We leave room at the bottom of 1-line feedback previews to account for the space that 2-line previews take up; otherwise the heights of the feedback cards wouldn't all be consistent.

Here are my thoughts on this point right now. In practice, implementing a static height for the feedback preview results in the footer information being visually linked to the subsequent feedback item, rather than the feedback item it is actually linked to. Ideally, we can preview up to two lines of feedback, but if their feedback is short, the feedback preview height is reduced to compensate. Alternatively, we only show one line of feedback.

Unrelated to the spacing -- it's also significantly harder to tell which feedback is unread vs read after getting rid of the purple dot.

I heard this from Ryan as well, so maybe this was a stupid idea… Can you re-introduce the dot? Sorry about that!