Skip to content

Commit 36ba78f

Browse files
damianpumardamianpumar
authored
fix: update upload button text to include allowed file extensions; remove unused headings and update placeholder text (huggingface#406)
* fix: update upload button text to include allowed file extensions; remove unused headings and update placeholder text * fix: update sidebar and home page titles to include 'AI Sheets' * fix: refactor layout and improve button functionality in ImportFromHub component
1 parent 6f83d49 commit 36ba78f

File tree

4 files changed

+73
-75
lines changed

4 files changed

+73
-75
lines changed

‎src/features/import/drag-n-drop.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -237,7 +237,7 @@ export const DragAndDrop = component$(() => {
237237
}
238238
>
239239
<LuUpload class="w-4 h-4 flex-shrink-0" />
240-
Upload from computer
240+
Upload from computer ({allowedExtensions.join(', ')})
241241
</Button>
242242
</Popover.Panel>
243243
</Popover.Root>

‎src/features/import/import-from-hub.tsx‎

Lines changed: 67 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -59,75 +59,77 @@ export const ImportFromHub = component$(() => {
5959
});
6060

6161
return (
62-
<div class="flex flex-col w-full max-w-2xl mt-8 gap-4">
63-
<div class="flex flex-col justify-between gap-4">
64-
<h1 class="text-3xl font-bold w-full">
65-
Import your dataset from the hub
66-
</h1>
67-
68-
<div class="flex flex-col gap-2 w-full">
69-
<DatasetSearch
70-
onSelectedDataset$={(dataset) => {
71-
repoId.value = dataset;
72-
}}
73-
/>
74-
75-
{repoId.value && (
76-
<div class="w-full">
77-
<FileSelection
78-
repoId={repoId.value}
79-
accessToken={session.value.token}
80-
onSelectedFile$={(file) => {
81-
filePath.value = file;
82-
}}
83-
/>
84-
</div>
85-
)}
86-
</div>
87-
</div>
62+
<div class="w-full flex items-center justify-evenly">
63+
<div class="flex flex-col w-full max-w-2xl mt-8 gap-4">
64+
<div class="flex flex-col justify-between gap-4">
65+
<h1 class="text-3xl font-bold w-full">
66+
Import your dataset from the hub
67+
</h1>
68+
69+
<div class="flex flex-col gap-2 w-full">
70+
<DatasetSearch
71+
onSelectedDataset$={(dataset) => {
72+
repoId.value = dataset;
73+
}}
74+
/>
8875

89-
<div class="flex flex-col w-full gap-4 mt-4">
90-
{repoId.value && filePath.value && (
91-
<div class="text-foreground text-sm">
92-
<span>Only the first 1000 rows will be imported.</span>
93-
</div>
94-
)}
95-
<Button
96-
look="primary"
97-
isGenerating={isImportingData.value}
98-
disabled={!enableImportButton.value || isImportingData.value}
99-
onClick$={handleOnClickImportFromHub}
100-
class="min-w-[180px]"
101-
>
102-
{isImportingData.value ? (
103-
<div class="flex items-center justify-between w-full px-2">
104-
<span>Importing</span>
105-
<div class="animate-spin">
106-
<svg
107-
width="24"
108-
height="24"
109-
viewBox="0 0 24 24"
110-
fill="none"
111-
xmlns="http://www.w3.org/2000/svg"
112-
aria-labelledby="loadingSpinnerTitle"
113-
>
114-
<title id="loadingSpinnerTitle">Loading spinner</title>
115-
<path
116-
d="M12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12"
117-
stroke="currentColor"
118-
stroke-width="2"
119-
stroke-linecap="round"
120-
/>
121-
</svg>
76+
{repoId.value && (
77+
<div class="w-full">
78+
<FileSelection
79+
repoId={repoId.value}
80+
accessToken={session.value.token}
81+
onSelectedFile$={(file) => {
82+
filePath.value = file;
83+
}}
84+
/>
12285
</div>
123-
</div>
124-
) : (
125-
<div class="flex items-center gap-4">
126-
<LuChevronRightSquare class="text-xl" />
127-
<span>Import dataset</span>
86+
)}
87+
</div>
88+
</div>
89+
90+
<div class="flex flex-col w-full gap-4 mt-4">
91+
{repoId.value && filePath.value && (
92+
<div class="text-foreground text-sm">
93+
<span>Only the first 1000 rows will be imported.</span>
12894
</div>
12995
)}
130-
</Button>
96+
<Button
97+
look="primary"
98+
isGenerating={isImportingData.value}
99+
disabled={!enableImportButton.value || isImportingData.value}
100+
onClick$={handleOnClickImportFromHub}
101+
class="min-w-[180px]"
102+
>
103+
{isImportingData.value ? (
104+
<div class="flex items-center justify-between w-full px-2">
105+
<span>Importing</span>
106+
<div class="animate-spin">
107+
<svg
108+
width="24"
109+
height="24"
110+
viewBox="0 0 24 24"
111+
fill="none"
112+
xmlns="http://www.w3.org/2000/svg"
113+
aria-labelledby="loadingSpinnerTitle"
114+
>
115+
<title id="loadingSpinnerTitle">Loading spinner</title>
116+
<path
117+
d="M12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12"
118+
stroke="currentColor"
119+
stroke-width="2"
120+
stroke-linecap="round"
121+
/>
122+
</svg>
123+
</div>
124+
</div>
125+
) : (
126+
<div class="flex items-center gap-4">
127+
<LuChevronRightSquare class="text-xl" />
128+
<span>Import dataset</span>
129+
</div>
130+
)}
131+
</Button>
132+
</div>
131133
</div>
132134
</div>
133135
);

‎src/features/main-sidebar/main-sidebar.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -96,7 +96,7 @@ export const MainSidebar = component$(() => {
9696
<div
9797
class={cn('flex items-center justify-between px-2 mt-5 w-[274px]')}
9898
>
99-
<span class="text-base font-semibold px-4 font-inter">Sheets</span>
99+
<span class="text-base font-semibold px-4 font-inter">AI Sheets</span>
100100
<div class="md:hidden">
101101
<MainSidebarButton />
102102
</div>

‎src/routes/home/index.tsx‎

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -323,21 +323,17 @@ export default component$(() => {
323323
<div class="flex flex-col items-center justify-center mb-4">
324324
<MainLogo class="mt-6 md:mt-0 w-[70px] h-[70px]" />
325325
<h1 class="text-neutral-600 text-2xl font-semibold">
326-
AI-powered spreadsheets
326+
AI Sheets
327327
</h1>
328328
</div>
329329

330330
<DragAndDrop />
331331

332-
<div class="w-full md:w-[697px] flex justify-center items-center">
332+
<div class="w-full md:w-[697px] flex justify-center items-center py-6">
333333
<hr class="w-full border-t" />
334334
<span class="mx-10 text-neutral-500">OR</span>
335335
<hr class="w-full border-t" />
336336
</div>
337-
338-
<h2 class="text-primary-600 font-semibold text-xl text-center">
339-
Build a synthetic dataset from a simple idea
340-
</h2>
341337
</div>
342338
)}
343339

@@ -360,7 +356,7 @@ export default component$(() => {
360356
look="ghost"
361357
value={prompt.value}
362358
disabled={isLoading.value}
363-
placeholder="Description and representation of polite gesture by culture"
359+
placeholder="Write your dataset description here"
364360
class={cn(
365361
'p-4 max-h-40 resize-none overflow-auto text-base placeholder:text-neutral-500',
366362
{
@@ -410,7 +406,7 @@ export default component$(() => {
410406
look="primary"
411407
type="submit"
412408
class="w-[30px] h-[30px] rounded-full flex items-center justify-center p-0"
413-
disabled={isLoading.value || !prompt.value.trim()}
409+
disabled={isLoading.value}
414410
>
415411
<LuEgg class="text-lg" />
416412
</Button>

0 commit comments

Comments
 (0)