Dialog buttons appear misaligned

[aaemnnosttv]

Feature Description

Currently, all dialog CTA buttons are left-aligned at the bottom. This looks a bit off visually and would be better UX as well if the two were spread apart.

Current Dialogs

Suggested Layout

Justify buttons to the sides to avoid lopsided look, but also make it more difficult to accidentally click the wrong thing.

---

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

• Dialog CTA buttons should be justified to the sides
• Additional margin should be added between dialog body and footer

Implementation Brief

• In assets/sass/vendor/_mdc-dialog.scssmodify the .mdc-dialog__actions class to
  • justify-content: space-between
  • margin:2em 0;
• Ensure that VRT passes.

Finish and merge: #1453

QA Brief

Changelog entry

• Improve alignment of dialog buttons.

[aaemnnosttv]

This looks like a good start @ryanwelcher - just one request for you:

Can we set the margin using a variable for line-height so that the space is equal to 1 or 2 empty lines of text? Perhaps we can just use em for this.

[ryanwelcher]

@aaemnnosttv sounds good. I've updated the IB accordingly.

[aaemnnosttv]

IB ✅

[tofumatt]

Code reviewed; just assigned to @aaemnnosttv/@felixarntz to merge. 🙂

[cole10up]

Tested

Confirmed reset button layout:

Checked mobile view

Confirmed disconnect button layout:

Checked mobile view

Confirmed buttons and cancel function properly

Passed QA ✅