Skip to content
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

Update disconnected dialog styling #123

Merged
merged 1 commit into from
Oct 8, 2024

Conversation

huntie
Copy link

@huntie huntie commented Oct 8, 2024

Summary

A first pass at cleaning up/consolidating the visual layout of this dialog following the UX changes in #116 (new options, which are preserved).

  • Tweak layout within disconnected dialog, add dialog title.
  • Modernise RemoteDebuggingTerminatedScreen component with LitHtml and newer CSS module pattern.

Note

Next, I'd love to add icons or some extra visual emphasis on each item. Unfortunately, there aren't great reusable components for this in the base revision of CDT. Can follow up on this in a future pass.

Test plan

Default

image

With FB-only feedback CTA

image

✅ All actions were re-tested

Upstreaming plan

  • This commit should be sent as a patch to the upstream devtools-frontend repo. I've reviewed the contribution guide.
  • This commit is React Native-specific and cannot be upstreamed.

This commit could be upstreamed, with more future refinement.

@EdmondChuiHW
Copy link

Thanks for polishing this and modernising the components! Two questions:

  1. Instead of a vertical layout, would it make sense to make the "send feedback" layout match the other buttons, i.e. flow the description from the left into the button on the right?
  2. This anti-pattern prob exists elsewhere, but is there a way to only style one primary button in the same dialog? (instead of having two primary buttons in the FB-only case)

@huntie
Copy link
Author

huntie commented Oct 8, 2024

@EdmondChuiHW Overall the visual treatment in this PR is a rough pass:

  1. Vertical is intentional with the FB feedback CTA. It aims to be visually separate from the grid layout above it.
  2. Could probably downgrade the "Send feedback" button to a secondary button.

Copy link

@EdmondChuiHW EdmondChuiHW left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think the shade of gray background is enough for visual separation (without different layout or primary button treatment), but I'll defer the decision to you. 🛳️🛳️🛳️

@huntie huntie force-pushed the reconnect-modal-styling branch from 16dccac to 9755939 Compare October 8, 2024 15:44
@huntie huntie merged commit 35d4957 into facebookexperimental:main Oct 8, 2024
2 checks passed
@huntie huntie deleted the reconnect-modal-styling branch October 8, 2024 15:46
@EdmondChuiHW EdmondChuiHW mentioned this pull request Oct 14, 2024
2 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants