Card design changed

src/frontend/src/components/cardComponent/index.tsx

@@ -5,8 +5,7 @@ import { StoreContext } from "../../contexts/storeContext";
 import { getComponent, postLikeComponent } from "../../controllers/API";
 import { storeComponent } from "../../types/store";
 import cloneFLowWithParent from "../../utils/storeUtils";
-import { gradients } from "../../utils/styleUtils";
-import { classNames } from "../../utils/utils";
+import { cn } from "../../utils/utils";
 import ShadTooltip from "../ShadTooltipComponent";
 import IconComponent from "../genericIconComponent";
 import { Badge } from "../ui/badge";
@@ -121,7 +120,7 @@ export default function CollectionCardComponent({
 
   return (
     <Card
-      className={classNames(
+      className={cn(
         "group relative flex flex-col justify-between overflow-hidden transition-all hover:shadow-md",
         disabled ? "pointer-events-none opacity-50" : ""
       )}
@@ -130,66 +129,15 @@ export default function CollectionCardComponent({
         <CardHeader>
           <div>
             <CardTitle className="flex w-full items-center justify-between gap-3 text-xl">
-              <div
-                className={classNames(
-                  "flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full bg-primary",
-                  gradients[
-                    parseInt(data.id.slice(0, 12), 16) % gradients.length
-                  ]
+              <IconComponent
+                className={cn(
+                  "flex-shrink-0",
+                  data.is_component
+                    ? "mx-0.5 h-6 w-6 text-indigo-500"
+                    : "h-7 w-7 flex-shrink-0 text-emerald-800"
                 )}
-              >
-                <div
-                  className={classNames(
-                    data.is_component ? "h-7 w-7 rounded-full bg-muted" : "",
-                    "flex items-center justify-center"
-                  )}
-                >
-                  {data.is_component ? (
-                    <svg className="h-5 w-5" viewBox="0 0 24 24">
-                      <defs>
-                        <linearGradient
-                          id={data.id}
-                          x1="0%"
-                          y1="0%"
-                          x2="100%"
-                          y2="100%"
-                          className={
-                            gradients[
-                              parseInt(data.id.slice(0, 12), 16) %
-                                gradients.length
-                            ]
-                          }
-                        >
-                          <stop
-                            offset="0%"
-                            stopColor="var(--tw-gradient-from)"
-                          />
-                          <stop
-                            offset="100%"
-                            stopColor="var(--tw-gradient-to)"
-                          />
-                        </linearGradient>
-                      </defs>
-                      <IconComponent
-                        className={classNames(
-                          "h-4 w-4",
-                          gradients[
-                            parseInt(data.id.slice(0, 12), 16) %
-                              gradients.length
-                          ]
-                        )}
-                        stroke={`url(#${data.id})`}
-                        name="ToyBrick"
-                      />
-                    </svg>
-                  ) : (
-                    <IconComponent
-                      className="h-4 w-4 text-background"
-                      name="Network"
-                    />
-                  )}
-                </div>
-              </div>
+                name={data.is_component ? "ToyBrick" : "Group"}
+              />
               <ShadTooltip content={data.name}>
                 <div className="w-full truncate">{data.name}</div>
               </ShadTooltip>
@@ -205,10 +153,7 @@ export default function CollectionCardComponent({
                   )}
                   <ShadTooltip content="Likes">
                     <span className="flex items-center gap-1.5 text-xs text-muted-foreground">
-                      <IconComponent
-                        name="Heart"
-                        className={classNames("h-4 w-4 ")}
-                      />
+                      <IconComponent name="Heart" className={cn("h-4 w-4 ")} />
                       {likes_count ?? 0}
                     </span>
                   </ShadTooltip>
@@ -232,7 +177,7 @@ export default function CollectionCardComponent({
             </CardTitle>
           </div>
           {data.user_created && data.user_created.username && (
-            <span className="text-xs text-primary">
+            <span className="text-sm text-primary">
               by <b>{data.user_created.username}</b>
             </span>
           )}
@@ -274,13 +219,16 @@ export default function CollectionCardComponent({
                       (!authorized ? " cursor-not-allowed" : "")
                     }
                     onClick={() => {
+                      if (!authorized) {
+                        return;
+                      }
                       handleLike();
                     }}
                   >
                     <IconComponent
                       name="Heart"
-                      className={classNames(
-                        "h-6 w-6 p-0.5",
+                      className={cn(
+                        "h-5 w-5",
                         liked_by_user
                           ? "fill-destructive stroke-destructive"
                           : "",
@@ -314,7 +262,7 @@ export default function CollectionCardComponent({
                   >
                     <IconComponent
                       name={loading ? "Loader2" : "Plus"}
-                      className={classNames(
+                      className={cn(
                         loading ? "h-5 w-5 animate-spin" : "h-6 w-6",
                         !authorized ? " text-ring" : ""
                       )}

src/frontend/src/utils/styleUtils.ts

@@ -3,6 +3,7 @@ import {
   Bell,
   BookMarked,
   BookmarkPlus,
+  Boxes,
   Check,
   CheckCircle2,
   ChevronDown,
@@ -92,6 +93,7 @@ import {
   Users2,
   Variable,
   Wand2,
+  Workflow,
   Wrench,
   X,
   XCircle,
@@ -244,6 +246,7 @@ export const nodeIconsLucide: iconsType = {
   ChatVertexAI: VertexAIIcon,
   VertexAIEmbeddings: VertexAIIcon,
   agents: Rocket,
+  Workflow,
   User,
   WikipediaAPIWrapper: SvgWikipedia,
   chains: Link,
@@ -269,6 +272,7 @@ export const nodeIconsLucide: iconsType = {
   custom_components: GradientSparkles,
   custom: Edit,
   Trash2,
+  Boxes,
   Network,
   X,
   XCircle,