feat: Add prominent "Download sample" button to CSV import upload step

[Anshgrover23]

Description

Improves discoverability of the "Download sample" feature in the CSV import flow by replacing the text link with a prominent button, addressing customer feedback that the option was hard to find.

Closes #16028

Screenshots

Before

After

[greptile-apps]

Greptile Overview

Greptile Summary

Improves the discoverability of the "Download sample" feature by converting it from an underlined text link to a prominent secondary button. The change addresses customer feedback that users were unable to find the download sample option mentioned in documentation.

The implementation:

• Replaced StyledTextAction styled component with StyledButtonsContainer for better layout control
• Added a secondary MainButton for "Download sample" below the primary "Select file" button
• Removed the download sample link from the footer text
• Used fullWidth prop on both buttons for consistent sizing within a 200px max-width container
• Maintained proper spacing with theme.spacing(2) gap between buttons

The changes are minimal, focused, and follow the codebase conventions for styled components and theming. No custom instructions were violated.

Confidence Score: 5/5

• This PR is safe to merge with no issues detected
• The changes are straightforward UI improvements that enhance discoverability. The implementation correctly uses existing MainButton component with valid props (fullWidth, variant), follows styled-component patterns consistent with the codebase, and uses theme spacing appropriately. No logic changes or potential runtime errors introduced.
• No files require special attention

Important Files Changed

File Analysis

Filename	Score	Overview
packages/twenty-front/src/modules/spreadsheet-import/steps/components/UploadStep/components/DropZone.tsx	5/5	Replaced text link with prominent secondary button for "Download sample", improved layout with button container

Sequence Diagram

sequenceDiagram
    participant User
    participant DropZone
    participant MainButton
    participant useDropzone
    participant useDownloadFakeRecords

    User->>DropZone: Views CSV upload interface
    DropZone->>MainButton: Renders "Select file" button
    DropZone->>MainButton: Renders "Download sample" button (new)
    
    alt User clicks "Select file"
        User->>MainButton: Click "Select file"
        MainButton->>useDropzone: Trigger open()
        useDropzone->>User: Opens file picker dialog
        User->>useDropzone: Selects CSV/Excel file
        useDropzone->>DropZone: onDropAccepted callback
        DropZone->>DropZone: Process file and continue
    else User clicks "Download sample" (new flow)
        User->>MainButton: Click "Download sample"
        MainButton->>useDownloadFakeRecords: Trigger downloadSample()
        useDownloadFakeRecords->>User: Downloads sample CSV file
    else User drags and drops file
        User->>DropZone: Drag file over drop zone
        DropZone->>DropZone: Show overlay (isDragActive)
        User->>DropZone: Drop file
        DropZone->>useDropzone: onDropAccepted callback
        useDropzone->>DropZone: Process file and continue
    end

Loading

[greptile-apps]

_{1 file reviewed, no comments}

_{Edit Code Review Agent Settings | Greptile}

[github-actions]

🚀 Preview Environment Ready!

Your preview environment is available at: http://bore.pub:11840

This environment will automatically shut down when the PR is closed or after 5 hours.

[Anshgrover23]

@FelixMalfait Can i get a review on this one ?

[Weiko]

LGTM

[Anshgrover23]

@Weiko @Bonapara Can we merge this one now ?

[Bonapara]

The team will review your PR shortly, @Anshgrover23. Thanks for your contribution; this will be a great improvement!

[github-actions]

Thanks @Anshgrover23 for your contribution!
This marks your 2nd PR on the repo. You're top 15% of all our contributors 🎉
See contributor page - Share on LinkedIn - Share on Twitter