Change the color on str output, change X icon on Notification tab, change the icon on nodeToolbar (Code) (#1473)

* 🐛 fix(GenericNode): simplify return statement for build status classes to improve code readability
🔥 chore(GenericNode): remove console.log statement used for debugging
🔥 chore(alertDropDown): remove unused import
🔥 chore(nodeToolbarComponent): remove unused import
🔥 chore(styleUtils): remove unused color definition

* 🎨 style(styleUtils.ts): update color for 'str' key in nodeColors object to match the color used in other keys

* 🔥 refactor(GenericNode/index.tsx): remove unnecessary console.log statement for data.node?.template

src/frontend/src/alerts/alertDropDown/index.tsx

@@ -1,3 +1,4 @@
+import { Cross2Icon } from "@radix-ui/react-icons";
 import { useState } from "react";
 import IconComponent from "../../components/genericIconComponent";
 import {
@@ -46,15 +47,15 @@ export default function AlertDropdown({
                 setTimeout(clearNotificationList, 100);
               }}
             >
-              <IconComponent name="Trash2" className="h-[1.1rem] w-[1.1rem]" />
+              <IconComponent name="Trash2" className="h-4 w-4" />
             </button>
             <button
-              className="text-foreground hover:text-status-red"
+              className="text-foreground opacity-70 hover:opacity-100"
               onClick={() => {
                 setOpen(false);
               }}
             >
-              <IconComponent name="X" className="h-5 w-5" />
+              <Cross2Icon className="h-4 w-4" />
             </button>
           </div>
         </div>

src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx

@@ -1,5 +1,6 @@
 import _, { cloneDeep } from "lodash";
 import { useEffect, useState } from "react";
+import { useUpdateNodeInternals } from "reactflow";
 import ShadTooltip from "../../../../components/ShadTooltipComponent";
 import CodeAreaComponent from "../../../../components/codeAreaComponent";
 import IconComponent from "../../../../components/genericIconComponent";
@@ -26,7 +27,6 @@ import {
   updateFlowPosition,
 } from "../../../../utils/reactflowUtils";
 import { classNames, cn } from "../../../../utils/utils";
-import { useUpdateNodeInternals } from "reactflow";
 
 export default function NodeToolbarComponent({
   data,
@@ -89,7 +89,9 @@ export default function NodeToolbarComponent({
   }, [showModalAdvanced]);
   const updateNodeInternals = useUpdateNodeInternals();
 
-  const setLastCopiedSelection = useFlowStore(state => state.setLastCopiedSelection);
+  const setLastCopiedSelection = useFlowStore(
+    (state) => state.setLastCopiedSelection
+  );
   useEffect(() => {
     setFlowComponent(createFlowComponent(cloneDeep(data), version));
   }, [
@@ -144,8 +146,8 @@ export default function NodeToolbarComponent({
         deleteNode(data.id);
         break;
       case "copy":
-        const node = nodes.filter(node => node.id === data.id)
-        setLastCopiedSelection({ nodes: _.cloneDeep(node), edges: [] })
+        const node = nodes.filter((node) => node.id === data.id);
+        setLastCopiedSelection({ nodes: _.cloneDeep(node), edges: [] });
     }
   };
 
@@ -233,7 +235,7 @@ export default function NodeToolbarComponent({
                     id={"code-input-node-toolbar-" + name}
                   />
                 </div>
-                <IconComponent name="Code" className="h-4 w-4" />
+                <IconComponent name="TerminalSquare" className="h-4 w-4" />
               </button>
             </ShadTooltip>
           ) : (
@@ -371,13 +373,11 @@ export default function NodeToolbarComponent({
                     className="relative top-0.5 mr-2 h-4 w-4 "
                   />{" "}
                   <span className="">Copy</span>{" "}
-                  
-                    <IconComponent
-                      name="Command"
-                      className="absolute right-[1.15rem] top-[0.65em] h-3.5 w-3.5 stroke-2"
-                    ></IconComponent>
-                    <span className="absolute right-2 top-[0.5em]">C</span>
-  
+                  <IconComponent
+                    name="Command"
+                    className="absolute right-[1.15rem] top-[0.65em] h-3.5 w-3.5 stroke-2"
+                  ></IconComponent>
+                  <span className="absolute right-2 top-[0.5em]">C</span>
                 </div>
               </SelectItem>
               {hasStore && (
@@ -450,7 +450,7 @@ export default function NodeToolbarComponent({
                   <span>
                     <IconComponent
                       name="Delete"
-                      className="absolute right-2 top-2 h-4 w-4 text-red-400 stroke-2"
+                      className="absolute right-2 top-2 h-4 w-4 stroke-2 text-red-400"
                     ></IconComponent>
                   </span>
                 </div>

src/frontend/src/utils/styleUtils.ts

@@ -219,7 +219,7 @@ export const nodeColors: { [char: string]: string } = {
   wrappers: "#E6277A",
   utilities: "#31A3CC",
   output_parsers: "#E6A627",
-  str: "#049524",
+  str: "#31a3cc",
   retrievers: "#e6b25a",
   unknown: "#9CA3AF",
   custom_components: "#ab11ab",