3.0 - Improve tax rates add row styling

[arraypress]

Bug Report

Expected behavior

When I add a tax rate that is not country-wide, I expect the form styling to be pleasing from a UX perspective.

Actual behavior

Form looks like this:

In my opinion, a few things need fixed here:

1. The label spacing between the checkbox and label is too small.
2. The height of the input fields/submit button is incongruent.
3. The location of the "state" select/text input when loaded via AJAX is messy.

Steps to reproduce the behavior

1. Disable the "Apply to whole country" select box.
2. You will see the state box appears directly below it.

Information (if a specific version is affected):

PHP Version: 8.0

EDD Version (or branch): 3.0-beta

WordPress Version: 5.7

[spencerfinnell]

I agree -- not sure why I felt it needed to be stuffed in to the table footer originally. A simple stacked form below would work, or a modal form similar to what is used when adding a Download to an Order.

[arraypress]

@spencerfinnell I second the modal approach, definitely would make for a much cleaner UX.

[spencerfinnell]

Does anyone have thoughts on where the "Add Rate" button to launch the modal would go?

[arraypress]

This feels organic to me, thoughts?

[spencerfinnell]

With a bit of other UI cleanup:

[arraypress]

@ashleyfae I tested this and it works good with the model approach.

[ashleyfae]

I've set this to 3.0.5 just because it's got quite a lot in it and will need more testing and merge conflict fixing.