[UX Proposal] Design updates to the Recommendation tab

[Daniel-Warner-X]

Design proposal for the "Recommendation" tab

The "Recommendation" tab has a few UI layout and consistency issues and weak visual distinction for selected configurations in the table. This proposal addresses those issues with some lightweight changes. The goal of this proposal is primarily to facilitate a conversation.

Video:

https://drive.google.com/file/d/1UwbpS0nk1VWP5bJ-yXtERwQqtaFZPC4S/view?usp=sharing

Prototype:

https://github.com/Daniel-Warner-X/neuralnav/tree/design-update

Screenshots:

Key Changes

• Added "Recommended" badge to recommendation card
• Tightened up layout and spacing on the page and individual component level
• Refined subhead typography and spacing
• Unified selected-state indicators
• Updated design and behavior of viable-configs table

[anfredette]

Thanks for the proposal @Daniel-Warner-X!

I wanted to make a suggestion for the list view. It currently just has the top 5 solutions in list form. I'd like it to contain all of the solutions for each catagory so we as developers and curious users can see the rest of them. Here's how I was thinking it could work:

• Show a separate list for each category.
• Just show one category at a time with a selector to choose the category.
• Show the complete list -- not just to top 5 for each category
• Show all of the info on the cards
• Have a way to select a solution to deploy directly from the list view (in case you want to choose one witha lower rank than the top 5.
• We can keep both the cards and the list to start, but we should re-evaluate whether we need both views.