Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: update minor UI #3281

Merged
merged 3 commits into from
Aug 7, 2024
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion electron/resources/version.txt
Original file line number Diff line number Diff line change
@@ -1 +1 @@
0.5.0-29
0.5.0-30
Original file line number Diff line number Diff line change
@@ -38,7 +38,7 @@ const TableActiveModel: React.FC = () => {
<div className="m-4 mr-0 w-1/2">
<div className="overflow-hidden rounded-lg border border-[hsla(var(--app-border))]">
<table className="w-full px-8">
<thead className="w-full border-b border-[hsla(var(--app-border))]">
<thead className="w-full border-b border-[hsla(var(--app-border))] first:border-none">
<tr>
{Column.map((col, i) => (
<th
4 changes: 2 additions & 2 deletions web/screens/HubScreen2/components/BuiltInModelCard.tsx
Original file line number Diff line number Diff line change
@@ -57,7 +57,7 @@ const BuiltInModelCard: React.FC<HfModelEntry> = ({
</div>
<div className="pointer-events-auto flex flex-col items-end gap-2">
<DownloadContainer modelHandle={name} />
<span className="flex items-center gap-1 text-sm font-medium leading-3">
<span className="flex items-center gap-1 text-sm font-medium leading-3 text-[hsla(var(--text-secondary))]">
{addThousandSeparator(downloads)}
<CloudDownload size={14} />
</span>
@@ -135,7 +135,7 @@ const DownloadContainer: React.FC<DownloadContainerProps> = ({
Use
</Button>
) : downloadState != null ? (
<Button variant="soft">
<Button theme="ghost" className="p-0 text-[hsla(var(--primary-bg))]">
<div className="flex items-center space-x-2">
<span
className="inline-block"
18 changes: 13 additions & 5 deletions web/screens/HubScreen2/components/HfListModel.tsx
Original file line number Diff line number Diff line change
@@ -60,7 +60,7 @@ const HfListModel: React.FC<Props> = ({ modelHandle }) => {
{downloadableModels.map((item) => (
<tr
key={item.rfilename}
className="border-b border-[hsla(var(--app-border))] last:border-b-0 hover:bg-[hsla(var(--primary-bg-soft))]"
className="group border-b border-[hsla(var(--app-border))] last:border-b-0 hover:bg-[hsla(var(--primary-bg-soft))]"
>
<td className="whitespace-nowrap py-4 pl-3">
<div className="w-fit rounded-md border border-[hsla(var(--app-border))] bg-transparent px-1.5 py-0.5 text-[var(--text-primary)]">
@@ -70,7 +70,9 @@ const HfListModel: React.FC<Props> = ({ modelHandle }) => {
<td className="w-full pl-4">{item.rfilename}</td>
<td>
<div className="mr-3 flex items-center justify-end gap-3 whitespace-nowrap py-3">
<span>{toGibibytes(item.fileSize)}</span>
<span className="text-[hsla(var(--text-secondary))]">
{toGibibytes(item.fileSize)}
</span>
<DownloadContainer
modelHandle={modelHandle}
fileName={item.rfilename}
@@ -149,7 +151,7 @@ const DownloadContainer: React.FC<DownloadContainerProps> = ({
])

return (
<div className="flex items-center justify-center">
<div className="flex items-center justify-center transition-all">
{downloadedModel ? (
<Button
variant="soft"
@@ -159,7 +161,7 @@ const DownloadContainer: React.FC<DownloadContainerProps> = ({
Use
</Button>
) : downloadState != null ? (
<Button variant="soft">
<Button theme="ghost" className="p-0 text-[hsla(var(--primary-bg))]">
<div className="flex items-center space-x-2">
<span
className="inline-block"
@@ -181,7 +183,13 @@ const DownloadContainer: React.FC<DownloadContainerProps> = ({
</div>
</Button>
) : (
<Button onClick={onDownloadClick}>Download</Button>
<Button
onClick={onDownloadClick}
theme="ghost"
className="bg-[hsla(var(--secondary-bg))] group-hover:bg-[hsla(var(--primary-bg))] group-hover:text-[hsla(var(--primary-fg))]"
>
Download
</Button>
)}
</div>
)
2 changes: 1 addition & 1 deletion web/screens/HubScreen2/components/HubModelCard.tsx
Original file line number Diff line number Diff line change
@@ -172,7 +172,7 @@ const HubModelCard: React.FC<HfModelEntry> = ({ name, downloads, model }) => {
>
{actionLabel}
</Button>
<span className="flex items-center gap-1 text-sm font-medium leading-3">
<span className="flex items-center gap-1 text-sm font-medium leading-3 text-[hsla(var(--text-secondary))]">
{addThousandSeparator(downloads)}
<CloudDownload size={14} />
</span>
2 changes: 1 addition & 1 deletion web/screens/HubScreen2/components/HuggingFaceModelCard.tsx
Original file line number Diff line number Diff line change
@@ -146,7 +146,7 @@ const DownloadContainer: React.FC<DownloadContainerProps> = ({
Use
</Button>
) : downloadState != null ? (
<Button variant="soft">
<Button theme="ghost" className="p-0 text-[hsla(var(--primary-bg))]">
<div className="flex items-center space-x-2">
<span
className="inline-block"
10 changes: 8 additions & 2 deletions web/screens/HubScreen2/components/ListModel.tsx
Original file line number Diff line number Diff line change
@@ -212,7 +212,7 @@ const DownloadContainer: React.FC<DownloadContainerProps> = ({
Use
</Button>
) : downloadState != null ? (
<Button variant="soft">
<Button theme="ghost" className="p-0 text-[hsla(var(--primary-bg))]">
<div className="flex items-center space-x-2">
<span className="inline-block" onClick={onAbortDownloadClick}>
Cancel
@@ -231,7 +231,13 @@ const DownloadContainer: React.FC<DownloadContainerProps> = ({
</div>
</Button>
) : (
<Button onClick={onDownloadClick}>Download</Button>
<Button
onClick={onDownloadClick}
theme="ghost"
className="bg-[hsla(var(--secondary-bg))] group-hover:bg-[hsla(var(--primary-bg))] group-hover:text-[hsla(var(--primary-fg))]"
>
Download
</Button>
)}
</div>
)
6 changes: 4 additions & 2 deletions web/screens/HubScreen2/components/SliderItem.tsx
Original file line number Diff line number Diff line change
@@ -53,11 +53,13 @@ const SliderItem: React.FC<Props> = ({ model }) => {
{shouldShowOwnerLogo && (
<Image width={20} height={20} src={model.logo} alt={model.author} />
)}
<span className="text-sm font-medium leading-4">{model.author}</span>
<span className="text-sm font-medium leading-4 text-[hsla(var(--text-secondary))]">
{model.author}
</span>
</div>
</div>
<div className="mt-4 flex items-center justify-between">
<span className="text-xs font-medium leading-3">
<span className="text-xs font-medium leading-3 text-[hsla(var(--text-secondary))]">
{toGibibytes(model.size)}
</span>
<DownloadContainer modelHandle={repoId} fileName={fileName} />
5 changes: 5 additions & 0 deletions web/screens/Settings/Appearance/index.tsx
Original file line number Diff line number Diff line change
@@ -67,16 +67,21 @@ export default function AppearanceOptions() {
<div className="flex gap-x-2">
<h6 className="font-semibold capitalize">Interface theme</h6>
</div>
<p className="font-medium leading-relaxed text-[hsla(var(--text-secondary))]">
Translucent option is only available for some theme
</p>
</div>
<div className="flex items-center gap-x-2">
<Button
theme={reduceTransparent ? 'primary' : 'ghost'}
className="w-[120px]"
variant={reduceTransparent ? 'solid' : 'outline'}
onClick={() => setReduceTransparent(true)}
>
Solid
</Button>
<Button
className="w-[120px]"
theme={reduceTransparent ? 'ghost' : 'primary'}
variant={reduceTransparent ? 'outline' : 'solid'}
onClick={() => setReduceTransparent(false)}
Original file line number Diff line number Diff line change
@@ -42,7 +42,7 @@ const ModelDownloadRow: React.FC<Props> = ({
quantization,
}) => {
return (
<div className="flex w-[662px] flex-row items-center justify-between space-x-1 rounded border border-[hsla(var(--app-border))] p-3">
<div className="flex flex-row items-center justify-between space-x-1 rounded border border-[hsla(var(--app-border))] p-3">
<div className="flex">
{quantization && (
<Badge variant="soft" className="mr-1">
Original file line number Diff line number Diff line change
@@ -33,9 +33,9 @@ const ModelSegmentInfo = () => {
if (!importingHuggingFaceRepoData) return null

return (
<div className="flex w-full flex-col space-y-4">
<div className="flex flex-col space-y-4 lg:w-1/3">
<HeaderInfo title={'Model ID'}>
<h1 className="font-medium text-zinc-500 dark:text-gray-300">
<h1 className="mt-3 font-medium text-[hsla(var(--text-secondary))]">
{modelName}
</h1>
</HeaderInfo>
@@ -63,7 +63,7 @@ const ModelSegmentInfo = () => {
<HeaderInfo title="Downloads">
<div className="flex flex-row items-center space-x-1.5">
<Download size={16} />
<span className="font-medium text-zinc-500 dark:text-gray-300">
<span className="font-medium text-[hsla(var(--text-secondary))]">
{downloads}
</span>
</div>
9 changes: 5 additions & 4 deletions web/screens/Settings/HuggingFaceRepoDetailModal/index.tsx
Original file line number Diff line number Diff line change
@@ -39,11 +39,12 @@ const HuggingFaceRepoDetailModal = () => {
title={importingHuggingFaceRepoData.id}
fullPage
content={
<div className="flex h-full w-full flex-col">
<div className="flex">
<div className="flex h-full max-h-[600px] w-full flex-col overflow-x-hidden lg:max-h-[auto]">
<div className="flex h-full flex-col justify-between gap-4 lg:flex-row">
<ModelSegmentInfo />
<div className="mx-6 h-full border border-[hsla(var(--app-border))]" />
<ModelDownloadList />
<div className="w-full">
<ModelDownloadList />
</div>
</div>
</div>
}