From f14811fc8db3d3e80f469a8566dc59ace661b3c4 Mon Sep 17 00:00:00 2001 From: Cristhian Zanforlin Lousa Date: Tue, 22 Apr 2025 19:26:58 -0300 Subject: [PATCH] fix: make composio icon color black in white mode (#7698) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 🔧 (Composio): change fill color of Composio icon based on isdark prop value 🔧 (Composio): add useDarkStore hook to dynamically set isdark prop for Composio icon based on dark mode state --- src/frontend/src/icons/Composio/composio.jsx | 2 +- src/frontend/src/icons/Composio/index.tsx | 5 ++++- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/src/frontend/src/icons/Composio/composio.jsx b/src/frontend/src/icons/Composio/composio.jsx index 86f7c3ff9..95557641f 100644 --- a/src/frontend/src/icons/Composio/composio.jsx +++ b/src/frontend/src/icons/Composio/composio.jsx @@ -13,7 +13,7 @@ const Icon = (props) => ( fillRule="evenodd" clipRule="evenodd" d="M6.27406 0.685082C8.46664 -0.228361 10.9302 -0.228361 13.1229 0.685082C14.6773 1.33267 16.0054 2.40178 16.9702 3.75502C17.6126 4.65574 17.0835 5.84489 16.045 6.21613L13.5108 7.12189C12.9962 7.30585 12.4289 7.26812 11.9429 7.01756C11.8253 6.95701 11.7298 6.86089 11.6696 6.74266L10.2591 3.97469C10.0249 3.51519 9.37195 3.51519 9.13783 3.97469L7.72731 6.74274C7.66714 6.86089 7.57155 6.95701 7.454 7.01756L4.70187 8.43618C4.24501 8.67169 4.24501 9.3284 4.70187 9.56391L7.454 10.9825C7.57155 11.0431 7.66714 11.1392 7.72731 11.2574L9.13783 14.0254C9.37195 14.4849 10.0249 14.4849 10.2591 14.0254L11.6696 11.2574C11.7298 11.1392 11.8253 11.0431 11.9428 10.9825C12.429 10.7319 12.9965 10.6942 13.5112 10.8781L16.045 11.7838C17.0835 12.1551 17.6126 13.3442 16.9704 14.245C16.0054 15.5982 14.6774 16.6674 13.1229 17.315C10.9302 18.2283 8.46664 18.2283 6.27406 17.315C4.0814 16.4015 2.33935 14.6494 1.43116 12.4441C0.522946 10.2389 0.522946 7.76111 1.43116 5.55582C2.33935 3.3506 4.0814 1.59853 6.27406 0.685082ZM9.12456 7.82641L8.58683 8.60689L8.58642 8.60775C8.36097 8.93485 8.24822 9.09843 8.31033 9.22703L8.31366 9.23343C8.37938 9.36023 8.57412 9.36023 8.96401 9.36023C9.18056 9.36023 9.28872 9.36023 9.35667 9.42863L9.36021 9.43244C9.42677 9.50228 9.42677 9.61388 9.42677 9.83716V9.89555C9.42677 10.5145 9.42677 10.8238 9.58885 10.8771C9.7508 10.9304 9.92434 10.6786 10.2714 10.175L10.2724 10.1736L10.8101 9.39284C11.0358 9.0656 11.1487 8.90166 11.0866 8.77299L11.0834 8.76659C11.0175 8.63979 10.8228 8.63979 10.4329 8.63979C10.2163 8.63979 10.1082 8.63979 10.0402 8.57139L10.0367 8.56765C9.97012 8.49774 9.97012 8.38614 9.97012 8.16287V8.10447C9.97012 7.48556 9.97012 7.17618 9.80804 7.1229C9.64596 7.06955 9.47207 7.32183 9.12456 7.82641Z" - fill="white" + fill={props.isdark === "true" ? "white" : "black"} /> diff --git a/src/frontend/src/icons/Composio/index.tsx b/src/frontend/src/icons/Composio/index.tsx index 91424b153..553c8bcd0 100644 --- a/src/frontend/src/icons/Composio/index.tsx +++ b/src/frontend/src/icons/Composio/index.tsx @@ -1,3 +1,4 @@ +import { useDarkStore } from "@/stores/darkStore"; import React, { forwardRef } from "react"; import ComposioIconSVG from "./composio"; @@ -5,5 +6,7 @@ export const ComposioIcon = forwardRef< SVGSVGElement, React.PropsWithChildren<{}> >((props, ref) => { - return ; + const isdark = useDarkStore((state) => state.dark).toString(); + + return ; });