fix: fix custom task icon (#1560)

Co-authored-by: Po Chun Chiu <57251712+EiffelFly@users.noreply.github.com>
instill-ai · Oct 23, 2024 · 2477f00 · 2477f00
1 parent 93a275a
commit 2477f00
Show file tree

Hide file tree

Showing 9 changed files with 55 additions and 37 deletions.
diff --git a/packages/design-system/src/new-ui/ComplicateIcons/TaskCustom.tsx b/packages/design-system/src/new-ui/ComplicateIcons/TaskCustom.tsx
@@ -0,0 +1,34 @@
+"use client";
+
+import * as React from "react";
+
+import {
+  ComplicateIconBase,
+  ComplicateIconBaseProps,
+} from "./ComplicateIconBase";
+
+export const TaskCustom = React.forwardRef<
+  SVGSVGElement,
+  Omit<ComplicateIconBaseProps, "viewBox" | "children"> & {
+    pathColor: string;
+  }
+>((props, ref) => {
+  const { className, pathColor, ...passThrough } = props;
+  return (
+    <ComplicateIconBase
+      {...passThrough}
+      ref={ref}
+      viewBox="0 0 24 24"
+      className={className}
+    >
+      <path
+        d="M7.6863 18.1797V14.1797M7.6863 14.1797C8.42268 14.1797 9.01963 13.5827 9.01963 12.8464C9.01963 12.11 8.42268 11.513 7.6863 11.513C6.94992 11.513 6.35297 12.11 6.35297 12.8464C6.35297 13.5827 6.94992 14.1797 7.6863 14.1797ZM7.6863 8.84635V6.17969M12.353 18.1797V14.1797M12.353 8.84635V6.17969M12.353 8.84635C11.6166 8.84635 11.0196 9.44331 11.0196 10.1797C11.0196 10.9161 11.6166 11.513 12.353 11.513C13.0893 11.513 13.6863 10.9161 13.6863 10.1797C13.6863 9.44331 13.0893 8.84635 12.353 8.84635ZM17.0196 18.1797V15.513M17.0196 15.513C17.756 15.513 18.353 14.9161 18.353 14.1797C18.353 13.4433 17.756 12.8464 17.0196 12.8464C16.2833 12.8464 15.6863 13.4433 15.6863 14.1797C15.6863 14.9161 16.2833 15.513 17.0196 15.513ZM17.0196 10.1797V6.17969M8.15297 21.1807H16.553C18.2331 21.1807 19.0732 21.1807 19.7149 20.8537C20.2794 20.5661 20.7384 20.1071 21.026 19.5426C21.353 18.9009 21.353 18.0608 21.353 16.3807V7.98066C21.353 6.30051 21.353 5.46043 21.026 4.81869C20.7384 4.25421 20.2794 3.79526 19.7149 3.50764C19.0732 3.18066 18.2331 3.18066 16.553 3.18066H8.15297C6.47281 3.18066 5.63273 3.18066 4.99099 3.50764C4.42651 3.79526 3.96757 4.25421 3.67995 4.81869C3.35297 5.46043 3.35297 6.30051 3.35297 7.98066V16.3807C3.35297 18.0608 3.35297 18.9009 3.67995 19.5426C3.96757 20.1071 4.42651 20.5661 4.99099 20.8537C5.63273 21.1807 6.47281 21.1807 8.15297 21.1807Z"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        className={pathColor}
+      />
+    </ComplicateIconBase>
+  );
+});
+TaskCustom.displayName = "TaskCustomIcon";
diff --git a/packages/design-system/src/new-ui/ComplicateIcons/index.ts b/packages/design-system/src/new-ui/ComplicateIcons/index.ts
@@ -10,6 +10,7 @@ import { Number } from "./Number";
 import { ObjectDetection } from "./ObjectDetection";
 import { OpticalCharacterRecognition } from "./OpticalCharacterRecognition";
 import { SemanticSegmentation } from "./SemanticSegmentation";
+import { TaskCustom } from "./TaskCustom";
 import { TextEmbedding } from "./TextEmbedding";
 import { TextGeneration } from "./TextGeneration";
 import { TextToImage } from "./TextToImage";
@@ -32,4 +33,5 @@ export const ComplicateIcons = {
   TextGeneration,
   TextToImage,
   Drag,
+  TaskCustom,
 };
diff --git a/packages/design-system/src/new-ui/Icons/TaskCustom.tsx b/packages/design-system/src/new-ui/Icons/TaskCustom.tsx
diff --git a/packages/design-system/src/new-ui/Icons/index.ts b/packages/design-system/src/new-ui/Icons/index.ts
@@ -147,7 +147,6 @@ import { SpeechRecognition } from "./SpeechRecognition";
 import { Star06 } from "./Star06";
 import { Stop } from "./Stop";
 import { Tag01 } from "./Tag01";
-import { TaskCustom } from "./TaskCustom";
 import { TextA } from "./TextA";
 import { TextGenerationChat } from "./TextGenerationChat";
 import { ThumbsDown } from "./ThumbsDown";
@@ -326,7 +325,6 @@ export const Icons = {
   SortLinesUp,
   Star06,
   Tag01,
-  TaskCustom,
   TextA,
   TextGenerationChat,
   ThumbsDown,

diff --git a/packages/design-system/src/ui-helpers/getModelInstanceTaskToolkit.tsx b/packages/design-system/src/ui-helpers/getModelInstanceTaskToolkit.tsx
@@ -1,3 +1,4 @@
+import { cn } from "..";
 import { ComplicateIcons, Icons } from "../new-ui";
 
 export const getModelInstanceTaskToolkit = (task: string) => {
@@ -177,7 +178,12 @@ export const getModelInstanceTaskToolkit = (task: string) => {
     case "TASK_CUSTOM":
       return {
         getIcon: (className?: string) => {
-          return <Icons.TaskCustom className={className ?? "h-4 w-4"} />;
+          return (
+            <ComplicateIcons.TaskCustom
+              className={cn("h-4 w-4", className)}
+              pathColor="stroke-semantic-fg-primary"
+            />
+          );
         },
         label: "Custom",
       };

diff --git a/packages/toolkit/src/components/card-model/Stats.tsx b/packages/toolkit/src/components/card-model/Stats.tsx
@@ -23,7 +23,9 @@ export const Stats = (props: StatsProps) => {
     <div className="mt-auto flex w-full flex-row items-center gap-x-4">
       <Tag variant="lightPurple">
         <div className="flex flex-row items-center gap-x-1 uppercase product-body-text-4-medium">
-          {getIcon("w-4 h-4 stroke-semantic-secondary-hover")}
+          {getIcon(
+            `w-4 h-4 ${["TASK_CUSTOM"].includes(task) ? "[&>*]:!stroke-semantic-secondary-on-bg" : ""}`,
+          )}
           {label}
         </div>
       </Tag>

diff --git a/packages/toolkit/src/view/model/CreateModelForm.tsx b/packages/toolkit/src/view/model/CreateModelForm.tsx
@@ -390,9 +390,7 @@ export const CreateModelForm = () => {
                           </Select.Trigger>
                           <Select.Content>
                             <Select.Group>
-                              {InstillModelTask.filter(
-                                (task) => task !== "TASK_CUSTOM",
-                              ).map((task) => {
+                              {InstillModelTask.map((task) => {
                                 const { label } =
                                   getModelInstanceTaskToolkit(task);
 

diff --git a/packages/toolkit/src/view/model/ModelsTable.tsx b/packages/toolkit/src/view/model/ModelsTable.tsx
@@ -4,6 +4,7 @@ import { ColumnDef } from "@tanstack/react-table";
 
 import {
   Button,
+  cn,
   DataTable,
   getModelInstanceTaskToolkit,
 } from "@instill-ai/design-system";
@@ -61,7 +62,12 @@ export const ModelsTable = (props: ModelsTableProps) => {
               secondaryLink={null}
               secondaryText={label}
               iconElement={getIcon(
-                `w-4 h-4 ${["TASK_CHAT"].includes(row.original.task || "") ? "stroke-semantic-fg-primary [&>*]:!stroke-semantic-fg-primary" : "[&>*]:!fill-semantic-fg-primary"}`,
+                cn(
+                  "w-4 h-4",
+                  ["TASK_CHAT", "TASK_CUSTOM"].includes(row.original.task || "")
+                    ? "stroke-semantic-fg-primary [&>*]:!stroke-semantic-fg-primary"
+                    : "[&>*]:!fill-semantic-fg-primary",
+                ),
               )}
             />
           </div>

diff --git a/packages/toolkit/src/view/model/view-model/ModelHead.tsx b/packages/toolkit/src/view/model/view-model/ModelHead.tsx
@@ -162,7 +162,7 @@ export const ModelHead = ({
               size="sm"
             >
               {task.getIcon(
-                `w-3 h-3 ${["TASK_CHAT"].includes(model?.task || "") ? "stroke-semantic-secondary-on-bg [&>*]:!stroke-semantic-secondary-on-bg" : "[&>*]:!fill-semantic-secondary-on-bg"}`,
+                `w-3 h-3 ${["TASK_CHAT", "TASK_CUSTOM"].includes(model?.task || "") ? "stroke-semantic-secondary-on-bg [&>*]:!stroke-semantic-secondary-on-bg" : "[&>*]:!fill-semantic-secondary-on-bg"}`,
               )}
               {task.label}
             </Tag>