BSR lite plugin should have new UI

kevinwhoffman commented 2 years ago

This is a continuation of the work started in https://github.com/deliciousbrains/better-search-replace-pro/pull/65 where @lewis-dbi and @mattgrshaw began implementing the new plugin UI.

As Matt mentioned in https://github.com/deliciousbrains/better-search-replace-pro/pull/65#issuecomment-1058763572, a branch for ui-reskin has been started already.

Acceptance Criteria

[x] The styles from the pro plugin have been carried over to the lite plugin.
[x] The upgrade sidebar has been added to the UI.

Dry Run Details Modal

[x] An Upgrade Now tooltip is displayed when hovering over an item in the changes column.
[x] The existing upgrade call to action below the dry run details table is removed, per Brad's request in Figma.

Upgrade Links

[x] In the sidebar, the Upgrade Now button element is changed to an a element, which is the semantically correct element for a link that navigates off-site. The appearance should stay the same. This change should also resolve the incorrect behavior on the Help tab that Lewis described in https://github.com/deliciousbrains/better-search-replace/pull/80#issue-1159794347.

[x] All upgrade links have been updated to the following URLs with UTM parameters. This URL was suggested by Brad in https://github.com/deliciousbrains/site/issues/3108#issuecomment-1060949121.

[x] Tooltips

https://deliciousbrains.com/better-search-replace/upgrade/?utm_source=insideplugin&utm_medium=web&utm_content=tooltip&utm_campaign=bsr-to-migrate

[x] Header

https://deliciousbrains.com/better-search-replace/upgrade/?utm_source=insideplugin&utm_medium=web&utm_content=header&utm_campaign=bsr-to-migrate

[x] Sidebar

https://deliciousbrains.com/better-search-replace/upgrade/?utm_source=insideplugin&utm_medium=web&utm_content=sidebar&utm_campaign=bsr-to-migrate

[x] Help tab

https://deliciousbrains.com/better-search-replace/upgrade/?utm_source=insideplugin&utm_medium=web&utm_content=help-tab&utm_campaign=bsr-to-migrate

kevinwhoffman commented 2 years ago

@mattgrshaw Now that @lewis-dbi has the sidebar in place in the free version, I've added acceptance criteria for the remaining items. Are you able to take it from here?

mattgrshaw commented 2 years ago

Yep, can do 👍

mattgrshaw commented 2 years ago

@kevinwhoffman sorry if this is already discussed somewhere, but what should the tooltips say in the search/replace results? I couldn't see that in Figma.

I went with this:

Upgrade now to view detailed results.

I also updated the tooltip so they show to the right of the number of changes found (instead of to the left like the other tooltip). That way, they don't cover the table name when they show up:

Let me know if you have any changes to the tooltip text or placement. I still have to do a bit of a code review / cleanup, so I can do that and get the tooltips finalized tomorrow.

kevinwhoffman commented 2 years ago

@mattgrshaw The tooltip looks good to me. @lewis-dbi and I can take a closer look when the PR is ready. At that time, I will also double-check the links.

deliciousbrains / better-search-replace