Skip to content

Commit 20ab5ae

Browse files
Anshgrover23notyenyu-creator
authored andcommitted
feat: Add prominent "Download sample" button to CSV import upload step (twentyhq#16193)
## 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 twentyhq#16028 ## Screenshots ### Before <img width="2504" height="1716" alt="image" src="https://github.com/user-attachments/assets/7b134634-45e6-4e10-9c49-810b529d6fb0" /> ### After <img width="2504" height="1716" alt="image" src="https://github.com/user-attachments/assets/b0d7b28e-7a3b-4895-81b4-b04297d6ef64" />
1 parent 8e88c14 commit 20ab5ae

File tree

1 file changed

+17
-8
lines changed
  • packages/twenty-front/src/modules/spreadsheet-import/steps/components/UploadStep/components

1 file changed

+17
-8
lines changed

packages/twenty-front/src/modules/spreadsheet-import/steps/components/UploadStep/components/DropZone.tsx

Lines changed: 17 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -97,9 +97,13 @@ const StyledFooterText = styled.span`
9797
width: 100%;
9898
`;
9999

100-
const StyledTextAction = styled.span`
101-
cursor: pointer;
102-
text-decoration: underline;
100+
const StyledButtonsContainer = styled.div`
101+
align-items: center;
102+
display: flex;
103+
flex-direction: column;
104+
gap: ${({ theme }) => theme.spacing(2)};
105+
max-width: 200px;
106+
width: 100%;
103107
`;
104108

105109
type DropZoneProps = {
@@ -184,12 +188,17 @@ export const DropZone = ({ onContinue, isLoading }: DropZoneProps) => {
184188
<StyledText>
185189
<Trans>Upload .xlsx, .xls or .csv file</Trans>
186190
</StyledText>
187-
<MainButton onClick={open} title={t`Select file`} />
191+
<StyledButtonsContainer>
192+
<MainButton onClick={open} title={t`Select file`} fullWidth />
193+
<MainButton
194+
onClick={downloadSample}
195+
title={t`Download sample`}
196+
variant="secondary"
197+
fullWidth
198+
/>
199+
</StyledButtonsContainer>
188200
<StyledFooterText>
189-
{t`Max import capacity: ${formatSpreadsheetMaxRecordImportCapacity} records. Otherwise, consider splitting your file or using the API.`}{' '}
190-
<StyledTextAction onClick={downloadSample}>
191-
{t`Download sample file.`}
192-
</StyledTextAction>
201+
{t`Max import capacity: ${formatSpreadsheetMaxRecordImportCapacity} records. Otherwise, consider splitting your file or using the API.`}
193202
</StyledFooterText>
194203
</>
195204
)}

0 commit comments

Comments
 (0)