Interactions for selecting project type in project wizard

[sharon-wang]

Intent

• More UI work for Epic: New Project Wizards for Beta #2110

Before

This PR

This PR updates the first step of the New Project Wizard to have selectable project types with corresponding logos. The selected project type is saved to the project config, which is part of the project wizard state.

update_project_type_button_colours.mp4

Approach

• project type components are based on the radio button work (Create new project modal wizard radio buttons #2655)
• I used a converter to turn the SVGs for each logo into React components
• I included the corresponding license for each logo (Python didn't have one) alongside the logo SVG file
• keyboard navigation and focus highlighting were implemented

⭐ ${\textsf{\color{green}In particular, I'm hoping for some feedback and confirmation on how the logos were included from a licensing perspective.}}$

QA Notes

• input validation is not yet implemented, so currently, it's expected that a user can click Next before selecting a project type
• The project type selected should persist while navigating between steps
• The project type selected should be reflected in the text on the second step

Here's a quick demo of expected functionality:

Note some of the colours have changed. See the above video for the more up-to-date styling.

select_project_type.mp4

[petetronic]

Overall, great to see the icons and this really coming together! After this lands, we may get some additional requests from Paul as he gets a chance to interact with it, but IMHO, here are some of my thoughts:

For the Light and Dark regular (non-HC) themes, could we add a subtle hover highlight to add more feedback to the user this is an interactive button? There are a few examples of this in other action bars like our Plots and Variables panes.

In the regular Light theme, button background grey seems a little drab / intense given how large the clickable area is. Would a softer / brighter treatment be like the top action bar buttons, I think they have a subtle grey border and very light background?

For the HC themes, I think buttons always have a thin border outline? There should be examples in our various action bars too.

[timtmok]

LGTM

[timtmok]

The outlines in HC themes and hover highlighting would be great to have!

[sharon-wang]

Thanks for the suggestions! I've added a new video near the top of the PR description to show the styling changes, including hover highlighting.

There's still an issue with focus which I'll address later:

extra_outline_from_focus.mp4

There is an extra outline around the mouse-clicked button. The outline should only show when using keyboard navigation. The extra outline doesn't occur when navigating back to the first step and clicking on the buttons. This has to do with manually focusing the input and the input's autofocus atttribute.

[sharon-wang]

I'll merge this for now and address additional styling feedback in a separate PR