From a368991d390e5a0e8155dfa6d0eb6c91363ada40 Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Fri, 1 Dec 2023 18:18:18 -0300
Subject: [PATCH] fix(GenericNode): change icon name from "Ungroup" to
 "group_components" to match the corresponding icon component
 fix(GradientSparkles): add new icon component "GradientUngroup" to render the
 "Ungroup" icon with gradient stroke fix(ComponentsComponent): add TODO
 comment to create a placeholder for when there are no components created yet
 fix(styleUtils): import and use the new "GradientUngroup" icon component for
 the "group_components" icon in nodeIconsLucide

---
 .../src/CustomNodes/GenericNode/index.tsx        |  6 +++---
 .../src/icons/GradientSparkles/index.tsx         | 16 ++++++++++++++++
 .../MainPage/components/components/index.tsx     |  2 +-
 src/frontend/src/utils/styleUtils.ts             |  7 ++++++-
 4 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx
index 05fd19c23..594744bf5 100644
--- a/src/frontend/src/CustomNodes/GenericNode/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx
@@ -177,7 +177,7 @@ export default function GenericNode({
               }
             >
               <IconComponent
-                name={data.node?.flow ? "Ungroup" : name}
+                name={data.node?.flow ? "group_components" : name}
                 className={
                   "generic-node-icon " +
                   (!showNode ? "absolute inset-x-6 h-12 w-12" : "")
@@ -213,13 +213,13 @@ export default function GenericNode({
                           takeSnapshot();
                         }}
                       >
-                        <div className="generic-node-tooltip-div pr-3 text-primary">
+                        <div className="generic-node-tooltip-div pr-2 text-primary">
                           {data.node?.display_name}
                         </div>
                         {data.node?.flow && (
                           <IconComponent
                             name="Pencil"
-                            className="h-5 w-5 text-ring"
+                            className="h-4 w-4 text-ring"
                           />
                         )}
                       </div>
diff --git a/src/frontend/src/icons/GradientSparkles/index.tsx b/src/frontend/src/icons/GradientSparkles/index.tsx
index f07c415e1..470708f89 100644
--- a/src/frontend/src/icons/GradientSparkles/index.tsx
+++ b/src/frontend/src/icons/GradientSparkles/index.tsx
@@ -60,3 +60,19 @@ export const GradientGroup = (props) => {
     </>
   );
 };
+
+export const GradientUngroup = (props) => {
+  return (
+    <>
+      <svg width="0" height="0" style={{ position: "absolute" }}>
+        <defs>
+          <linearGradient id="grad4" x1="0%" y1="0%" x2="100%" y2="0%">
+            <stop className="gradient-start" offset="0%" />
+            <stop className="gradient-end" offset="100%" />
+          </linearGradient>
+        </defs>
+      </svg>
+      <ForwardedIconComponent name="Ungroup" stroke="url(#grad4)" {...props} />
+    </>
+  );
+};
diff --git a/src/frontend/src/pages/MainPage/components/components/index.tsx b/src/frontend/src/pages/MainPage/components/components/index.tsx
index d2fac0216..c932954aa 100644
--- a/src/frontend/src/pages/MainPage/components/components/index.tsx
+++ b/src/frontend/src/pages/MainPage/components/components/index.tsx
@@ -105,7 +105,7 @@ export default function ComponentsComponent({
         <div className="flex w-full flex-col gap-4">
           {!isLoading && data.length === 0 ? (
             <div className="w-full text-center">
-              You haven't created any {name}s yet.
+              {/* TODO: create placeholder */}
             </div>
           ) : (
             <div className="grid w-full gap-4 md:grid-cols-2 lg:grid-cols-2">
diff --git a/src/frontend/src/utils/styleUtils.ts b/src/frontend/src/utils/styleUtils.ts
index a29aafb59..795d32988 100644
--- a/src/frontend/src/utils/styleUtils.ts
+++ b/src/frontend/src/utils/styleUtils.ts
@@ -113,7 +113,11 @@ import { EvernoteIcon } from "../icons/Evernote";
 import { FBIcon } from "../icons/FacebookMessenger";
 import { GitBookIcon } from "../icons/GitBook";
 import { GoogleIcon } from "../icons/Google";
-import { GradientInfinity, GradientSave } from "../icons/GradientSparkles";
+import {
+  GradientInfinity,
+  GradientSave,
+  GradientUngroup,
+} from "../icons/GradientSparkles";
 import { HuggingFaceIcon } from "../icons/HuggingFace";
 import { IFixIcon } from "../icons/IFixIt";
 import { MetaIcon } from "../icons/Meta";
@@ -276,6 +280,7 @@ export const nodeIconsLucide: iconsType = {
   WikipediaQueryRun: SvgWikipedia,
   WolframAlphaQueryRun: SvgWolfram,
   custom_components: GradientInfinity,
+  group_components: GradientUngroup,
   custom: Edit,
   Trash2,
   Boxes,