Review order page styles don't match rest of theme

[herbdool]

The styling on the Review Order page doesn't quite match the rest of the theme. It's quite narrow; the font is unnecessarily small and so on.

Before:

After:

[herbdool]

@bugfolder what do you think of this PR?

[argiepiano]

I think this look was an outdated attempt (probably in screens with lower resolution in the late 2000s) to make it look like a cashiers receipt. It's annoying and outdated, and it looks bad on modern screens. I'm all for changing this.

[bugfolder]

I definitely like the new look.

When I tried it on an existing site, I didn't get a full-width listing (even after flushing all caches and flushing the browser CSS/JS cache).

Before:

After:

Adding width: 100%; to the table CSS gets it out to the full width, but the huge horizontal gap and tight vertical spacing actually degrades readability, IMHO.

Personally, I'm fine with tweaking the CSS on the site to get that table readable (since it has a unique class of order-review-table, it's easily targetable). While I do like the improvement shown above, I'm a little concerned about substantially changing the CSS on our users who may have made their own CSS overrides that don't play nicely with the updated CSS, and being surprised that the review page changes in potentially not a good way. Thoughts?

[herbdool]

What theme are you using? I guess some smart defaults are still needed in some cases.

[bugfolder]

Base theme is Bootstrap Lite. Then there's a sub-theme, but the sub-theme doesn't do much to the order-review-table.

We probably ought to check this against a bunch of common themes.

[herbdool]

Ah, ok. I noticed that the Review Order panes were being hardcoded into a table, rather than using a renderable array. So Bootstrap Lite couldn't inject its classes. So I've rebuilt that. It's a bit more radical of a change, but I think it's worth it since it's now easier to make sure it looks nice across different themes.

Bootstrap Lite:

Basis:

I also moved away from making the whole thing a giant table so now it's fieldsets with a table in each one.

I'm a little concerned about substantially changing the CSS on our users who may have made their own CSS overrides that don't play nicely with the updated CSS, and being surprised that the review page changes in potentially not a good way.

One approach would be to change the classes so that any custom css overrides won't mess with the new look.

Another would be to try to make the fieldsets look closer to the table of tables. Not sure how important that is. And won't really address any custom css overrides.

[bugfolder]

Much better:

I particularly like that the "Review order" page stylistically matches the "Checkout" page, which helps the sense of continuity in the user.

I support this change.

[herbdool]

@bugfolder sounds good.

[laryn]

This is a good improvement.