Align import modal with penpot design

[kwerber]

Describe the bug

Currently the import collection modal does not look exactly like the trufos penpot design. We should make the necessary adjustments so that it looks as close to the design as possible.

Here are the major differences that we should fix:

• When hovering over a tab, the border is cut off due to the limited available space. This should not happen
• DONE: The source collection picker file input uses the wrong icon (should be the collection icon with the magnifying glass)
• DONE: The destination picker file input uses the wrong icon (should be the collection icon with the plus icon)
• The corners of the collection name input are way too rounded (see screenshot below)
• The Complete Import button should be disabled while not all required fields are set
• DONE: When hovering over one of the file inputs, the dashed border should be colored white primary
• DONE: The "breakline with the triangle in the center" between both file inputs is missing
• DONE: When a file picker has a file and when hovering over respective X icon, the pointer cursor should be used
• When the Trufos import tab is open, the Complete Import button should be called Open Collection
• The text of the Complete Import button should be bold
• DONE: When hovering over the X icon on the top right of the modal, the pointer cursor should be used
• DONE: The padding inside the tabs themselves is too small (should be 10px top/bottom and 16px left/right)

Major differences that we should not fix:

• The tabs in the implementation look very different from the penpot design (e.g. no spacing between tabs)
  • We decided to keep it this way to align it with other tabs from other modals (e.g. collection settings)
• The text inside the file picker looks different from the penpot design
  • While this is open for more suggestions, the current text is fine and does not need to be changed

To Reproduce

1. Start trufos, click on the collection dropdown on the top left, click on Import Collection
2. Look at the modal
3. Compare it to the penpot design

Expected behavior

The implementation should look like the penpot design.

Screenshots/Video

Current implementation:

Intended look and feel from the penpot design:

Additional context

You can take a look at our penpot design here. You can get better access to the penpot design by clicking on this link and logging in with the username info@trufos.com and password password.