chore": update minor UI (#3281)

* chore: update minor and missing ui

* chore: update ui import model

* 0.5.0-30

---------

Co-authored-by: Van Pham <64197333+Van-QA@users.noreply.github.com>

electron/resources/version.txt

@@ -1 +1 @@
-0.5.0-29
+0.5.0-30

web/containers/Layout/BottomPanel/SystemMonitor/TableActiveModel/index.tsx

@@ -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

web/screens/HubScreen2/components/BuiltInModelCard.tsx

@@ -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"

web/screens/HubScreen2/components/HfListModel.tsx

@@ -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>
   )

web/screens/HubScreen2/components/HubModelCard.tsx

@@ -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>

web/screens/HubScreen2/components/HuggingFaceModelCard.tsx

@@ -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"

web/screens/HubScreen2/components/ListModel.tsx

@@ -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>
   )

web/screens/HubScreen2/components/SliderItem.tsx

@@ -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} />

web/screens/Settings/Appearance/index.tsx

@@ -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)}

web/screens/Settings/HuggingFaceRepoDetailModal/ModelDownloadRow/index.tsx

@@ -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">

web/screens/Settings/HuggingFaceRepoDetailModal/ModelSegmentInfo/index.tsx

@@ -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>

web/screens/Settings/HuggingFaceRepoDetailModal/index.tsx

@@ -39,11 +39,12 @@ const HuggingFaceRepoDetailModal = () => {
       title={importingHuggingFaceRepoData.id}
       fullPage
       content={
-        <div className="flex h-full w-full flex-col">
+        <div className="flex h-full max-h-[600px] w-full flex-col overflow-x-hidden lg:max-h-[auto]">
-          <div className="flex">
+          <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))]" />
+            <div className="w-full">
-            <ModelDownloadList />
+              <ModelDownloadList />
+            </div>
           </div>
         </div>
       }