-
-
Notifications
You must be signed in to change notification settings - Fork 4k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[User Feedback] List Item CSS Tweaks #73628
Comments
@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 ![]() 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 ![]() 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: #73983 |
I DM'd you a rewatch video, since it contains customer data. Hopefully, that explains myself as well!
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.
I heard this from Ryan as well, so maybe this was a stupid idea… Can you re-introduce the dot? Sorry about that! |
- 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
Problems
Solution
See Figma Library
Component in Isolation
![Image](https://private-user-images.githubusercontent.com/6508377/344968747-d8dd9b19-c4da-497d-9243-dcecb6bcf483.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjE3MzA1MTIsIm5iZiI6MTcyMTczMDIxMiwicGF0aCI6Ii82NTA4Mzc3LzM0NDk2ODc0Ny1kOGRkOWIxOS1jNGRhLTQ5N2QtOTI0My1kY2VjYjZiY2Y0ODMucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDcyMyUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA3MjNUMTAyMzMyWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9Yjk5MWYwMWU3OWI2MzBkYWM0YTBhOWE1ZTkyMTgyN2UzZTQ0YjgzODYyYWY2YmQ4NzNiMWEyZDQ0NWQ1ZGFmYyZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.ZtC7fPPeWAO01sl3XvplbAbSXGT9Rp6JNBsMbq0N2Cs)
Component in Composition
![Image](https://private-user-images.githubusercontent.com/6508377/344968873-764f74fa-eae7-488d-b011-e4705525413e.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjE3MzA1MTIsIm5iZiI6MTcyMTczMDIxMiwicGF0aCI6Ii82NTA4Mzc3LzM0NDk2ODg3My03NjRmNzRmYS1lYWU3LTQ4OGQtYjAxMS1lNDcwNTUyNTQxM2UucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDcyMyUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA3MjNUMTAyMzMyWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9N2NiZmFiZDEwYjBiMjUzMjQxNjRlMGVhOGQxYTIzM2Q0ZWFiMDAyOTU4NDg4ZTI4ZjY1NmE2OThmMDZlNDdhOCZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.E6cLRJyYtJe1hM8INGjViIh-BiUjFZV9w7FsTReU7x8)
The text was updated successfully, but these errors were encountered: