fix: updated icons for asana, attio, klaviyo, miro, missive to support dark theme.#10557
fix: updated icons for asana, attio, klaviyo, miro, missive to support dark theme.#10557Uday-sidagana wants to merge 35 commits into
Conversation
Cleaned up formatting by deleting extra blank lines in the _dynamic_imports dictionary for improved readability.
|
Caution Review failedFailed to post review comments WalkthroughThis PR adds support for 15+ new third-party integrations (Apollo, Bitbucket, Canva, Coda, ElevenLabs, Exa, Fireflies, GoogleBigQuery, Heygen, Mem0, Perplexity, SerpAPI, Snowflake, Tavily, YouTube) by introducing new React frontend icon components, Python Composio API wrappers, and updating the icon registry. It also standardizes existing icon component wrappers with consistent sizing and layout patterns. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes
Possibly related PRs
Suggested labels
Suggested reviewers
Pre-merge checks and finishing touchesImportant Pre-merge checks failedPlease resolve all errors before merging. Addressing warnings is optional. ❌ Failed checks (1 error, 2 warnings, 1 inconclusive)
✅ Passed checks (3 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
|
Hi! I'm I would like to apply some automated changes to this pull request, but it looks like I don't have the necessary permissions to do so. To get this pull request into a mergeable state, please do one of the following two things:
|
autofix.ci
github-actions
Bot
added
bug
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 50
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (16)
src/frontend/src/icons/outlook/outlook.jsx (1)
1-24: Missing dark theme support - inconsistent with PR objectives.The PR states its purpose is to "support dark theme," but this Outlook icon component has no
isDarkprop handling. The SVG uses hardcoded colors (#03A9F4,#B3E5FC,#0277BD,#FFFFFF) that won't adapt to theme changes. According to coding guidelines: "The SVG component must use theisDarkprop to support both light and dark mode."Apply this pattern to support dark theme:
-const OutlookIconSVG = (props) => ( +const OutlookIconSVG = ({ isDark, ...props }) => ( <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="20" height="20" {...props} > <path - fill="#03A9F4" + fill={isDark ? "#YourDarkColor" : "#03A9F4"} d="M21,31c0,1.104,0.896,2,2,2h17c1.104,0,2-0.896,2-2V16c0-1.104-0.896-2-2-2H23c-1.104,0-2,0.896-2,2V31z" /> {/* Apply similar conditional colors to other paths */} </svg> );As per coding guidelines. Based on learnings.
src/frontend/src/icons/wrike/wrike.jsx (2)
1-30: Missing dark mode support and forwardRef pattern.This component lacks the
isDarkprop required for dark theme support, and doesn't follow the forwardRef pattern established across the codebase. The hardcoded fill colors (#73787F, #00A551, #A5CD39) won't adapt to the theme.Based on learnings and coding guidelines.
Apply this pattern to add dark mode support and forwardRef:
+import React from "react"; + -const Icon = (props) => ( - <svg - xmlns="http://www.w3.org/2000/svg" - viewBox="0 0 100 100" - width="24" - height="24" - {...props} - > +const Icon = React.forwardRef((props, ref) => { + const { isDark, ...rest } = props; + const primaryColor = isDark ? "#FFFFFF" : "#73787F"; + const accentColor1 = isDark ? "#00C767" : "#00A551"; + const accentColor2 = isDark ? "#B8E850" : "#A5CD39"; + + return ( + <svg + ref={ref} + xmlns="http://www.w3.org/2000/svg" + viewBox="0 0 100 100" + width="24" + height="24" + {...rest} + > - <path - fill="#73787F" - d="M19.8,40.6L14.3,56.8L9.4,40.6H3.9l8.1,24.2h4.4L25.7,48.8l5.3,16h4.4l8.1-24.2h-5.4l-4.9,16.2L25.7,40.6H19.8z" - /> + <path + fill={primaryColor} + d="M19.8,40.6L14.3,56.8L9.4,40.6H3.9l8.1,24.2h4.4L25.7,48.8l5.3,16h4.4l8.1-24.2h-5.4l-4.9,16.2L25.7,40.6H19.8z" + /> - <path - fill="#73787F" - d="M39.7,64.8V47.7h4.8v3.8c1.5-4.4,6.5-3.8,6.5-3.8v4.7c0,0-6.5-0.5-6.5,4.8v7.5H39.7z" - /> + <path + fill={primaryColor} + d="M39.7,64.8V47.7h4.8v3.8c1.5-4.4,6.5-3.8,6.5-3.8v4.7c0,0-6.5-0.5-6.5,4.8v7.5H39.7z" + /> - <path fill="#73787F" d="M53.3,64.8v-10.5l4.8-4.6v15.1H53.3z" /> + <path fill={primaryColor} d="M53.3,64.8v-10.5l4.8-4.6v15.1H53.3z" /> - <path - fill="#73787F" - d="M62.2,64.8V45.9l4.8-4.8v12.8l5.9-6.2h5.9L71.7,55.4l8.6,9.4h-6.3l-6.8-7.4v7.4H62.2z" - /> + <path + fill={primaryColor} + d="M62.2,64.8V45.9l4.8-4.8v12.8l5.9-6.2h5.9L71.7,55.4l8.6,9.4h-6.3l-6.8-7.4v7.4H62.2z" + /> - <path - fill="#73787F" - d="M91.2,54.4c-0.1-1.9-1.4-3.4-3.6-3.4c-2.2,0-3.6,1.4-3.8,3.4H91.2z M81.8,62.6c-1.8-1.6-2.7-3.8-2.7-6.5c0-2.5,0.8-4.6,2.4-6.3c1.6-1.7,3.8-2.6,6.4-2.6c2.5,0,4.4,0.9,5.9,2.6c1.5,1.7,2.2,3.8,2.2,6.3v1.2h-12.1c0.5,2.3,2.7,3.5,5.7,3.5c1.9,0,3.7-0.5,5.4-1.5v3.8c-1.5,1.1-3.7,1.7-6.4,1.7C85.4,66.8,83.6,64.2,81.8,62.6L81.8,62.6z" - /> + <path + fill={primaryColor} + d="M91.2,54.4c-0.1-1.9-1.4-3.4-3.6-3.4c-2.2,0-3.6,1.4-3.8,3.4H91.2z M81.8,62.6c-1.8-1.6-2.7-3.8-2.7-6.5c0-2.5,0.8-4.6,2.4-6.3c1.6-1.7,3.8-2.6,6.4-2.6c2.5,0,4.4,0.9,5.9,2.6c1.5,1.7,2.2,3.8,2.2,6.3v1.2h-12.1c0.5,2.3,2.7,3.5,5.7,3.5c1.9,0,3.7-0.5,5.4-1.5v3.8c-1.5,1.1-3.7,1.7-6.4,1.7C85.4,66.8,83.6,64.2,81.8,62.6L81.8,62.6z" + /> - <path fill="#00A551" d="M63.2,34.9l-10.8,10.8l3.2,3.2l14-14H63.2z" /> + <path fill={accentColor1} d="M63.2,34.9l-10.8,10.8l3.2,3.2l14-14H63.2z" /> - <path fill="#A5CD39" d="M53.6,40.6h-6.4l8.4,8.4l3.2-3.2L53.6,40.6z" /> + <path fill={accentColor2} d="M53.6,40.6h-6.4l8.4,8.4l3.2-3.2L53.6,40.6z" /> - </svg> -); + </svg> + ); +}); + +Icon.displayName = "WrikeIcon"; + export default Icon;
1-30: PR description inconsistency.The PR description states that icons updated are "asana, attio, klaviyo, miro, missive," but this file updates the wrike icon which is not mentioned. Please update the PR description to include all modified icons.
src/frontend/src/icons/googlecalendar/googlecalendar.jsx (1)
1-22: Missing dark theme support in SVG component.According to coding guidelines, the SVG component must use the
isDarkprop to support both light and dark mode. The current implementation uses hardcoded colors (#fff,#1e88e5,#fbc02d, etc.) without conditional rendering based on theme.Apply this diff to add dark theme support:
-const Icon = (props) => ( - <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" {...props}> - <rect width="23" height="23" x="13" y="13" fill="#fff" /> +const Icon = ({ isDark, ...props }) => ( + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" {...props}> + <rect width="23" height="23" x="13" y="13" fill={isDark ? "#1a1a1a" : "#fff"} /> <polygon fill="#1e88e5" points="25.68,20.92 26.688,22.36 28.272,21.208 28.272,29.56 30,29.56 30,18.616 28.56,18.616" />Note: You may need to adjust other color values as well to ensure proper contrast in dark mode.
Based on coding guidelines.
src/frontend/src/icons/googlecalendar/index.tsx (1)
5-22: MissingisDarkprop to support dark theme.The wrapper component doesn't accept or pass the
isDarkprop to the underlyingGooglecalendarIconSVGcomponent. According to coding guidelines, the index.tsx must pass theisDarkprop to support theme switching.Apply this diff to add dark theme support:
export const GooglecalendarIcon = forwardRef< SVGSVGElement, - React.PropsWithChildren<{}> + React.PropsWithChildren<{ isDark?: boolean }> ->((props, ref) => { +>(({ isDark, ...props }, ref) => { return ( <span style={{ display: "inline-grid", width: 22, height: 22, placeItems: "center", flexShrink: 0, }} > - <GooglecalendarIconSVG ref={ref} {...props} /> + <GooglecalendarIconSVG ref={ref} isDark={isDark} {...props} /> </span> ); });Based on coding guidelines.
src/frontend/src/icons/googlesheets/googlesheets.jsx (1)
1-20: Critical: Missing dark mode support despite PR objectives.The PR objectives state this is about updating icons to support dark theme, but this SVG component doesn't implement or use the
isDarkprop. The icon uses hardcoded colors that won't adapt to dark mode.According to coding guidelines: "The SVG component must use the
isDarkprop to support both light and dark mode." Apply this pattern:-const Icon = (props) => ( +const Icon = ({ isDark, ...props }) => ( <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="21px" height="21px" > <path - fill="#43a047" + fill={isDark ? "#YOUR_DARK_COLOR" : "#43a047"} d="M37,45H11c-1.657,0-3-1.343-3-3V6c0-1.657,1.343-3,3-3h19l10,10v29C40,43.657,38.657,45,37,45z" /> - <path fill="#c8e6c9" d="M40 13L30 13 30 3z" /> - <path fill="#2e7d32" d="M40 13L30 13 30 3z" /> + <path fill={isDark ? "#YOUR_DARK_COLOR" : "#c8e6c9"} d="M40 13L30 13 30 3z" /> + <path fill={isDark ? "#YOUR_DARK_COLOR" : "#2e7d32"} d="M40 13L30 13 30 3z" /> <path - fill="#e8f5e9" + fill={isDark ? "#YOUR_DARK_COLOR" : "#e8f5e9"} d="M31,23H17h-2v2v2v2v2v2v2v2h18v-2v-2v-2v-2v-2v-2v-2H31z M17,25h4v2h-4V25z M17,29h4v2h-4V29z M17,33h4v2h-4V33z M31,35h-8v-2h8V35z M31,31h-8v-2h8V31z M31,27h-8v-2h8V27z" /> </svg> );Based on coding guidelines and learnings.
src/frontend/src/icons/reddit/reddit.jsx (1)
1-12: Missing dark theme support via isDark prop.The PR objective states this change is to "support dark theme", but this icon component does not accept or use an
isDarkprop. The fill colors are hard-coded (#fe3155and#fff), preventing theme adaptation. Per coding guidelines and retrieved learnings, custom SVG icon components must use theisDarkprop to support both light and dark modes.Apply this diff to add dark theme support:
-const RedditIconSVG = (props) => ( - <svg viewBox="0 0 16 16" width="20" height="20" {...props}> +const RedditIconSVG = ({ isDark, ...props }) => ( + <svg viewBox="0 0 16 16" width="20" height="20" {...props}> <path - fill="#fe3155" + fill={isDark ? "#ff6b8a" : "#fe3155"} d="M8,0c4.418,0,8,3.582,8,8s-3.582,8-8,8s-8-3.582-8-8S3.582,0,8,0z" /> <path - fill="#fff" + fill={isDark ? "#e0e0e0" : "#fff"} d="M12.124,6.875c-0.285,0.009-0.558,0.127-0.766,0.324c-0.911-0.62-1.98-0.96-3.08-0.984l0.52-2.496 l1.711,0.36c0.047,0.44,0.442,0.758,0.882,0.711c0.438-0.049,0.756-0.442,0.709-0.882c-0.047-0.44-0.442-0.758-0.88-0.709 c-0.253,0.025-0.48,0.173-0.605,0.391l-1.96-0.391C8.522,3.167,8.387,3.251,8.358,3.387c0,0.002,0,0.002,0,0.004L7.767,6.167 c-1.113,0.016-2.198,0.36-3.12,0.984c-0.469-0.442-1.209-0.42-1.651,0.051c-0.442,0.471-0.42,1.209,0.053,1.651 c0.091,0.085,0.196,0.16,0.313,0.211c-0.007,0.118-0.007,0.235,0,0.353c0,1.791,2.089,3.249,4.664,3.249 c2.576,0,4.664-1.456,4.664-3.249c0.007-0.118,0.007-0.234,0-0.353c0.402-0.2,0.655-0.615,0.645-1.064 C13.311,7.356,12.771,6.853,12.124,6.875z M5.335,8.8c0-0.442,0.358-0.8,0.802-0.8c0.442,0,0.8,0.358,0.8,0.8s-0.358,0.8-0.8,0.8 S5.335,9.242,5.335,8.8z M9.971,11C9.616,11.328,8.988,11.616,8,11.616S6.384,11.328,6.029,11c-0.073-0.067-0.062-0.227,0.031-0.304 c0.078-0.065,0.193-0.065,0.275,0c0.48,0.353,1.07,0.48,1.665,0.48s1.185-0.127,1.665-0.48c0.082-0.065,0.196-0.065,0.275,0 C10.033,10.773,10.044,10.933,9.971,11z M9.842,9.6C9.4,9.6,9.04,9.242,9.04,8.8C9.042,8.358,9.4,8,9.842,8 c0.442,0,0.8,0.358,0.8,0.8S10.284,9.6,9.842,9.6z" /> </svg> );Note: You may need to adjust the dark theme colors based on design requirements. Based on learnings.
src/frontend/src/icons/reddit/index.tsx (1)
1-21: PR scope inconsistency: Description significantly underspecifies actual changes.The PR description mentions updating "asana, attio, klaviyo, miro, missive" icons, but the git diff shows 40+ icon directories modified, including reddit. Either the PR description needs updating to accurately reflect all changes, or the scope should be narrowed to the intended icons.
src/frontend/src/icons/supabase/index.tsx (1)
5-8: Type inconsistency: Component returns span but typed as SVGSVGElement.The
forwardRefis typed asSVGSVGElement, but the component now returns a<span>element wrapping the SVG. While the ref is correctly forwarded to the underlying SVG element, the root element of this component is now a span, which creates a type mismatch.Consider whether the wrapper approach aligns with the expected component contract, or if the type definition should be updated to reflect the actual root element type.
src/frontend/src/icons/one_drive/one_drive.jsx (2)
1-1: Implement dark theme support via isDark prop.The component receives
propsbut doesn't use them. According to coding guidelines, SVG components must use theisDarkprop to support both light and dark modes. The PR objectives specifically mention adding dark theme support, yet this icon has no theme-aware color handling.Apply these changes to support dark theme and proper ref forwarding:
-const Icon = (props) => ( +import React, { forwardRef } from "react"; + +const Icon = forwardRef(({ isDark, ...props }, ref) => ( <svg + ref={ref} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="20px" height="20px" + {...props} > - <linearGradient - id="NqAl5bicO~9wmXV3Tvu1Ra" + <linearGradient + id={isDark ? "NqAl5bicO~9wmXV3Tvu1Ra_dark" : "NqAl5bicO~9wmXV3Tvu1Ra"} x1="24.5" x2="24.5" y1="7.032" y2="22.852" gradientUnits="userSpaceOnUse" > - <stop offset="0" stop-color="#0571bf" /> - <stop offset="1" stop-color="#0268ba" /> + <stop offset="0" stopColor={isDark ? "#4A9EDA" : "#0571bf"} /> + <stop offset="1" stopColor={isDark ? "#3B8ED0" : "#0268ba"} /> </linearGradient> + {/* Apply similar isDark logic to other gradients and paths */} {/* ... */} </svg> -); +)); + export default Icon;Note: Adjust all gradient stops and fill colors for dark theme. Consider consulting the design team for appropriate dark mode color values.
16-17: Fix invalid HTML attribute syntax.The SVG uses
stop-colorwith hyphens, which is invalid JSX syntax. In React/JSX, attribute names should use camelCase.Apply this diff to fix the attribute naming across all
<stop>elements:- <stop offset="0" stop-color="#0571bf" /> - <stop offset="1" stop-color="#0268ba" /> + <stop offset="0" stopColor="#0571bf" /> + <stop offset="1" stopColor="#0268ba" />This applies to all gradient
<stop>elements in the file (lines 16, 17, 31, 32, 46, 47, 61, 62).src/frontend/src/icons/airtable/airtable.jsx (1)
1-39: Inconsistency with PR objectives and coding guidelines - dark theme support not implemented.The PR title claims to update icons "to support dark theme," but this file only reduces the SVG size from 24px to 22px without implementing dark mode functionality. According to the coding guidelines, SVG components must use the
isDarkprop to support both light and dark mode, but this component doesn't accept or use that prop.Additionally, this file (
airtable.jsx) is not one of the icons mentioned in the PR description (asana, attio, klaviyo, miro, missive).To properly support dark mode as per coding guidelines, the component should:
- Accept an
isDarkprop- Conditionally adjust colors based on the prop value
Example pattern:
-const Icon = (props) => ( +const Icon = ({ isDark, ...props }) => ( <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="22px" height="22px" baseProfile="basic" + {...props} > - <path fill="#40396e" ... /> + <path fill={isDark ? "#ADJUSTED_COLOR" : "#40396e"} ... />Based on coding guidelines.
src/frontend/src/icons/supabase/SupabaseIcon.jsx (1)
1-62: Inconsistency with PR objectives and coding guidelines - dark theme support not implemented.Similar to the airtable icon, this file only adjusts the SVG size (from 1em to 1.1em) without implementing dark mode functionality. The component doesn't accept or use the
isDarkprop as required by coding guidelines for supporting both light and dark mode.Additionally, this icon (supabase) is not mentioned in the PR description, which claims to update asana, attio, klaviyo, miro, and missive icons.
Based on coding guidelines.
src/frontend/src/icons/Missive/index.tsx (1)
4-21: MissingisDarkprop in component signature and forwarding.The index.tsx wrapper should accept and forward the
isDarkprop to enable dark theme support. Currently, the props typeReact.PropsWithChildren<{}>doesn't includeisDark, and the prop is not being passed toMissiveIconSVG.Apply this diff to add isDark prop support:
export const MissiveIcon = forwardRef< SVGSVGElement, - React.PropsWithChildren<{}> + React.PropsWithChildren<{ isDark?: boolean }> ->((props, ref) => { +>((props, ref) => { + const { isDark, ...rest } = props; return ( <span style={{ display: "inline-grid", width: 20, height: 20, placeItems: "center", flexShrink: 0, }} > - <MissiveIconSVG ref={ref} {...props} /> + <MissiveIconSVG ref={ref} isDark={isDark} {...rest} /> </span> ); });Based on coding guidelines.
src/frontend/src/icons/Dropbox/index.tsx (1)
5-22: Missing isDark prop for dark theme support.The wrapper component does not accept or forward an
isDarkprop to the underlying SVG. According to coding guidelines, icon components should support both light and dark mode by accepting and passing the 'isDark' prop. Based on coding guidelines.Apply this diff to add isDark prop support:
export const DropboxIcon = forwardRef< SVGSVGElement, - React.PropsWithChildren<{}> + React.PropsWithChildren<{ isDark?: boolean }> ->((props, ref) => { +>((props, ref) => { + const { isDark, ...restProps } = props; return ( <span style={{ display: "inline-grid", width: 22, height: 22, placeItems: "center", flexShrink: 0, }} > - <SvgDropbox ref={ref} {...props} /> + <SvgDropbox ref={ref} isDark={isDark} {...restProps} /> </span> ); });src/frontend/src/icons/googledocs/index.tsx (1)
4-21: Missing isDark prop for dark theme support.The wrapper component does not accept or forward an
isDarkprop to the underlying SVG. According to coding guidelines, icon components should support both light and dark mode by accepting and passing the 'isDark' prop. Based on coding guidelines.Apply this diff to add isDark prop support:
export const GoogledocsIcon = forwardRef< SVGSVGElement, - React.PropsWithChildren<{}> + React.PropsWithChildren<{ isDark?: boolean }> ->((props, ref) => { +>((props, ref) => { + const { isDark, ...restProps } = props; return ( <span style={{ display: "inline-grid", width: 22, height: 22, placeItems: "center", flexShrink: 0, }} > - <GoogledocsIconSVG ref={ref} {...props} /> + <GoogledocsIconSVG ref={ref} isDark={isDark} {...restProps} /> </span> ); });
🧹 Nitpick comments (6)
src/frontend/src/icons/calendly/index.tsx (1)
15-15: Remove ineffectiveflexShrinkproperty.The
flexShrink: 0property has no effect oninline-gridelements, as it only applies to flex container items. Since the parent usesdisplay: "inline-grid", this property can be safely removed.Apply this diff:
<span style={{ display: "inline-grid", width: 22, height: 22, placeItems: "center", - flexShrink: 0, }} >src/frontend/src/icons/asana/asana.jsx (1)
9-20: Potential gradient ID collision.The gradient uses a generic ID "a" which could conflict if multiple Asana icons or other SVGs with the same ID are rendered on the same page. While React typically isolates components, SVG gradient IDs exist in the global document namespace.
Consider using a more unique ID to prevent collisions:
<radialGradient - id="a" + id="asana-gradient" cx="943.992" cy="1221.416" r=".663" gradientTransform="matrix(944.8934 0 0 -873.3772 -890717.875 1067234.75)" gradientUnits="userSpaceOnUse" > <stop offset="0" stopColor="#ffb900" /> <stop offset=".6" stopColor="#f95d8f" /> <stop offset=".999" stopColor="#f95353" /> </radialGradient> <path - fill="url(#a)" + fill="url(#asana-gradient)" d="M1520.766 462.371c-113.508 0-205.508 92-205.508 205.488 0 113.499 92 205.518 205.508 205.518 113.489 0 205.488-92.019 205.488-205.518 0-113.488-91.999-205.488-205.488-205.488zm-533.907.01c-113.489.01-205.498 91.99-205.498 205.488 0 113.489 92.009 205.498 205.498 205.498 113.498 0 205.508-92.009 205.508-205.498 0-113.499-92.01-205.488-205.518-205.488h.01zm472.447-256.883c0 113.489-91.999 205.518-205.488 205.518-113.508 0-205.508-92.029-205.508-205.518S1140.31 0 1253.817 0c113.489 0 205.479 92.009 205.479 205.498h.01z" />src/frontend/src/icons/one_drive/index.tsx (1)
8-20: Consider extracting repeated inline styles.The 22x22 inline-grid wrapper pattern appears across multiple icons in this PR. Extracting these styles to a shared constant or styled component would reduce duplication and improve maintainability.
Example approach:
const ICON_WRAPPER_STYLE = { display: "inline-grid", width: 22, height: 22, placeItems: "center", flexShrink: 0, } as const; export const One_DriveIcon = forwardRef< SVGSVGElement, React.PropsWithChildren<{}> >((props, ref) => { return ( <span style={ICON_WRAPPER_STYLE}> <One_DriveIconSVG ref={ref} {...props} /> </span> ); });src/frontend/src/icons/github/index.tsx (1)
9-21: Verify wrapper size consistency across icon set.The outer wrapper uses 24×24 with an inner SVG of 22×22, while most other icons in this PR use a 22×22 wrapper (contentful, todoist, linear, klaviyo). This size difference may cause inconsistent visual alignment.
Consider standardizing to 22×22 if consistent sizing is desired:
<span style={{ display: "inline-grid", - width: 24, - height: 24, + width: 22, + height: 22, placeItems: "center", flexShrink: 0, }} > - <GithubIconSVG ref={ref} {...props} style={{ width: 22, height: 22 }} /> + <GithubIconSVG ref={ref} {...props} /> </span>src/frontend/src/icons/attio/index.tsx (1)
6-17: Note: Inconsistent wrapper dimensions.The wrapper uses 20×20 dimensions while most other icon wrappers in this PR (Mem0Composio, Fireflies, Apollo, ExaComposio) use 22×22. If this size difference is intentional for visual balance, consider documenting why Attio needs a smaller wrapper.
src/lfx/src/lfx/components/composio/__init__.py (1)
149-183: Remove duplicate exports from__all__.
__all__now repeatsComposioCalendlyAPIComponent,ComposioKlaviyoAPIComponent, andComposioLinearAPIComponent, which bloats the public surface and violates the usual alphabetical uniqueness we keep in this module. Please collapse each of these to a single entry.- "ComposioCalendlyAPIComponent", - "ComposioCalendlyAPIComponent", + "ComposioCalendlyAPIComponent", … - "ComposioKlaviyoAPIComponent", - "ComposioKlaviyoAPIComponent", + "ComposioKlaviyoAPIComponent", … - "ComposioLinearAPIComponent", - "ComposioLinearAPIComponent", + "ComposioLinearAPIComponent",Based on learnings
| const Icon = (props) => ( | ||
| <svg | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| viewBox="0 0 330 330" | ||
| width="18" | ||
| height="18" | ||
| > | ||
| <g | ||
| fill="None" | ||
| fill-opacity="0.0" | ||
| stroke="#F7FD34" | ||
| stroke-opacity="1.00" | ||
| stroke-width="0.3" | ||
| > | ||
| <path | ||
| d=" | ||
| M 0.00 330.00 | ||
| L 330.00 330.00 | ||
| L 330.00 0.00 | ||
| L 0.00 0.00 | ||
| L 0.00 330.00 | ||
| M 54.00 67.00 | ||
| C 57.14 63.32 62.40 55.70 67.00 54.00 | ||
| C 71.46 52.35 77.46 60.98 81.00 64.00 | ||
| C 83.53 66.16 85.72 68.72 88.00 71.00 | ||
| C 89.58 72.35 91.47 73.69 93.00 75.00 | ||
| C 95.53 77.16 97.72 79.72 100.00 82.00 | ||
| C 110.98 91.38 121.14 101.72 132.00 111.00 | ||
| C 134.53 113.16 136.72 115.72 139.00 118.00 | ||
| C 143.56 121.90 154.96 138.50 161.69 132.69 C 168.43 126.89 159.30 112.57 157.22 103.78 C 155.15 94.98 150.56 82.30 147.22 72.78 C 143.89 63.26 141.98 52.01 138.02 41.98 C 134.07 31.94 128.00 18.84 143.00 19.00 C 158.01 19.17 166.43 14.28 181.00 18.00 | ||
| C 179.86 38.82 182.51 64.68 181.00 85.00 C 179.49 105.32 187.25 128.85 172.75 143.75 C 158.25 158.66 140.27 142.80 125.92 136.08 C 111.58 129.35 96.84 119.78 82.30 112.70 C 67.77 105.61 52.91 96.39 38.00 90.00 | ||
| C 41.19 81.27 48.64 74.61 54.00 67.00 | ||
| M 260.00 50.00 | ||
| C 266.41 53.97 274.94 61.46 279.00 68.00 | ||
| C 281.42 71.90 278.58 72.94 275.00 76.00 | ||
| C 258.38 90.21 243.23 109.35 229.00 126.00 | ||
| C 226.53 128.89 223.61 131.39 221.00 134.00 | ||
| C 213.01 143.35 209.92 144.20 201.75 154.75 C 193.58 165.31 211.91 167.45 220.68 161.68 C 229.45 155.91 241.46 156.28 251.02 152.02 C 260.59 147.77 271.36 145.91 281.22 142.22 C 291.09 138.54 301.89 135.96 312.00 133.00 | ||
| C 315.36 146.80 316.38 161.24 316.00 176.00 | ||
| C 315.89 177.49 316.07 180.85 315.00 182.00 |
There was a problem hiding this comment.
Add dark-mode color handling to the Apollo SVG
This component renders a complex, multi-color SVG but ignores the isDark prop entirely. Without branching the fills/strokes based on isDark, the icon won’t adapt for dark mode—precisely what this PR is supposed to deliver. Please destructure isDark, compute the appropriate palette, and apply it across the SVG elements. As per coding guidelines.
🤖 Prompt for AI Agents
In src/frontend/src/icons/Apollo/apollo.jsx around lines 1 to 40, the component
ignores the isDark prop so the SVG doesn't switch colors for dark mode;
destructure isDark from props, compute a small palette (e.g. default light and
alternate dark values) based on isDark, and replace hard-coded fill/stroke
attributes on the svg/g/path elements with variables from that palette (ensure
attribute names use React-friendly casing like fillOpacity and strokeWidth),
preserving existing layout and following project coding conventions for prop
defaults and prop-types/type annotations.
| import React, { forwardRef } from "react"; | ||
| import ApolloIconSVG from "./apollo"; | ||
|
|
||
| export const ApolloIcon = forwardRef< | ||
| SVGSVGElement, | ||
| React.PropsWithChildren<{}> | ||
| >((props, ref) => { | ||
| return ( | ||
| <span | ||
| style={{ | ||
| display: "inline-grid", | ||
| width: 22, | ||
| height: 22, | ||
| placeItems: "center", | ||
| flexShrink: 0, | ||
| }} | ||
| > | ||
| <ApolloIconSVG ref={ref} {...props} /> | ||
| </span> | ||
| ); | ||
| }); |
There was a problem hiding this comment.
🧩 Analysis chain
LGTM with verification needed.
The wrapper component correctly implements the forwardRef pattern. However, ensure that the underlying ApolloIconSVG component in ./apollo properly implements the isDark prop for dark theme support.
As per coding guidelines.
🏁 Script executed:
#!/bin/bash
# Verify that apollo.jsx/tsx implements isDark prop
fd -e jsx -e tsx -e js -e ts "apollo" src/frontend/src/icons/Apollo/ --exec rg -n -A 3 "isDark" {}Length of output: 0
Now let me verify the actual files in the Apollo directory:
🏁 Script executed:
#!/bin/bash
# List all files in Apollo directory
ls -la src/frontend/src/icons/Apollo/Length of output: 305
🏁 Script executed:
#!/bin/bash
# Check if apollo file exists and show its content
find src/frontend/src/icons/Apollo -type f \( -name "*.tsx" -o -name "*.ts" -o -name "*.jsx" -o -name "*.js" \) -exec echo "=== {} ===" \; -exec head -30 {} \;Length of output: 1429
🏁 Script executed:
#!/bin/bash
# Specifically look for the apollo SVG component
cat src/frontend/src/icons/Apollo/apollo.tsx 2>/dev/null || cat src/frontend/src/icons/Apollo/apollo.jsx 2>/dev/null || cat src/frontend/src/icons/Apollo/apollo.ts 2>/dev/null || echo "File not found in standard locations"Length of output: 31624
Let me check if this is a pattern issue or specific to this icon:Now let me verify if other icons in the repository implement the isDark prop pattern as per the learnings:Perfect! I found the official documentation. Now I have clear evidence. Let me verify one more detail by examining if there's a useDarkStore pattern being used:
🏁 Script executed:
#!/bin/bash
# Check if other icon implementations use useDarkStore or isDark prop
rg -n "useDarkStore" src/frontend/src/icons/ -A 5 | head -50Length of output: 475
| const SvgAsana = (props) => ( | ||
| <svg | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| viewBox="0 0 50 50" | ||
| width="24px" | ||
| height="24px" | ||
| width="1em" | ||
| height="1em" | ||
| viewBox="781.361 0 944.893 873.377" | ||
| {...props} | ||
| > | ||
| <path d="M 25 6.4140625 C 22.482 6.4140625 20.441406 8.4556563 20.441406 10.972656 C 20.441406 13.489656 22.483 15.529297 25 15.529297 C 27.517 15.529297 29.558594 13.489656 29.558594 10.972656 C 29.558594 8.4556563 27.517 6.4150625 25 6.4140625 z M 19.078125 16.669922 C 16.561125 16.669922 14.521484 18.710516 14.521484 21.228516 C 14.521484 23.745516 16.561125 25.785156 19.078125 25.785156 C 21.595125 25.785156 23.636719 23.745516 23.636719 21.228516 C 23.636719 18.710516 21.596125 16.669922 19.078125 16.669922 z M 30.921875 16.669922 C 28.404875 16.669922 26.363281 18.711516 26.363281 21.228516 C 26.363281 23.745516 28.404875 25.785156 30.921875 25.785156 C 33.438875 25.785156 35.478516 23.745516 35.478516 21.228516 C 35.477516 18.710516 33.438875 16.669922 30.921875 16.669922 z M 5.5039062 31.607422 C 3.0159062 31.607422 1 33.624281 1 36.113281 C 1 38.602281 3.0169062 40.621094 5.5039062 40.621094 C 6.5979063 40.621094 7.7908594 40.196063 8.3808594 39.414062 C 8.4208594 39.864063 8.7793438 40.4375 9.4023438 40.4375 L 9.7675781 40.4375 C 9.9085781 40.4375 10.025391 40.320687 10.025391 40.179688 L 10.025391 32.162109 L 10.023438 32.162109 C 10.016438 32.027109 9.9045781 31.919922 9.7675781 31.919922 L 8.6367188 31.919922 C 8.4997187 31.919922 8.3888594 32.027109 8.3808594 32.162109 L 8.3808594 32.814453 C 7.6888594 31.961453 6.5979063 31.607422 5.5039062 31.607422 z M 15.074219 31.607422 C 13.529219 31.607422 11.875 32.374422 11.875 34.232422 C 11.875 35.446422 12.792375 36.197547 13.859375 36.560547 C 14.926375 36.923547 16.623047 37.064656 16.623047 37.972656 C 16.623047 38.652656 15.845797 39.044922 15.091797 39.044922 C 14.300797 39.044922 13.476656 38.790578 12.722656 38.267578 C 12.652656 38.219578 12.493141 38.161172 12.369141 38.326172 L 11.748047 39.214844 C 11.748047 39.214844 11.613687 39.391031 11.804688 39.582031 C 12.719688 40.254031 13.81175 40.619141 15.09375 40.619141 C 16.78475 40.619141 18.314453 39.607703 18.314453 37.970703 C 18.314453 36.123703 16.672016 35.636469 15.166016 35.230469 C 14.302016 35.010469 13.564453 34.805203 13.564453 34.158203 C 13.564453 33.618203 14.132219 33.183594 15.074219 33.183594 C 16.016219 33.183594 16.634547 33.621469 16.810547 33.730469 C 16.986547 33.838469 17.109687 33.753344 17.179688 33.652344 L 17.804688 32.759766 C 17.804687 32.759766 17.941797 32.563578 17.716797 32.392578 C 17.062797 31.930578 16.052219 31.607422 15.074219 31.607422 z M 23.90625 31.607422 C 21.41925 31.607422 19.404297 33.624281 19.404297 36.113281 C 19.404297 38.602281 21.41925 40.621094 23.90625 40.621094 C 25.00025 40.621094 26.193203 40.196063 26.783203 39.414062 C 26.823203 39.864063 27.183641 40.4375 27.806641 40.4375 L 28.171875 40.4375 C 28.312875 40.4375 28.427734 40.320687 28.427734 40.179688 L 28.427734 32.162109 C 28.420734 32.027109 28.308875 31.919922 28.171875 31.919922 L 27.041016 31.919922 C 26.904016 31.919922 26.793156 32.027109 26.785156 32.162109 L 26.783203 32.162109 L 26.783203 32.814453 C 26.091203 31.961453 25.00025 31.607422 23.90625 31.607422 z M 44.478516 31.607422 C 41.991516 31.607422 39.974609 33.624281 39.974609 36.113281 C 39.974609 38.602281 41.991516 40.621094 44.478516 40.621094 C 45.572516 40.621094 46.765469 40.196063 47.355469 39.414062 C 47.394469 39.864063 47.755906 40.4375 48.378906 40.4375 L 48.742188 40.4375 C 48.883187 40.4375 49 40.320687 49 40.179688 L 49 32.162109 L 48.998047 32.162109 C 48.991047 32.027109 48.879188 31.919922 48.742188 31.919922 L 47.611328 31.919922 C 47.474328 31.919922 47.363469 32.027109 47.355469 32.162109 L 47.355469 32.814453 C 46.663469 31.961453 45.572516 31.607422 44.478516 31.607422 z M 34.720703 31.626953 C 33.598703 31.626953 32.678516 32.274031 32.353516 32.832031 C 32.283516 32.396031 32.052938 31.9375 31.335938 31.9375 L 30.970703 31.9375 C 30.829703 31.9375 30.712891 32.054313 30.712891 32.195312 L 30.712891 39.433594 L 30.712891 39.435547 L 30.712891 40.212891 L 30.714844 40.212891 C 30.721844 40.347891 30.833703 40.455078 30.970703 40.455078 L 32.099609 40.455078 C 32.116609 40.455078 32.133391 40.454172 32.150391 40.451172 C 32.157391 40.450172 32.165828 40.447313 32.173828 40.445312 C 32.181828 40.442312 32.189266 40.4405 32.197266 40.4375 C 32.207266 40.4335 32.216562 40.426875 32.226562 40.421875 C 32.231563 40.418875 32.235234 40.417062 32.240234 40.414062 C 32.251234 40.407063 32.263438 40.397672 32.273438 40.388672 C 32.275438 40.386672 32.276344 40.385766 32.277344 40.384766 C 32.288344 40.373766 32.298594 40.361609 32.308594 40.349609 C 32.336594 40.310609 32.354422 40.264844 32.357422 40.214844 L 32.357422 35.478516 C 32.357422 34.222516 33.374859 33.203125 34.630859 33.203125 C 35.885859 33.203125 36.902344 34.222516 36.902344 35.478516 L 36.904297 39.4375 C 36.904528 39.440602 36.904297 39.443932 36.904297 39.447266 L 36.904297 40.214844 L 36.90625 40.214844 C 36.91325 40.349844 37.025109 40.457031 37.162109 40.457031 L 38.292969 40.457031 C 38.309969 40.457031 38.32675 40.456125 38.34375 40.453125 C 38.35075 40.452125 38.357281 40.449266 38.363281 40.447266 C 38.372281 40.444266 38.381625 40.4415 38.390625 40.4375 C 38.399625 40.4335 38.409969 40.428828 38.417969 40.423828 C 38.422969 40.420828 38.428594 40.418062 38.433594 40.414062 C 38.443594 40.407063 38.453891 40.400578 38.462891 40.392578 C 38.464891 40.390578 38.46675 40.388719 38.46875 40.386719 C 38.47975 40.376719 38.489047 40.365516 38.498047 40.353516 C 38.498047 40.353516 38.5 40.351562 38.5 40.351562 C 38.528 40.312562 38.545828 40.266797 38.548828 40.216797 L 38.548828 40.214844 L 38.546875 39.691406 L 38.546875 35.542969 C 38.546875 33.204969 37.071703 31.626953 34.720703 31.626953 z M 5.5078125 33.183594 C 7.0898125 33.183594 8.3710938 34.495281 8.3710938 36.113281 C 8.3710938 37.731281 7.0888125 39.044922 5.5078125 39.044922 C 3.9258125 39.044922 2.6445313 37.731281 2.6445312 36.113281 C 2.6445312 34.495281 3.9258125 33.183594 5.5078125 33.183594 z M 23.910156 33.183594 C 25.492156 33.183594 26.775391 34.495281 26.775391 36.113281 C 26.775391 37.731281 25.491156 39.044922 23.910156 39.044922 C 22.328156 39.044922 21.046875 37.731281 21.046875 36.113281 C 21.046875 34.495281 22.328156 33.183594 23.910156 33.183594 z M 44.482422 33.183594 C 46.064422 33.183594 47.347656 34.495281 47.347656 36.113281 C 47.347656 37.731281 46.064422 39.044922 44.482422 39.044922 C 42.900422 39.044922 41.619141 37.731281 41.619141 36.113281 C 41.619141 34.495281 42.900422 33.183594 44.482422 33.183594 z" /> | ||
| <radialGradient | ||
| id="a" | ||
| cx="943.992" | ||
| cy="1221.416" | ||
| r=".663" | ||
| gradientTransform="matrix(944.8934 0 0 -873.3772 -890717.875 1067234.75)" | ||
| gradientUnits="userSpaceOnUse" | ||
| > | ||
| <stop offset="0" stopColor="#ffb900" /> | ||
| <stop offset=".6" stopColor="#f95d8f" /> | ||
| <stop offset=".999" stopColor="#f95353" /> | ||
| </radialGradient> | ||
| <path | ||
| fill="url(#a)" | ||
| d="M1520.766 462.371c-113.508 0-205.508 92-205.508 205.488 0 113.499 92 205.518 205.508 205.518 113.489 0 205.488-92.019 205.488-205.518 0-113.488-91.999-205.488-205.488-205.488zm-533.907.01c-113.489.01-205.498 91.99-205.498 205.488 0 113.489 92.009 205.498 205.498 205.498 113.498 0 205.508-92.009 205.508-205.498 0-113.499-92.01-205.488-205.518-205.488h.01zm472.447-256.883c0 113.489-91.999 205.518-205.488 205.518-113.508 0-205.508-92.029-205.508-205.518S1140.31 0 1253.817 0c113.489 0 205.479 92.009 205.479 205.498h.01z" | ||
| /> | ||
| </svg> | ||
| ); | ||
| export default Icon; | ||
| export default SvgAsana; |
There was a problem hiding this comment.
Dark theme support not implemented despite PR objective.
The PR title claims to add dark theme support, but the SvgAsana component doesn't use the isDark prop to adjust colors for different themes. The radialGradient colors are hardcoded and will appear identical in both light and dark modes.
According to coding guidelines: "The SVG component must use the isDark prop to support both light and dark mode." Based on learnings.
To implement dark theme support, destructure the isDark prop and conditionally render gradient colors:
-const SvgAsana = (props) => (
+const SvgAsana = ({ isDark, ...props }) => (
<svg
xmlns="http://www.w3.org/2000/svg"
width="1em"
height="1em"
viewBox="781.361 0 944.893 873.377"
{...props}
>
<radialGradient
id="a"
cx="943.992"
cy="1221.416"
r=".663"
gradientTransform="matrix(944.8934 0 0 -873.3772 -890717.875 1067234.75)"
gradientUnits="userSpaceOnUse"
>
- <stop offset="0" stopColor="#ffb900" />
- <stop offset=".6" stopColor="#f95d8f" />
- <stop offset=".999" stopColor="#f95353" />
+ <stop offset="0" stopColor={isDark ? "#ffd700" : "#ffb900"} />
+ <stop offset=".6" stopColor={isDark ? "#ff8fb3" : "#f95d8f"} />
+ <stop offset=".999" stopColor={isDark ? "#ff7373" : "#f95353"} />
</radialGradient>
<path
fill="url(#a)"
d="M1520.766 462.371c-113.508 0-205.508 92-205.508 205.488 0 113.499 92 205.518 205.508 205.518 113.489 0 205.488-92.019 205.488-205.518 0-113.488-91.999-205.488-205.488-205.488zm-533.907.01c-113.489.01-205.498 91.99-205.498 205.488 0 113.489 92.009 205.498 205.498 205.498 113.498 0 205.508-92.009 205.508-205.498 0-113.499-92.01-205.488-205.518-205.488h.01zm472.447-256.883c0 113.489-91.999 205.518-205.488 205.518-113.508 0-205.508-92.029-205.508-205.518S1140.31 0 1253.817 0c113.489 0 205.479 92.009 205.479 205.498h.01z"
/>
</svg>
);Note: Adjust the dark theme colors as needed to ensure proper visibility and brand consistency in dark mode.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const SvgAsana = (props) => ( | |
| <svg | |
| xmlns="http://www.w3.org/2000/svg" | |
| viewBox="0 0 50 50" | |
| width="24px" | |
| height="24px" | |
| width="1em" | |
| height="1em" | |
| viewBox="781.361 0 944.893 873.377" | |
| {...props} | |
| > | |
| <path d="M 25 6.4140625 C 22.482 6.4140625 20.441406 8.4556563 20.441406 10.972656 C 20.441406 13.489656 22.483 15.529297 25 15.529297 C 27.517 15.529297 29.558594 13.489656 29.558594 10.972656 C 29.558594 8.4556563 27.517 6.4150625 25 6.4140625 z M 19.078125 16.669922 C 16.561125 16.669922 14.521484 18.710516 14.521484 21.228516 C 14.521484 23.745516 16.561125 25.785156 19.078125 25.785156 C 21.595125 25.785156 23.636719 23.745516 23.636719 21.228516 C 23.636719 18.710516 21.596125 16.669922 19.078125 16.669922 z M 30.921875 16.669922 C 28.404875 16.669922 26.363281 18.711516 26.363281 21.228516 C 26.363281 23.745516 28.404875 25.785156 30.921875 25.785156 C 33.438875 25.785156 35.478516 23.745516 35.478516 21.228516 C 35.477516 18.710516 33.438875 16.669922 30.921875 16.669922 z M 5.5039062 31.607422 C 3.0159062 31.607422 1 33.624281 1 36.113281 C 1 38.602281 3.0169062 40.621094 5.5039062 40.621094 C 6.5979063 40.621094 7.7908594 40.196063 8.3808594 39.414062 C 8.4208594 39.864063 8.7793438 40.4375 9.4023438 40.4375 L 9.7675781 40.4375 C 9.9085781 40.4375 10.025391 40.320687 10.025391 40.179688 L 10.025391 32.162109 L 10.023438 32.162109 C 10.016438 32.027109 9.9045781 31.919922 9.7675781 31.919922 L 8.6367188 31.919922 C 8.4997187 31.919922 8.3888594 32.027109 8.3808594 32.162109 L 8.3808594 32.814453 C 7.6888594 31.961453 6.5979063 31.607422 5.5039062 31.607422 z M 15.074219 31.607422 C 13.529219 31.607422 11.875 32.374422 11.875 34.232422 C 11.875 35.446422 12.792375 36.197547 13.859375 36.560547 C 14.926375 36.923547 16.623047 37.064656 16.623047 37.972656 C 16.623047 38.652656 15.845797 39.044922 15.091797 39.044922 C 14.300797 39.044922 13.476656 38.790578 12.722656 38.267578 C 12.652656 38.219578 12.493141 38.161172 12.369141 38.326172 L 11.748047 39.214844 C 11.748047 39.214844 11.613687 39.391031 11.804688 39.582031 C 12.719688 40.254031 13.81175 40.619141 15.09375 40.619141 C 16.78475 40.619141 18.314453 39.607703 18.314453 37.970703 C 18.314453 36.123703 16.672016 35.636469 15.166016 35.230469 C 14.302016 35.010469 13.564453 34.805203 13.564453 34.158203 C 13.564453 33.618203 14.132219 33.183594 15.074219 33.183594 C 16.016219 33.183594 16.634547 33.621469 16.810547 33.730469 C 16.986547 33.838469 17.109687 33.753344 17.179688 33.652344 L 17.804688 32.759766 C 17.804687 32.759766 17.941797 32.563578 17.716797 32.392578 C 17.062797 31.930578 16.052219 31.607422 15.074219 31.607422 z M 23.90625 31.607422 C 21.41925 31.607422 19.404297 33.624281 19.404297 36.113281 C 19.404297 38.602281 21.41925 40.621094 23.90625 40.621094 C 25.00025 40.621094 26.193203 40.196063 26.783203 39.414062 C 26.823203 39.864063 27.183641 40.4375 27.806641 40.4375 L 28.171875 40.4375 C 28.312875 40.4375 28.427734 40.320687 28.427734 40.179688 L 28.427734 32.162109 C 28.420734 32.027109 28.308875 31.919922 28.171875 31.919922 L 27.041016 31.919922 C 26.904016 31.919922 26.793156 32.027109 26.785156 32.162109 L 26.783203 32.162109 L 26.783203 32.814453 C 26.091203 31.961453 25.00025 31.607422 23.90625 31.607422 z M 44.478516 31.607422 C 41.991516 31.607422 39.974609 33.624281 39.974609 36.113281 C 39.974609 38.602281 41.991516 40.621094 44.478516 40.621094 C 45.572516 40.621094 46.765469 40.196063 47.355469 39.414062 C 47.394469 39.864063 47.755906 40.4375 48.378906 40.4375 L 48.742188 40.4375 C 48.883187 40.4375 49 40.320687 49 40.179688 L 49 32.162109 L 48.998047 32.162109 C 48.991047 32.027109 48.879188 31.919922 48.742188 31.919922 L 47.611328 31.919922 C 47.474328 31.919922 47.363469 32.027109 47.355469 32.162109 L 47.355469 32.814453 C 46.663469 31.961453 45.572516 31.607422 44.478516 31.607422 z M 34.720703 31.626953 C 33.598703 31.626953 32.678516 32.274031 32.353516 32.832031 C 32.283516 32.396031 32.052938 31.9375 31.335938 31.9375 L 30.970703 31.9375 C 30.829703 31.9375 30.712891 32.054313 30.712891 32.195312 L 30.712891 39.433594 L 30.712891 39.435547 L 30.712891 40.212891 L 30.714844 40.212891 C 30.721844 40.347891 30.833703 40.455078 30.970703 40.455078 L 32.099609 40.455078 C 32.116609 40.455078 32.133391 40.454172 32.150391 40.451172 C 32.157391 40.450172 32.165828 40.447313 32.173828 40.445312 C 32.181828 40.442312 32.189266 40.4405 32.197266 40.4375 C 32.207266 40.4335 32.216562 40.426875 32.226562 40.421875 C 32.231563 40.418875 32.235234 40.417062 32.240234 40.414062 C 32.251234 40.407063 32.263438 40.397672 32.273438 40.388672 C 32.275438 40.386672 32.276344 40.385766 32.277344 40.384766 C 32.288344 40.373766 32.298594 40.361609 32.308594 40.349609 C 32.336594 40.310609 32.354422 40.264844 32.357422 40.214844 L 32.357422 35.478516 C 32.357422 34.222516 33.374859 33.203125 34.630859 33.203125 C 35.885859 33.203125 36.902344 34.222516 36.902344 35.478516 L 36.904297 39.4375 C 36.904528 39.440602 36.904297 39.443932 36.904297 39.447266 L 36.904297 40.214844 L 36.90625 40.214844 C 36.91325 40.349844 37.025109 40.457031 37.162109 40.457031 L 38.292969 40.457031 C 38.309969 40.457031 38.32675 40.456125 38.34375 40.453125 C 38.35075 40.452125 38.357281 40.449266 38.363281 40.447266 C 38.372281 40.444266 38.381625 40.4415 38.390625 40.4375 C 38.399625 40.4335 38.409969 40.428828 38.417969 40.423828 C 38.422969 40.420828 38.428594 40.418062 38.433594 40.414062 C 38.443594 40.407063 38.453891 40.400578 38.462891 40.392578 C 38.464891 40.390578 38.46675 40.388719 38.46875 40.386719 C 38.47975 40.376719 38.489047 40.365516 38.498047 40.353516 C 38.498047 40.353516 38.5 40.351562 38.5 40.351562 C 38.528 40.312562 38.545828 40.266797 38.548828 40.216797 L 38.548828 40.214844 L 38.546875 39.691406 L 38.546875 35.542969 C 38.546875 33.204969 37.071703 31.626953 34.720703 31.626953 z M 5.5078125 33.183594 C 7.0898125 33.183594 8.3710938 34.495281 8.3710938 36.113281 C 8.3710938 37.731281 7.0888125 39.044922 5.5078125 39.044922 C 3.9258125 39.044922 2.6445313 37.731281 2.6445312 36.113281 C 2.6445312 34.495281 3.9258125 33.183594 5.5078125 33.183594 z M 23.910156 33.183594 C 25.492156 33.183594 26.775391 34.495281 26.775391 36.113281 C 26.775391 37.731281 25.491156 39.044922 23.910156 39.044922 C 22.328156 39.044922 21.046875 37.731281 21.046875 36.113281 C 21.046875 34.495281 22.328156 33.183594 23.910156 33.183594 z M 44.482422 33.183594 C 46.064422 33.183594 47.347656 34.495281 47.347656 36.113281 C 47.347656 37.731281 46.064422 39.044922 44.482422 39.044922 C 42.900422 39.044922 41.619141 37.731281 41.619141 36.113281 C 41.619141 34.495281 42.900422 33.183594 44.482422 33.183594 z" /> | |
| <radialGradient | |
| id="a" | |
| cx="943.992" | |
| cy="1221.416" | |
| r=".663" | |
| gradientTransform="matrix(944.8934 0 0 -873.3772 -890717.875 1067234.75)" | |
| gradientUnits="userSpaceOnUse" | |
| > | |
| <stop offset="0" stopColor="#ffb900" /> | |
| <stop offset=".6" stopColor="#f95d8f" /> | |
| <stop offset=".999" stopColor="#f95353" /> | |
| </radialGradient> | |
| <path | |
| fill="url(#a)" | |
| d="M1520.766 462.371c-113.508 0-205.508 92-205.508 205.488 0 113.499 92 205.518 205.508 205.518 113.489 0 205.488-92.019 205.488-205.518 0-113.488-91.999-205.488-205.488-205.488zm-533.907.01c-113.489.01-205.498 91.99-205.498 205.488 0 113.489 92.009 205.498 205.498 205.498 113.498 0 205.508-92.009 205.508-205.498 0-113.499-92.01-205.488-205.518-205.488h.01zm472.447-256.883c0 113.489-91.999 205.518-205.488 205.518-113.508 0-205.508-92.029-205.508-205.518S1140.31 0 1253.817 0c113.489 0 205.479 92.009 205.479 205.498h.01z" | |
| /> | |
| </svg> | |
| ); | |
| export default Icon; | |
| export default SvgAsana; | |
| const SvgAsana = ({ isDark, ...props }) => ( | |
| <svg | |
| xmlns="http://www.w3.org/2000/svg" | |
| width="1em" | |
| height="1em" | |
| viewBox="781.361 0 944.893 873.377" | |
| {...props} | |
| > | |
| <radialGradient | |
| id="a" | |
| cx="943.992" | |
| cy="1221.416" | |
| r=".663" | |
| gradientTransform="matrix(944.8934 0 0 -873.3772 -890717.875 1067234.75)" | |
| gradientUnits="userSpaceOnUse" | |
| > | |
| <stop offset="0" stopColor="#ffb900" /> | |
| <stop offset=".6" stopColor="#f95d8f" /> | |
| <stop offset=".999" stopColor="#f95353" /> | |
| </radialGradient> | |
| <path | |
| fill="url(#a)" | |
| d="M1520.766 462.371c-113.508 0-205.508 92-205.508 205.488 0 113.499 92 205.518 205.508 205.518 113.489 0 205.488-92.019 205.488-205.518 0-113.488-91.999-205.488-205.488-205.488zm-533.907.01c-113.489.01-205.498 91.99-205.498 205.488 0 113.489 92.009 205.498 205.498 205.498 113.498 0 205.508-92.009 205.508-205.498 0-113.499-92.01-205.488-205.518-205.488h.01zm472.447-256.883c0 113.489-91.999 205.518-205.488 205.518-113.508 0-205.508-92.029-205.508-205.518S1140.31 0 1253.817 0c113.489 0 205.479 92.009 205.479 205.498h.01z" | |
| /> | |
| </svg> | |
| ); | |
| export default SvgAsana; |
🤖 Prompt for AI Agents
In src/frontend/src/icons/asana/asana.jsx from lines 1 to 27, the SvgAsana
component currently ignores the isDark prop, so it renders the same SVG colors
regardless of theme. To fix this, destructure the isDark prop from props and
update the radialGradient stopColor attributes to conditionally use different
colors based on isDark. This ensures the SVG adapts its colors properly for
light and dark themes while matching brand design requirements.
| const Icon = (props) => ( | ||
| <svg | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| fill="none" | ||
| viewBox="0 0 18 18" | ||
| id="Bitbucket-Logo--Streamline-Logos" | ||
| height="18" | ||
| width="18" | ||
| > | ||
| <desc>Bitbucket Logo Streamline Icon: https://streamlinehq.com</desc> | ||
| <path | ||
| fill="#0083ff" | ||
| fill-rule="evenodd" | ||
| d="M1.185 1.5h15.629999999999999a0.375 0.375 0 0 1 0.3705 0.4305L16.518749999999997 6.375H6.375l0.75 4.875h3.75l0.5775 -3.75h4.8975l-1.302 8.6805a0.375 0.375 0 0 1 -0.37124999999999997 0.3195H3.32325a0.375 0.375 0 0 1 -0.37124999999999997 -0.3195l-2.1375 -14.25A0.375 0.375 0 0 1 1.18575 1.5Z" | ||
| clip-rule="evenodd" | ||
| stroke-width="0.75" | ||
| ></path> | ||
| </svg> | ||
| ); | ||
| export default Icon; |
There was a problem hiding this comment.
Missing isDark prop for dark theme support.
The SVG component uses a fixed color (#0083ff) and does not accept an isDark prop. According to coding guidelines, custom SVG icon components should support both light and dark mode by accepting an 'isDark' prop and adjusting colors accordingly. Based on coding guidelines.
Apply this diff to add dark theme support:
-const Icon = (props) => (
+const Icon = ({ isDark, ...props }) => (
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 18 18"
id="Bitbucket-Logo--Streamline-Logos"
height="18"
width="18"
>
<desc>Bitbucket Logo Streamline Icon: https://streamlinehq.com</desc>
<path
- fill="#0083ff"
+ fill={isDark ? "#5eb7ff" : "#0083ff"}
fillRule="evenodd"
d="M1.185 1.5h15.629999999999999a0.375 0.375 0 0 1 0.3705 0.4305L16.518749999999997 6.375H6.375l0.75 4.875h3.75l0.5775 -3.75h4.8975l-1.302 8.6805a0.375 0.375 0 0 1 -0.37124999999999997 0.3195H3.32325a0.375 0.375 0 0 1 -0.37124999999999997 -0.3195l-2.1375 -14.25A0.375 0.375 0 0 1 1.18575 1.5Z"
clipRule="evenodd"
strokeWidth="0.75"
></path>
</svg>
);Committable suggestion skipped: line range outside the PR's diff.
🤖 Prompt for AI Agents
In src/frontend/src/icons/Bitbucket/bitbucket.jsx around lines 1 to 20, the Icon
component uses a hard-coded fill (#0083ff) and lacks support for dark mode;
update the component to accept an isDark prop (default false) and spread the
remaining props to the <svg> element, then set the path fill conditionally
(e.g., const fillColor = isDark ? '<dark-mode-color>' : '#0083ff') and use that
for the fill attribute; ensure you destructure isDark from props (e.g., ({
isDark = false, ...props })) so existing consumers keep working and pass
{...props} to the svg.
| fill-rule="evenodd" | ||
| d="M1.185 1.5h15.629999999999999a0.375 0.375 0 0 1 0.3705 0.4305L16.518749999999997 6.375H6.375l0.75 4.875h3.75l0.5775 -3.75h4.8975l-1.302 8.6805a0.375 0.375 0 0 1 -0.37124999999999997 0.3195H3.32325a0.375 0.375 0 0 1 -0.37124999999999997 -0.3195l-2.1375 -14.25A0.375 0.375 0 0 1 1.18575 1.5Z" | ||
| clip-rule="evenodd" |
There was a problem hiding this comment.
🛠️ Refactor suggestion | 🟠 Major
Use camelCase for SVG attributes in React.
React components should use camelCase for SVG attributes (fillRule, clipRule) instead of kebab-case (fill-rule, clip-rule).
Apply this diff:
<path
fill="#0083ff"
- fill-rule="evenodd"
+ fillRule="evenodd"
d="M1.185 1.5h15.629999999999999a0.375 0.375 0 0 1 0.3705 0.4305L16.518749999999997 6.375H6.375l0.75 4.875h3.75l0.5775 -3.75h4.8975l-1.302 8.6805a0.375 0.375 0 0 1 -0.37124999999999997 0.3195H3.32325a0.375 0.375 0 0 1 -0.37124999999999997 -0.3195l-2.1375 -14.25A0.375 0.375 0 0 1 1.18575 1.5Z"
- clip-rule="evenodd"
- stroke-width="0.75"
+ clipRule="evenodd"
+ strokeWidth="0.75"
></path>Committable suggestion skipped: line range outside the PR's diff.
🤖 Prompt for AI Agents
In src/frontend/src/icons/Bitbucket/bitbucket.jsx around lines 13 to 15, the SVG
attributes use kebab-case (fill-rule, clip-rule) which React expects in
camelCase; change fill-rule to fillRule and clip-rule to clipRule on the <path>
element(s) so the attributes are recognized by React's JSX parser and linting.
| const Icon = (props) => ( | ||
| <svg | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| viewBox="0 0 48 48" | ||
| width="22px" | ||
| height="22px" | ||
| > | ||
| <path | ||
| fill="#33d375" | ||
| d="M33,8c0-2.209-1.791-4-4-4s-4,1.791-4,4c0,1.254,0,9.741,0,11c0,2.209,1.791,4,4,4s4-1.791,4-4 C33,17.741,33,9.254,33,8z" | ||
| /> | ||
| <path | ||
| fill="#33d375" | ||
| d="M43,19c0,2.209-1.791,4-4,4c-1.195,0-4,0-4,0s0-2.986,0-4c0-2.209,1.791-4,4-4S43,16.791,43,19z" | ||
| /> | ||
| <path | ||
| fill="#40c4ff" | ||
| d="M8,14c-2.209,0-4,1.791-4,4s1.791,4,4,4c1.254,0,9.741,0,11,0c2.209,0,4-1.791,4-4s-1.791-4-4-4 C17.741,14,9.254,14,8,14z" | ||
| /> | ||
| <path | ||
| fill="#40c4ff" | ||
| d="M19,4c2.209,0,4,1.791,4,4c0,1.195,0,4,0,4s-2.986,0-4,0c-2.209,0-4-1.791-4-4S16.791,4,19,4z" | ||
| /> | ||
| <path | ||
| fill="#e91e63" | ||
| d="M14,39.006C14,41.212,15.791,43,18,43s4-1.788,4-3.994c0-1.252,0-9.727,0-10.984 c0-2.206-1.791-3.994-4-3.994s-4,1.788-4,3.994C14,29.279,14,37.754,14,39.006z" | ||
| /> | ||
| <path | ||
| fill="#e91e63" | ||
| d="M4,28.022c0-2.206,1.791-3.994,4-3.994c1.195,0,4,0,4,0s0,2.981,0,3.994c0,2.206-1.791,3.994-4,3.994 S4,30.228,4,28.022z" | ||
| /> | ||
| <path | ||
| fill="#ffc107" | ||
| d="M39,33c2.209,0,4-1.791,4-4s-1.791-4-4-4c-1.254,0-9.741,0-11,0c-2.209,0-4,1.791-4,4s1.791,4,4,4 C29.258,33,37.746,33,39,33z" | ||
| /> | ||
| <path | ||
| fill="#ffc107" | ||
| d="M28,43c-2.209,0-4-1.791-4-4c0-1.195,0-4,0-4s2.986,0,4,0c2.209,0,4,1.791,4,4S30.209,43,28,43z" | ||
| /> | ||
| </svg> | ||
| ); | ||
| export default Icon; |
There was a problem hiding this comment.
Missing dark theme support and prop forwarding.
The component has two issues:
-
No dark theme support: The SVG uses hard-coded colors without an
isDarkprop, violating the coding guideline that "Custom SVG icon components in React should always support both light and dark mode by accepting an 'isdark' prop." -
Props not forwarded: The
propsparameter is defined but never spread onto the SVG, breaking ref forwarding and other prop delegation.
As per coding guidelines.
Apply this diff to add dark theme support and fix prop forwarding:
-const Icon = (props) => (
+const Icon = ({ isDark, ...props }) => (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 48 48"
width="22px"
height="22px"
+ {...props}
>
<path
- fill="#33d375"
+ fill={isDark ? "#4ade80" : "#33d375"}
d="M33,8c0-2.209-1.791-4-4-4s-4,1.791-4,4c0,1.254,0,9.741,0,11c0,2.209,1.791,4,4,4s4-1.791,4-4 C33,17.741,33,9.254,33,8z"
/>
<path
- fill="#33d375"
+ fill={isDark ? "#4ade80" : "#33d375"}
d="M43,19c0,2.209-1.791,4-4,4c-1.195,0-4,0-4,0s0-2.986,0-4c0-2.209,1.791-4,4-4S43,16.791,43,19z"
/>
<path
- fill="#40c4ff"
+ fill={isDark ? "#60a5fa" : "#40c4ff"}
d="M8,14c-2.209,0-4,1.791-4,4s1.791,4,4,4c1.254,0,9.741,0,11,0c2.209,0,4-1.791,4-4s-1.791-4-4-4 C17.741,14,9.254,14,8,14z"
/>
<path
- fill="#40c4ff"
+ fill={isDark ? "#60a5fa" : "#40c4ff"}
d="M19,4c2.209,0,4,1.791,4,4c0,1.195,0,4,0,4s-2.986,0-4,0c-2.209,0-4-1.791-4-4S16.791,4,19,4z"
/>
<path
- fill="#e91e63"
+ fill={isDark ? "#f472b6" : "#e91e63"}
d="M14,39.006C14,41.212,15.791,43,18,43s4-1.788,4-3.994c0-1.252,0-9.727,0-10.984 c0-2.206-1.791-3.994-4-3.994s-4,1.788-4,3.994C14,29.279,14,37.754,14,39.006z"
/>
<path
- fill="#e91e63"
+ fill={isDark ? "#f472b6" : "#e91e63"}
d="M4,28.022c0-2.206,1.791-3.994,4-3.994c1.195,0,4,0,4,0s0,2.981,0,3.994c0,2.206-1.791,3.994-4,3.994 S4,30.228,4,28.022z"
/>
<path
- fill="#ffc107"
+ fill={isDark ? "#fbbf24" : "#ffc107"}
d="M39,33c2.209,0,4-1.791,4-4s-1.791-4-4-4c-1.254,0-9.741,0-11,0c-2.209,0-4,1.791-4,4s1.791,4,4,4 C29.258,33,37.746,33,39,33z"
/>
<path
- fill="#ffc107"
+ fill={isDark ? "#fbbf24" : "#ffc107"}
d="M28,43c-2.209,0-4-1.791-4-4c0-1.195,0-4,0-4s2.986,0,4,0c2.209,0,4,1.791,4,4S30.209,43,28,43z"
/>
</svg>
);📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const Icon = (props) => ( | |
| <svg | |
| xmlns="http://www.w3.org/2000/svg" | |
| viewBox="0 0 48 48" | |
| width="22px" | |
| height="22px" | |
| > | |
| <path | |
| fill="#33d375" | |
| d="M33,8c0-2.209-1.791-4-4-4s-4,1.791-4,4c0,1.254,0,9.741,0,11c0,2.209,1.791,4,4,4s4-1.791,4-4 C33,17.741,33,9.254,33,8z" | |
| /> | |
| <path | |
| fill="#33d375" | |
| d="M43,19c0,2.209-1.791,4-4,4c-1.195,0-4,0-4,0s0-2.986,0-4c0-2.209,1.791-4,4-4S43,16.791,43,19z" | |
| /> | |
| <path | |
| fill="#40c4ff" | |
| d="M8,14c-2.209,0-4,1.791-4,4s1.791,4,4,4c1.254,0,9.741,0,11,0c2.209,0,4-1.791,4-4s-1.791-4-4-4 C17.741,14,9.254,14,8,14z" | |
| /> | |
| <path | |
| fill="#40c4ff" | |
| d="M19,4c2.209,0,4,1.791,4,4c0,1.195,0,4,0,4s-2.986,0-4,0c-2.209,0-4-1.791-4-4S16.791,4,19,4z" | |
| /> | |
| <path | |
| fill="#e91e63" | |
| d="M14,39.006C14,41.212,15.791,43,18,43s4-1.788,4-3.994c0-1.252,0-9.727,0-10.984 c0-2.206-1.791-3.994-4-3.994s-4,1.788-4,3.994C14,29.279,14,37.754,14,39.006z" | |
| /> | |
| <path | |
| fill="#e91e63" | |
| d="M4,28.022c0-2.206,1.791-3.994,4-3.994c1.195,0,4,0,4,0s0,2.981,0,3.994c0,2.206-1.791,3.994-4,3.994 S4,30.228,4,28.022z" | |
| /> | |
| <path | |
| fill="#ffc107" | |
| d="M39,33c2.209,0,4-1.791,4-4s-1.791-4-4-4c-1.254,0-9.741,0-11,0c-2.209,0-4,1.791-4,4s1.791,4,4,4 C29.258,33,37.746,33,39,33z" | |
| /> | |
| <path | |
| fill="#ffc107" | |
| d="M28,43c-2.209,0-4-1.791-4-4c0-1.195,0-4,0-4s2.986,0,4,0c2.209,0,4,1.791,4,4S30.209,43,28,43z" | |
| /> | |
| </svg> | |
| ); | |
| export default Icon; | |
| const Icon = ({ isDark, ...props }) => ( | |
| <svg | |
| xmlns="http://www.w3.org/2000/svg" | |
| viewBox="0 0 48 48" | |
| width="22px" | |
| height="22px" | |
| {...props} | |
| > | |
| <path | |
| fill={isDark ? "#4ade80" : "#33d375"} | |
| d="M33,8c0-2.209-1.791-4-4-4s-4,1.791-4,4c0,1.254,0,9.741,0,11c0,2.209,1.791,4,4,4s4-1.791,4-4 C33,17.741,33,9.254,33,8z" | |
| /> | |
| <path | |
| fill={isDark ? "#4ade80" : "#33d375"} | |
| d="M43,19c0,2.209-1.791,4-4,4c-1.195,0-4,0-4,0s0-2.986,0-4c0-2.209,1.791-4,4-4S43,16.791,43,19z" | |
| /> | |
| <path | |
| fill={isDark ? "#60a5fa" : "#40c4ff"} | |
| d="M8,14c-2.209,0-4,1.791-4,4s1.791,4,4,4c1.254,0,9.741,0,11,0c2.209,0,4-1.791,4-4s-1.791-4-4-4 C17.741,14,9.254,14,8,14z" | |
| /> | |
| <path | |
| fill={isDark ? "#60a5fa" : "#40c4ff"} | |
| d="M19,4c2.209,0,4,1.791,4,4c0,1.195,0,4,0,4s-2.986,0-4,0c-2.209,0-4-1.791-4-4S16.791,4,19,4z" | |
| /> | |
| <path | |
| fill={isDark ? "#f472b6" : "#e91e63"} | |
| d="M14,39.006C14,41.212,15.791,43,18,43s4-1.788,4-3.994c0-1.252,0-9.727,0-10.984 c0-2.206-1.791-3.994-4-3.994s-4,1.788-4,3.994C14,29.279,14,37.754,14,39.006z" | |
| /> | |
| <path | |
| fill={isDark ? "#f472b6" : "#e91e63"} | |
| d="M4,28.022c0-2.206,1.791-3.994,4-3.994c1.195,0,4,0,4,0s0,2.981,0,3.994c0,2.206-1.791,3.994-4,3.994 S4,30.228,4,28.022z" | |
| /> | |
| <path | |
| fill={isDark ? "#fbbf24" : "#ffc107"} | |
| d="M39,33c2.209,0,4-1.791,4-4s-1.791-4-4-4c-1.254,0-9.741,0-11,0c-2.209,0-4,1.791-4,4s1.791,4,4,4 C29.258,33,37.746,33,39,33z" | |
| /> | |
| <path | |
| fill={isDark ? "#fbbf24" : "#ffc107"} | |
| d="M28,43c-2.209,0-4-1.791-4-4c0-1.195,0-4,0-4s2.986,0,4,0c2.209,0,4,1.791,4,4S30.209,43,28,43z" | |
| /> | |
| </svg> | |
| ); | |
| export default Icon; |
🤖 Prompt for AI Agents
In src/frontend/src/icons/slackComposio/slack.jsx lines 1-42: the component
hard-codes colors and does not forward props; change the signature to accept an
isdark prop (e.g. function Icon({ isdark = false, ...props }) ) and compute fill
color variables that switch between light and dark palette based on isdark, then
spread remaining props onto the <svg> element (e.g. <svg {...props} ...) so
callers can pass className, style, aria attributes and refs; keep existing
viewBox/width/height but replace hard-coded fill values with the computed color
variables.
| export const SnowflakeIcon = forwardRef< | ||
| SVGSVGElement, | ||
| React.PropsWithChildren<{}> | ||
| >((props, ref) => { | ||
| return ( | ||
| <SnowflakeIconSVG ref={ref} {...props} style={{ width: 20, height: 20 }} /> | ||
| ); | ||
| }); |
There was a problem hiding this comment.
Missing isDark prop for dark theme support.
The component does not accept or forward an isDark prop to the underlying SVG. According to coding guidelines, custom SVG icon components should support both light and dark mode by accepting an 'isDark' prop. Based on coding guidelines.
Apply this diff to add isDark prop support:
export const SnowflakeIcon = forwardRef<
SVGSVGElement,
- React.PropsWithChildren<{}>
+ React.PropsWithChildren<{ isDark?: boolean }>
->((props, ref) => {
+>((props, ref) => {
+ const { isDark, ...restProps } = props;
return (
- <SnowflakeIconSVG ref={ref} {...props} style={{ width: 22, height: 22 }} />
+ <SnowflakeIconSVG ref={ref} isDark={isDark} {...restProps} style={{ width: 22, height: 22 }} />
);
});🤖 Prompt for AI Agents
In src/frontend/src/icons/Snowflake/index.tsx around lines 4 to 11, the
SnowflakeIcon component does not accept or forward an isDark prop required for
dark-theme support; update the component props type to include isDark?: boolean,
add isDark to the destructured/forwarded props, and pass isDark through to the
underlying SnowflakeIconSVG (along with ref and other props) so the SVG can
render the correct theme variant.
| React.PropsWithChildren<{}> | ||
| >((props, ref) => { | ||
| return ( | ||
| <SnowflakeIconSVG ref={ref} {...props} style={{ width: 20, height: 20 }} /> |
There was a problem hiding this comment.
Inconsistent icon dimensions.
This wrapper uses 20x20 dimensions, while other icon wrappers in the same PR (Heygen, Coda, Dropbox, googledocs) consistently use 22x22. This creates visual inconsistency across the icon set.
Apply this diff to standardize the dimensions:
- <SnowflakeIconSVG ref={ref} {...props} style={{ width: 20, height: 20 }} />
+ <SnowflakeIconSVG ref={ref} {...props} style={{ width: 22, height: 22 }} />📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <SnowflakeIconSVG ref={ref} {...props} style={{ width: 20, height: 20 }} /> | |
| <SnowflakeIconSVG ref={ref} {...props} style={{ width: 22, height: 22 }} /> |
🤖 Prompt for AI Agents
In src/frontend/src/icons/Snowflake/index.tsx around line 9, the
SnowflakeIconSVG wrapper uses style={{ width: 20, height: 20 }} which is
inconsistent with other icons; change the inline style to use width: 22 and
height: 22 (style={{ width: 22, height: 22 }}) so the Snowflake icon matches the
22x22 dimensions used by Heygen, Coda, Dropbox, and googledocs.
| export const YoutubeIcon = forwardRef< | ||
| SVGSVGElement, | ||
| React.PropsWithChildren<{}> | ||
| >((props, ref) => { | ||
| return <YouTubeIcon ref={ref} {...props} />; | ||
| return ( | ||
| <span | ||
| style={{ | ||
| display: "inline-grid", | ||
| width: 22, | ||
| height: 22, | ||
| placeItems: "center", | ||
| flexShrink: 0, | ||
| }} | ||
| > | ||
| <YoutubeIconSVG ref={ref} {...props} /> | ||
| </span> | ||
| ); | ||
| }); |
There was a problem hiding this comment.
🧩 Analysis chain
Component structure follows established patterns, but verify dark theme support.
The forwardRef wrapper with the 22x22 inline-grid container aligns with the project-wide icon pattern. However, there's a minor CSS inconsistency and a verification needed:
-
Minor CSS issue:
flexShrink: 0(line 15) has no effect oninline-gridelements as it only applies to flex items. Consider removing it. -
Dark theme support: The coding guidelines require that "The SVG component must use the
isDarkprop to support both light and dark mode." Since the underlyingYoutubeIconSVGcomponent is not visible in this context, please verify that it properly accepts and uses theisDarkprop.
Apply this diff to remove the ineffective CSS property:
<span
style={{
display: "inline-grid",
width: 22,
height: 22,
placeItems: "center",
- flexShrink: 0,
}}
>Run the following script to verify that the underlying SVG component supports the isDark prop:
Based on coding guidelines.
🏁 Script executed:
#!/bin/bash
# Description: Verify that YoutubeIconSVG supports isDark prop for dark theme
# Check the Youtube SVG component implementation
fd -e tsx -e jsx -e ts -e js "^youtube\.(tsx|jsx|ts|js)$" src/frontend/src/icons/Youtube/ --exec cat {}Length of output: 715
Let me verify the complete file structure in the Youtube directory:
Underlying SVG component does not support dark mode; refactor required.
The index.tsx follows the correct pattern, but the YoutubeIconSVG component has hardcoded colors (fill="#ff1f1f" and fill="#ffffff") and does not accept or use an isDark prop. Per coding guidelines, "The SVG component must use the isDark prop to support both light and dark mode."
Additionally, flexShrink: 0 (line 15) has no effect on inline-grid elements and should be removed.
Required fixes:
- Update
Youtube.tsx(the SVG component) to accept anisDarkprop and conditionally apply colors based on this prop. - Remove
flexShrink: 0from the span styles inindex.tsx.
🤖 Prompt for AI Agents
In src/frontend/src/icons/Youtube/index.tsx around lines 4-21, remove the
useless flexShrink: 0 from the span style and ensure you pass any dark-mode flag
through to the SVG; in src/frontend/src/icons/Youtube/Youtube.tsx (the SVG
component) add an explicit boolean isDark prop (with appropriate typing),
conditionally choose the fill colors based on isDark instead of hardcoded
fill="#ff1f1f" / fill="#ffffff", and forward the ref/other props as before so
the index file can render the SVG with the proper colors for light and dark
modes.
| display_name: str = "GoogleDocs" | ||
| icon = "Googledocs" |
There was a problem hiding this comment.
Case inconsistency between display_name and icon.
The display_name is "GoogleDocs" (capital D) but the icon is "Googledocs" (lowercase d). This inconsistency could cause issues if the frontend icon mapping expects exact case matching.
Consider aligning the casing:
display_name: str = "GoogleDocs"
-icon = "Googledocs"
+icon = "GoogleDocs"Or verify that the frontend icon mapping uses "Googledocs" and adjust the display_name accordingly.
Based on learnings.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| display_name: str = "GoogleDocs" | |
| icon = "Googledocs" | |
| display_name: str = "GoogleDocs" | |
| icon = "GoogleDocs" |
🤖 Prompt for AI Agents
In src/lfx/src/lfx/components/composio/googledocs_composio.py around lines 5 to
6, the display_name uses "GoogleDocs" (capital D) while icon uses "Googledocs"
(lowercase d), causing a case mismatch that can break exact-match frontend icon
mapping; make the casing consistent by either changing icon to "GoogleDocs" to
match display_name or changing display_name to "Googledocs" to match the
existing icon mapping (confirm which variant the frontend expects) and apply the
chosen value to both fields so they are identical.
2 participants
Summary: This PR updates the current icons to support dark theme.
Frontend changes:
langflow/src/frontend/src/icons,langflow/src/frontend/src/icons/lazyIconImports.tsIcons updated:
asana,attio,klavito,miro,missiveSummary by CodeRabbit
New Features
Improvements