Improve Data Importer Select Matching

[Bonapara]

Current Behavior

The Select matching UX is difficult to understand in the data importer.

Desired Behavior

Switch the matching layout from vertical to horizontal, and improve the header as follows:

This implies adapting the select design to the one used in the design system:

https://www.figma.com/design/xt8O9mFeLl46C5InWwoMrN/Twenty?node-id=3007-69739&t=hqpcFvJC99jVPB4Q-11

Figma

https://www.figma.com/design/xt8O9mFeLl46C5InWwoMrN/Twenty?node-id=34790-64625&t=hqpcFvJC99jVPB4Q-11

[greptile-apps[bot]]

To improve the Select matching UX in the data importer, follow these steps:

1. Update SubMatchingSelect Layout:

   • Modify the layout from vertical to horizontal in SubMatchingSelect.tsx.

     const StyledContainer = styled.div`
     display: flex;
     align-items: center;
     padding-bottom: ${({ theme }) => theme.spacing(1)};
     padding-left: ${({ theme }) => theme.spacing(2)};
     `;

2. Update Header Design:

   • Improve the header design in SubMatchingSelect.tsx.

     const StyledSelectLabel = styled.span`
     color: ${({ theme }) => theme.font.color.primary};
     font-size: ${({ theme }) => theme.font.size.md};
     font-weight: ${({ theme }) => theme.font.weight.bold};
     padding-right: ${({ theme }) => theme.spacing(2)};
     `;

3. Adapt Select Design:

   • Ensure the MatchColumnSelect component in MatchColumnSelect.tsx uses the design system.

     
     import { Select } from 'twenty-ui';

   export const MatchColumnSelect = ({ onChange, value, options, placeholder }: MatchColumnSelectProps) => { return ( <Select value={value} options={options} placeholder={placeholder} onChange={onChange} /> ); };

4. Update MatchColumnsStep:

   • Ensure the MatchColumnsStep component reflects the new layout and design.

     <TemplateColumn
     columns={columns}
     columnIndex={columnIndex}
     onChange={onChange}
     onSubChange={onSubChange}
     layout="horizontal"
     />

Refer to the Figma design for detailed styling and layout adjustments.

References

/packages/twenty-front/src/modules/spreadsheet-import/steps/components/MatchColumnsStep/components/SubMatchingSelect.tsx /packages/twenty-front/src/modules/spreadsheet-import/components/MatchColumnSelect.tsx /packages/twenty-front/src/modules/spreadsheet-import/steps/components/MatchColumnsStep/MatchColumnsStep.tsx

#### About Greptile

This response provides a starting point for your research, not a precise solution. Help us improve! Please leave a 👍 if this is helpful and 👎 if it is irrelevant. [Ask Greptile](https://app.greptile.com/chat/github/twentyhq/twenty/main) · [Edit Issue Bot Settings](https://app.greptile.com/apps/github)

[gitstart-app[bot]]

Here is the GitStart Ticket for this issue: https://clients.gitstart.com/twenty/5449/tickets/TWNTY-6135