Marketplace page UI/ UX enhancements#4819
Conversation
|
This is good. Love it. |
There was a problem hiding this comment.
Pull Request Overview
This PR enhances the Marketplace page by replacing the manual usecase checkbox list with an Autocomplete component and refines the layout/styling of the Export Data modal.
- Introduce MUI Autocomplete for selecting usecases in
Marketplace - Wrap tabs and autocomplete in a horizontal Stack for improved layout
- Change Export Data modal’s options layout to a two-column CSS grid
Reviewed Changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| packages/ui/src/views/marketplaces/index.jsx | Swap manual checkbox list for MUI Autocomplete and adjust tabs wrap |
| packages/ui/src/layout/MainLayout/Header/ProfileSection/index.jsx | Convert export options Stack to a two-column grid layout |
Comments suppressed due to low confidence (1)
packages/ui/src/views/marketplaces/index.jsx:648
- The component
ListItemTextis used inrenderOptionbut not imported. Addimport { ListItemText } from '@mui/material'to prevent runtime errors.
<ListItemText primary={option} />
| direction='row' | ||
| sx={{ | ||
| display: 'grid', | ||
| gridTemplateColumns: 'repeat(2, 1fr)' |
There was a problem hiding this comment.
[nitpick] When using CSS grid here, add a gap (e.g. gap: 1 or gridGap: '16px') to the sx so the grid items aren’t flush against each other.
| gridTemplateColumns: 'repeat(2, 1fr)' | |
| gridTemplateColumns: 'repeat(2, 1fr)', | |
| gap: '16px' |
|
thanks! suggestion: can we add tooltip when hover over the use cases? because right now it can only display 2, and its not apparent to me which are the use cases selected, as opposed to the previous methods where I can see what I have selected: |
|
Thanks for the suggestion @HenryHengZJ |
|
Please take a look now 
|
Description:
Introduced an Autocomplete component to select usecases in the marketplace page
Before:
After:
Improved styling of Export Data modal
Before:
After:
