From 9b41432c96796bd128e6584fd868b551bbcf00b8 Mon Sep 17 00:00:00 2001
From: igorrCarvalho <igorsilvabhz6@gmail.com>
Date: Tue, 28 Nov 2023 17:05:04 -0300
Subject: [PATCH] Refactor: Make Store Icon on sideBar icon with same animated
 gradient like CustomComponents icon

---
 .../src/icons/GradientSparkles/index.tsx      | 26 +++++++++++++++++++
 src/frontend/src/utils/styleUtils.ts          |  4 +--
 2 files changed, 28 insertions(+), 2 deletions(-)

diff --git a/src/frontend/src/icons/GradientSparkles/index.tsx b/src/frontend/src/icons/GradientSparkles/index.tsx
index 4613278f8..fcee60592 100644
--- a/src/frontend/src/icons/GradientSparkles/index.tsx
+++ b/src/frontend/src/icons/GradientSparkles/index.tsx
@@ -1,5 +1,6 @@
 import { InfinityIcon } from "lucide-react";
 import { forwardRef } from "react";
+import ForwardedIconComponent from "../../components/genericIconComponent";
 
 export const GradientInfinity = forwardRef<
   SVGSVGElement,
@@ -19,3 +20,28 @@ export const GradientInfinity = forwardRef<
     </>
   );
 });
+
+
+export const GradientSave = forwardRef<
+  SVGSVGElement,
+  React.PropsWithChildren<{}>
+>((props, ref) => {
+  return (
+    <>
+      <svg width="0" height="0" style={{ position: "absolute" }}>
+        <defs>
+          <linearGradient id="grad2" 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="Save"
+        stroke="url(#grad2)" 
+        ref={ref}
+        {...props}
+      />
+    </>
+  );
+});
diff --git a/src/frontend/src/utils/styleUtils.ts b/src/frontend/src/utils/styleUtils.ts
index fc1b90929..78683f724 100644
--- a/src/frontend/src/utils/styleUtils.ts
+++ b/src/frontend/src/utils/styleUtils.ts
@@ -111,7 +111,7 @@ import { EvernoteIcon } from "../icons/Evernote";
 import { FBIcon } from "../icons/FacebookMessenger";
 import { GitBookIcon } from "../icons/GitBook";
 import { GoogleIcon } from "../icons/Google";
-import { GradientInfinity } from "../icons/GradientSparkles";
+import { GradientInfinity, GradientSave } from "../icons/GradientSparkles";
 import { HuggingFaceIcon } from "../icons/HuggingFace";
 import { IFixIcon } from "../icons/IFixIt";
 import { MetaIcon } from "../icons/Meta";
@@ -260,7 +260,7 @@ export const nodeIconsLucide: iconsType = {
   advanced: Laptop2,
   chat: MessageCircle,
   embeddings: Fingerprint,
-  saved_components: Save,
+  saved_components: GradientSave,
   documentloaders: Paperclip,
   vectorstores: Layers,
   toolkits: Hammer,