From fce1a5887dbac65a3300b6c7a928ac3af738acb8 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <62335616+lucaseduoli@users.noreply.github.com>
Date: Tue, 29 Apr 2025 16:37:09 -0300
Subject: [PATCH] fix: make code button flash, fix mcp icon color (#7848)

* Added new animation

* Use animation on code button and make it appear just once

* fix tests

* Fix Mcp Icon

* Fix fill on white mode

* fixed tests

* Fixed mcp color on dark mode
---
 .../components/deploy-dropdown.tsx                     |  2 +-
 src/frontend/src/icons/MCP/McpIcon.jsx                 |  2 +-
 src/frontend/src/icons/MCP/index.tsx                   |  4 +++-
 .../FlowPage/components/nodeToolbarComponent/index.tsx | 10 +++++++---
 src/frontend/src/style/index.css                       |  5 ++---
 src/frontend/tailwind.config.mjs                       |  9 +++++++--
 .../tests/core/features/customComponentAdd.spec.ts     |  4 ++--
 7 files changed, 23 insertions(+), 13 deletions(-)

diff --git a/src/frontend/src/components/core/flowToolbarComponent/components/deploy-dropdown.tsx b/src/frontend/src/components/core/flowToolbarComponent/components/deploy-dropdown.tsx
index 801ae318f..758ebba68 100644
--- a/src/frontend/src/components/core/flowToolbarComponent/components/deploy-dropdown.tsx
+++ b/src/frontend/src/components/core/flowToolbarComponent/components/deploy-dropdown.tsx
@@ -132,7 +132,7 @@ export default function PublishDropdown() {
               >
                 <IconComponent
                   name="Mcp"
-                  className={`${groupStyle} icon-size mr-2 fill-muted-foreground group-hover:fill-white`}
+                  className={`${groupStyle} icon-size mr-2 fill-muted-foreground group-hover:fill-foreground`}
                 />
                 <span>MCP Server</span>
                 <IconComponent
diff --git a/src/frontend/src/icons/MCP/McpIcon.jsx b/src/frontend/src/icons/MCP/McpIcon.jsx
index dc9d9a1f6..8d4fef316 100644
--- a/src/frontend/src/icons/MCP/McpIcon.jsx
+++ b/src/frontend/src/icons/MCP/McpIcon.jsx
@@ -5,7 +5,7 @@ const SvgMcpIcon = (props) => {
       width="16"
       height="16"
       viewBox="0 0 16 16"
-      fill="none"
+      fill={props.isdark ? "white" : "black"}
       {...props}
     >
       <g clip-path="url(#clip0_93_974)">
diff --git a/src/frontend/src/icons/MCP/index.tsx b/src/frontend/src/icons/MCP/index.tsx
index 293e21254..ed55ad5ac 100644
--- a/src/frontend/src/icons/MCP/index.tsx
+++ b/src/frontend/src/icons/MCP/index.tsx
@@ -1,8 +1,10 @@
+import { useDarkStore } from "@/stores/darkStore";
 import React, { forwardRef } from "react";
 import SvgMcpIcon from "./McpIcon";
 
 export const McpIcon = forwardRef<SVGSVGElement, React.PropsWithChildren<{}>>(
   (props, ref) => {
-    return <SvgMcpIcon ref={ref} {...props} />;
+    const isdark = useDarkStore((state) => state.dark);
+    return <SvgMcpIcon ref={ref} isdark={isdark} {...props} />;
   },
 );
diff --git a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
index 75c92eae4..fbaafb85b 100644
--- a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
@@ -436,15 +436,19 @@ const NodeToolbarComponent = memo(
     };
 
     const isCustomComponent = useMemo(() => {
-      return data.type === "CustomComponent" && !data.node?.edited;
-    }, [data.type, data.node?.edited]);
+      const isCustom = data.type === "CustomComponent" && !data.node?.edited;
+      if (isCustom) {
+        data.node.edited = true;
+      }
+      return isCustom;
+    }, [data.type, data.node]);
 
     const renderToolbarButtons = useMemo(
       () => (
         <>
           {hasCode && (
             <ToolbarButton
-              className={isCustomComponent ? "!bg-accent-pink" : ""}
+              className={isCustomComponent ? "animate-pulse-pink" : ""}
               icon="Code"
               label="Code"
               onClick={() => setOpenModal(true)}
diff --git a/src/frontend/src/style/index.css b/src/frontend/src/style/index.css
index d522ff4b8..9f5af828a 100644
--- a/src/frontend/src/style/index.css
+++ b/src/frontend/src/style/index.css
@@ -42,7 +42,7 @@
     --accent-indigo: 226 100% 94%; /* hsl(226, 100%, 94%) */
     --accent-indigo-foreground: 243 75% 59%; /* hsl(243, 75%, 59%) */
 
-    --accent-pink: 326 78% 95%; /* hsl(326, 78%, 95%) */
+    --accent-pink: 326, 78%, 95%; /* hsl(326, 78%, 95%) */
     --accent-pink-foreground: 333 71% 51%; /* hsl(333, 71%, 51%) */
     --tooltip: 0 0% 0%; /* hsl(0, 0%, 0%) */
     --tooltip-foreground: 0 0% 100%; /* hsl(0, 0%, 100%) */
@@ -229,7 +229,7 @@
     --accent-emerald-hover: 163.1 88.1% 19.8%; /* hsl(163.1, 88.1%, 19.8%) */
     --accent-indigo: 242 25% 34%; /* hsl(242, 25%, 34%) */
     --accent-indigo-foreground: 234 89% 74%; /* hsl(234, 89%, 74%) */
-    --accent-pink: 336 69% 30%; /* hsl(336, 69%, 30%) */
+    --accent-pink: 336, 69%, 30%; /* hsl(336, 69%, 30%) */
     --accent-pink-foreground: 329 86% 70%; /* hsl(329, 86%, 70%) */
     --tooltip: 0 0% 100%; /* hsl(0, 0%, 100%) */
 
@@ -348,7 +348,6 @@
     --selected: #0369a1;
     --discord-color: #5765f2;
 
-
     --filter-foreground: #eef2ff;
     --filter-background: #4e46e599;
 
diff --git a/src/frontend/tailwind.config.mjs b/src/frontend/tailwind.config.mjs
index 6a89491af..139de157c 100644
--- a/src/frontend/tailwind.config.mjs
+++ b/src/frontend/tailwind.config.mjs
@@ -91,6 +91,10 @@ const config = {
             "offset-distance": "100%",
           },
         },
+        "pulse-pink": {
+          "0%, 100%": { backgroundColor: "hsla(var(--accent-pink), 1)" },
+          "50%": { backgroundColor: "hsla(var(--accent-pink), 0.4)" },
+        },
       },
       animation: {
         // Animation definitions
@@ -99,6 +103,7 @@ const config = {
         contentShow: "contentShow 400ms cubic-bezier(0.16, 1, 0.3, 1)",
         contentHide: "contentHide 500ms cubic-bezier(0.16, 1, 0.3, 1)",
         wiggle: "wiggle 150ms ease-in-out 1",
+        "pulse-pink": "pulse-pink 2s linear infinite",
         "slow-wiggle": "wiggle 500ms ease-in-out 1",
         "border-beam": "border-beam calc(var(--duration)*1s) infinite linear",
       },
@@ -343,8 +348,8 @@ const config = {
         999: "999",
       },
       fontSize: {
-        "xxs": "11px",
-        "mmd": "13px",
+        xxs: "11px",
+        mmd: "13px",
       },
     },
   },
diff --git a/src/frontend/tests/core/features/customComponentAdd.spec.ts b/src/frontend/tests/core/features/customComponentAdd.spec.ts
index b1a3201cb..a25fbd011 100644
--- a/src/frontend/tests/core/features/customComponentAdd.spec.ts
+++ b/src/frontend/tests/core/features/customComponentAdd.spec.ts
@@ -25,7 +25,7 @@ test(
     });
 
     await expect(page.getByTestId("code-button-modal")).toHaveClass(
-      /!bg-accent-pink/,
+      /animate-pulse-pink/,
     );
 
     await page.getByTestId("code-button-modal").last().click();
@@ -66,7 +66,7 @@ class CustomComponent(Component):
     await page.getByText("Check & Save").last().click();
 
     await expect(page.getByTestId("code-button-modal")).not.toHaveClass(
-      /!bg-accent-pink/,
+      /animate-pulse-pink/,
       { timeout: 3000 },
     );
   },