Skip to content

feat: add new Composio components #10156

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
edwinjosechittilappilly merged 6 commits into from
Oct 14, 2025
Merged

feat: add new Composio components #10156

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
de6d2b1
feat: add new Composio components
Uday-sidagana Oct 7, 2025
0f8a810
Merge branch 'main' into v3-NewComponents-Oct7
Uday-sidagana Oct 7, 2025
7a474a0
Merge branch 'main' into v3-NewComponents-Oct7
edwinjosechittilappilly Oct 9, 2025
41a7529
Merge branch 'main' into v3-NewComponents-Oct7
edwinjosechittilappilly Oct 13, 2025
ceff57a
Merge branch 'main' into v3-NewComponents-Oct7
edwinjosechittilappilly Oct 14, 2025
b2815cf
add component index
edwinjosechittilappilly Oct 14, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 30 additions & 0 deletions src/frontend/src/icons/Classroom/classroom.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
const Icon = (props) => (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 48 48"
width="20px"
height="20px"
>
Comment on lines +1 to +7
Copy link
Contributor

@coderabbitai coderabbitai bot Oct 7, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🔴 Critical

Add props spread to the SVG element.

The SVG element is missing the {...props} spread, which prevents passing any props (className, style, onClick, etc.) to the icon. All other icon SVG components in the codebase include this spread.

Apply this diff to fix:

 const Icon = (props) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 48 48"
     width="20px"
     height="20px"
+    {...props}
   >
📝 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.

Suggested change
const Icon = (props) => (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 48 48"
width="20px"
height="20px"
>
const Icon = (props) => (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 48 48"
width="20px"
height="20px"
{...props}
>
🤖 Prompt for AI Agents 
In src/frontend/src/icons/Classroom/classroom.jsx around lines 1 to 7, the SVG
element is missing the props spread which prevents passing className, style,
onClick, and other props to the icon; update the SVG opening tag to include
{...props} so incoming props are forwarded (e.g. <svg xmlns="..." viewBox="..."
width="20px" height="20px" {...props}>), ensuring existing attributes remain and
no prop names are duplicated.

<path
fill="#ffc107"
d="M41,42H7c-2.206,0-4-1.794-4-4V10c0-2.206,1.794-4,4-4h34c2.206,0,4,1.794,4,4v28C45,40.206,43.206,42,41,42z"
/>
<path fill="#388e3c" d="M7 10H41V38H7z" />
<path
fill="#fff"
d="M28 36H36V38H28zM24 17A3 3 0 1 0 24 23 3 3 0 1 0 24 17z"
/>
<path fill="#a5d6a7" d="M16 21A2 2 0 1 0 16 25A2 2 0 1 0 16 21Z" />
<path fill="#2e7d32" d="M7 10H41V12H7z" />
<path fill="#ffab00" d="M36 38L28 38 32 42 40 42z" />
<path
fill="#a5d6a7"
d="M32 21A2 2 0 1 0 32 25 2 2 0 1 0 32 21zM37 28.688c0-.445-.163-.874-.468-1.199C35.839 26.75 34.363 26 32 26s-3.839.75-4.532 1.489C27.163 27.814 27 28.242 27 28.688V30h10V28.688zM21 28.688c0-.445-.163-.874-.468-1.199C19.839 26.75 18.363 26 16 26s-3.839.75-4.532 1.489C11.163 27.814 11 28.242 11 28.688V30h10V28.688z"
/>
<path
fill="#fff"
d="M30,27.742c0-0.534-0.196-1.048-0.562-1.438C28.607,25.417,26.835,24,24,24s-4.607,1.417-5.438,2.303C18.196,26.693,18,27.207,18,27.742V30h12V27.742z"
/>
</svg>
);
export default Icon;
1 change: 1 addition & 0 deletions src/frontend/src/icons/Classroom/classroom.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
9 changes: 9 additions & 0 deletions src/frontend/src/icons/Classroom/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import React, { forwardRef } from "react";
import ClassroomIconSVG from "./classroom";

export const ClassroomIcon = forwardRef<
SVGSVGElement,
React.PropsWithChildren<{}>
>((props, ref) => {
return <ClassroomIconSVG ref={ref} {...props} />;
});
35 changes: 35 additions & 0 deletions src/frontend/src/icons/Excel/excel.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
const Icon = (props) => (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" {...props}>
<path
fill="#169154"
d="M29,6H15.744C14.781,6,14,6.781,14,7.744v7.259h15V6z"
/>
<path
fill="#18482a"
d="M14,33.054v7.202C14,41.219,14.781,42,15.743,42H29v-8.946H14z"
/>
<path fill="#0c8045" d="M14 15.003H29V24.005000000000003H14z" />
<path fill="#17472a" d="M14 24.005H29V33.055H14z" />
<g>
<path
fill="#29c27f"
d="M42.256,6H29v9.003h15V7.744C44,6.781,43.219,6,42.256,6z"
/>
<path
fill="#27663f"
d="M29,33.054V42h13.257C43.219,42,44,41.219,44,40.257v-7.202H29z"
/>
<path fill="#19ac65" d="M29 15.003H44V24.005000000000003H29z" />
<path fill="#129652" d="M29 24.005H44V33.055H29z" />
</g>
<path
fill="#0c7238"
d="M22.319,34H5.681C4.753,34,4,33.247,4,32.319V15.681C4,14.753,4.753,14,5.681,14h16.638 C23.247,14,24,14.753,24,15.681v16.638C24,33.247,23.247,34,22.319,34z"
/>
<path
fill="#fff"
d="M9.807 19L12.193 19 14.129 22.754 16.175 19 18.404 19 15.333 24 18.474 29 16.123 29 14.013 25.07 11.912 29 9.526 29 12.719 23.982z"
/>
</svg>
);
export default Icon;
Comment on lines +1 to +35
Copy link
Contributor

@coderabbitai coderabbitai bot Oct 7, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

Missing isDark prop support for theme compatibility.

The SVG icon component must accept and use the isDark prop to support both light and dark mode, but this implementation has multiple hardcoded fill colors and doesn't handle theme switching.

As per coding guidelines

Consider destructuring isDark from props and conditionally adjusting colors. Given the Excel icon's multi-color design, you may want to create theme-appropriate color palettes:

-const Icon = (props) => (
+const Icon = ({ isDark, ...props }) => {
+  const colors = isDark 
+    ? { primary: '#10793f', secondary: '#0d471f', accent: '#0a5c30', highlight: '#129652' }
+    : { primary: '#169154', secondary: '#18482a', accent: '#0c8045', highlight: '#17472a' };
+  
+  return (
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" {...props}>
     <path
-      fill="#169154"
+      fill={colors.primary}
       d="M29,6H15.744C14.781,6,14,6.781,14,7.744v7.259h15V6z"
     />
+    {/* Apply similar changes to other path elements */}
   </svg>
- );
+ );
+};

Note: Adjust the color mappings based on your theme requirements.

📝 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.

Suggested change
const Icon = (props) => (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" {...props}>
<path
fill="#169154"
d="M29,6H15.744C14.781,6,14,6.781,14,7.744v7.259h15V6z"
/>
<path
fill="#18482a"
d="M14,33.054v7.202C14,41.219,14.781,42,15.743,42H29v-8.946H14z"
/>
<path fill="#0c8045" d="M14 15.003H29V24.005000000000003H14z" />
<path fill="#17472a" d="M14 24.005H29V33.055H14z" />
<g>
<path
fill="#29c27f"
d="M42.256,6H29v9.003h15V7.744C44,6.781,43.219,6,42.256,6z"
/>
<path
fill="#27663f"
d="M29,33.054V42h13.257C43.219,42,44,41.219,44,40.257v-7.202H29z"
/>
<path fill="#19ac65" d="M29 15.003H44V24.005000000000003H29z" />
<path fill="#129652" d="M29 24.005H44V33.055H29z" />
</g>
<path
fill="#0c7238"
d="M22.319,34H5.681C4.753,34,4,33.247,4,32.319V15.681C4,14.753,4.753,14,5.681,14h16.638 C23.247,14,24,14.753,24,15.681v16.638C24,33.247,23.247,34,22.319,34z"
/>
<path
fill="#fff"
d="M9.807 19L12.193 19 14.129 22.754 16.175 19 18.404 19 15.333 24 18.474 29 16.123 29 14.013 25.07 11.912 29 9.526 29 12.719 23.982z"
/>
</svg>
);
export default Icon;
const Icon = ({ isDark, ...props }) => {
const colors = isDark
? { primary: '#10793f', secondary: '#0d471f', accent: '#0a5c30', highlight: '#129652' }
: { primary: '#169154', secondary: '#18482a', accent: '#0c8045', highlight: '#17472a' };
return (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" {...props}>
<path
fill={colors.primary}
d="M29,6H15.744C14.781,6,14,6.781,14,7.744v7.259h15V6z"
/>
{/* Apply similar changes to other path elements */}
<path
fill="#18482a"
d="M14,33.054v7.202C14,41.219,14.781,42,15.743,42H29v-8.946H14z"
/>
<path
fill="#0c8045"
d="M14 15.003H29V24.005000000000003H14z"
/>
<path
fill="#17472a"
d="M14 24.005H29V33.055H14z"
/>
<g>
<path
fill="#29c27f"
d="M42.256,6H29v9.003h15V7.744C44,6.781,43.219,6,42.256,6z"
/>
<path
fill="#27663f"
d="M29,33.054V42h13.257C43.219,42,44,41.219,44,40.257v-7.202H29z"
/>
<path
fill="#19ac65"
d="M29 15.003H44V24.005000000000003H29z"
/>
<path
fill="#129652"
d="M29 24.005H44V33.055H29z"
/>
</g>
<path
fill="#0c7238"
d="M22.319,34H5.681C4.753,34,4,33.247,4,32.319V15.681C4,14.753,4.753,14,5.681,14h16.638 C23.247,14,24,14.753,24,15.681v16.638C24,33.247,23.247,34,22.319,34z"
/>
<path
fill="#fff"
d="M9.807 19L12.193 19 14.129 22.754 16.175 19 18.404 19 15.333 24 18.474 29 16.123 29 14.013 25.07 11.912 29 9.526 29 12.719 23.982z"
/>
</svg>
);
};
export default Icon;
🤖 Prompt for AI Agents 
In src/frontend/src/icons/Excel/excel.jsx around lines 1 to 35, the component
uses hardcoded fill colors and doesn't accept an isDark prop; update the
component to destructure isDark (default false) from props, define two color
palettes (light and dark) mapping each of the current fill values to
theme-appropriate colors, replace the hardcoded fill attributes with those
palette variables, and keep spreading remaining props onto the svg so consumers
can still pass className/style; ensure palettes cover every filled path and fall
back to the original color if a mapping is missing.

1 change: 1 addition & 0 deletions src/frontend/src/icons/Excel/excel.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
8 changes: 8 additions & 0 deletions src/frontend/src/icons/Excel/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
import React, { forwardRef } from "react";
import ExcelIconSVG from "./excel";

export const ExcelIcon = forwardRef<SVGSVGElement, React.PropsWithChildren<{}>>(
(props, ref) => {
return <ExcelIconSVG ref={ref} {...props} />;
},
);
28 changes: 28 additions & 0 deletions src/frontend/src/icons/Finage/finage.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
const Icon = (props) => (
<svg
viewBox="0 0 100 100"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M74.0067 26.4671C75.1405 28.4062 74.4876 30.8973 72.5486 32.031L43.1784 49.2035L43.1484 88.1897C43.1467 90.4359 41.3244 92.2554 39.0782 92.2537C36.832 92.252 35.0124 90.4296 35.0142 88.1834L35.0459 46.866C35.047 45.422 35.8137 44.0869 37.0602 43.3581L68.4428 25.009C70.3819 23.8752 72.873 24.528 74.0067 26.4671Z"
fill="#444CE7"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M68.1802 9.86606C69.3012 11.8126 68.6319 14.2993 66.6854 15.4202L26.8843 38.3412V76.2868C26.8843 78.533 25.0634 80.3539 22.8171 80.3539C20.5709 80.3539 18.75 78.533 18.75 76.2868V35.9901C18.75 34.5355 19.5269 33.1916 20.7874 32.4656L62.626 8.37129C64.5725 7.25032 67.0592 7.91955 68.1802 9.86606Z"
fill="#444CE7"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M80.0794 42.088C81.179 44.0467 80.4826 46.5259 78.5239 47.6254L59.3535 58.3872V77.8552C59.3535 80.1014 57.5326 81.9223 55.2864 81.9223C53.0402 81.9223 51.2192 80.1014 51.2192 77.8552V56.0063C51.2192 54.5357 52.0131 53.1796 53.2954 52.4597L74.542 40.5324C76.5007 39.4328 78.9799 40.1293 80.0794 42.088Z"
fill="#444CE7"
/>
</svg>
);
export default Icon;
Comment on lines +1 to +28
Copy link
Contributor

@coderabbitai coderabbitai bot Oct 7, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

Respect the isDark prop for theme-aware fills.

The component only spreads props and leaves fixed fills, so it can’t switch palettes in dark mode. Please update it to destructure { isDark, ...rest }, choose fills based on isDark, and pass rest to <svg>, matching our icon guideline.
As per coding guidelines

🤖 Prompt for AI Agents 
In src/frontend/src/icons/Finage/finage.jsx lines 1-28, the SVG uses hard-coded
fill colors and spreads all props, so it ignores theme; destructure the props as
({ isDark, ...rest }), compute fill colors (e.g., const fill = isDark ?
'<darkColor>' : '#444CE7' and any secondary fills similarly), replace the
literal fill attributes on each <path> with those computed fill variables, and
pass rest to the <svg> element instead of spreading props; preserve existing
viewBox and other SVG attributes and keep the component export as-is.

5 changes: 5 additions & 0 deletions src/frontend/src/icons/Finage/finage.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
9 changes: 9 additions & 0 deletions src/frontend/src/icons/Finage/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import React, { forwardRef } from "react";
import FinageIconSVG from "./finage";

export const FinageIcon = forwardRef<
SVGSVGElement,
React.PropsWithChildren<{}>
>((props, ref) => {
return <FinageIconSVG ref={ref} {...props} />;
});
45 changes: 45 additions & 0 deletions src/frontend/src/icons/Fixer/fixer.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
const Icon = (props) => (
<svg
version="1.1"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 152 152"
{...props}
>
<path
d="M0 0 C50.16 0 100.32 0 152 0 C152 50.16 152 100.32 152 152 C101.84 152 51.68 152 0 152 C0 101.84 0 51.68 0 0 Z "
fill="#0152CC"
transform="translate(0,0)"
/>
<path
d="M0 0 C6.6 0 13.2 0 20 0 C20.66 2.908125 21.32 5.81625 22 8.8125 C22.20882812 9.72491455 22.41765625 10.6373291 22.6328125 11.57739258 C22.87644531 12.66250122 22.87644531 12.66250122 23.125 13.76953125 C23.29257813 14.50792236 23.46015625 15.24631348 23.6328125 16.00708008 C24 18 24 18 24 21 C14.76 21 5.52 21 -4 21 C-3.16746869 13.50721821 -1.90487575 7.20539959 0 0 Z "
fill="#F5F8FD"
transform="translate(86,65)"
/>
<path
d="M0 0 C6.6 0 13.2 0 20 0 C20.66 2.7225 21.32 5.445 22 8.25 C22.31324219 9.52665527 22.31324219 9.52665527 22.6328125 10.82910156 C22.79523438 11.5094043 22.95765625 12.18970703 23.125 12.890625 C23.29257813 13.58188477 23.46015625 14.27314453 23.6328125 14.98535156 C24 17 24 17 24 21 C14.76 21 5.52 21 -4 21 C-3.09260756 13.74086045 -1.69882911 7.09076497 0 0 Z "
fill="#F5F8FD"
transform="translate(50,65)"
/>
<path
d="M0 0 C6.6 0 13.2 0 20 0 C20.66 2.908125 21.32 5.81625 22 8.8125 C22.20882812 9.72491455 22.41765625 10.6373291 22.6328125 11.57739258 C22.87644531 12.66250122 22.87644531 12.66250122 23.125 13.76953125 C23.29257813 14.50792236 23.46015625 15.24631348 23.6328125 16.00708008 C24 18 24 18 24 21 C14.76 21 5.52 21 -4 21 C-2 8 -2 8 0 0 Z "
fill="#F9FBFD"
transform="translate(68,38)"
/>
<path
d="M0 0 C6.6 0 13.2 0 20 0 C20.66 2.743125 21.32 5.48625 22 8.3125 C22.20882812 9.17270752 22.41765625 10.03291504 22.6328125 10.91918945 C22.87644531 11.94338989 22.87644531 11.94338989 23.125 12.98828125 C23.29257813 13.68477783 23.46015625 14.38127441 23.6328125 15.09887695 C24 17 24 17 24 20 C14.76 20 5.52 20 -4 20 C-2 7 -2 7 0 0 Z "
fill="#FCFDFE"
transform="translate(101,92)"
/>
<path
d="M0 0 C6.6 0 13.2 0 20 0 C21.7778683 6.80227871 23.12251559 12.98012474 24 20 C14.76 20 5.52 20 -4 20 C-2.68 13.4 -1.36 6.8 0 0 Z "
fill="#FCFDFE"
transform="translate(35,92)"
/>
<path
d="M0 0 C6.6 0 13.2 0 20 0 C21.32 6.6 22.64 13.2 24 20 C14.76 20 5.52 20 -4 20 C-2.68 13.4 -1.36 6.8 0 0 Z "
fill="#FDFDFE"
transform="translate(68,92)"
/>
</svg>
);
Comment on lines +1 to +44
Copy link
Contributor

@coderabbitai coderabbitai bot Oct 7, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

Ensure Fixer icon honors the isDark theme prop.

The SVG never consumes isDark, so its palette is frozen and breaks dark‑mode support mandated for icons. Please destructure isDark and drive your fills/strokes from it (e.g., via a palette map or CSS vars) so both themes render correctly. Sample start:

-const Icon = (props) => (
+const Icon = ({ isDark = false, ...props }) => (
...
-      fill="#0152CC"
+      fill={isDark ? "#0E1B3A" : "#0152CC"}

Apply the same pattern to the remaining paths.

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.

Suggested change
const Icon = (props) => (
<svg
version="1.1"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 152 152"
{...props}
>
<path
d="M0 0 C50.16 0 100.32 0 152 0 C152 50.16 152 100.32 152 152 C101.84 152 51.68 152 0 152 C0 101.84 0 51.68 0 0 Z "
fill="#0152CC"
transform="translate(0,0)"
/>
<path
d="M0 0 C6.6 0 13.2 0 20 0 C20.66 2.908125 21.32 5.81625 22 8.8125 C22.20882812 9.72491455 22.41765625 10.6373291 22.6328125 11.57739258 C22.87644531 12.66250122 22.87644531 12.66250122 23.125 13.76953125 C23.29257813 14.50792236 23.46015625 15.24631348 23.6328125 16.00708008 C24 18 24 18 24 21 C14.76 21 5.52 21 -4 21 C-3.16746869 13.50721821 -1.90487575 7.20539959 0 0 Z "
fill="#F5F8FD"
transform="translate(86,65)"
/>
<path
d="M0 0 C6.6 0 13.2 0 20 0 C20.66 2.7225 21.32 5.445 22 8.25 C22.31324219 9.52665527 22.31324219 9.52665527 22.6328125 10.82910156 C22.79523438 11.5094043 22.95765625 12.18970703 23.125 12.890625 C23.29257813 13.58188477 23.46015625 14.27314453 23.6328125 14.98535156 C24 17 24 17 24 21 C14.76 21 5.52 21 -4 21 C-3.09260756 13.74086045 -1.69882911 7.09076497 0 0 Z "
fill="#F5F8FD"
transform="translate(50,65)"
/>
<path
d="M0 0 C6.6 0 13.2 0 20 0 C20.66 2.908125 21.32 5.81625 22 8.8125 C22.20882812 9.72491455 22.41765625 10.6373291 22.6328125 11.57739258 C22.87644531 12.66250122 22.87644531 12.66250122 23.125 13.76953125 C23.29257813 14.50792236 23.46015625 15.24631348 23.6328125 16.00708008 C24 18 24 18 24 21 C14.76 21 5.52 21 -4 21 C-2 8 -2 8 0 0 Z "
fill="#F9FBFD"
transform="translate(68,38)"
/>
<path
d="M0 0 C6.6 0 13.2 0 20 0 C20.66 2.743125 21.32 5.48625 22 8.3125 C22.20882812 9.17270752 22.41765625 10.03291504 22.6328125 10.91918945 C22.87644531 11.94338989 22.87644531 11.94338989 23.125 12.98828125 C23.29257813 13.68477783 23.46015625 14.38127441 23.6328125 15.09887695 C24 17 24 17 24 20 C14.76 20 5.52 20 -4 20 C-2 7 -2 7 0 0 Z "
fill="#FCFDFE"
transform="translate(101,92)"
/>
<path
d="M0 0 C6.6 0 13.2 0 20 0 C21.7778683 6.80227871 23.12251559 12.98012474 24 20 C14.76 20 5.52 20 -4 20 C-2.68 13.4 -1.36 6.8 0 0 Z "
fill="#FCFDFE"
transform="translate(35,92)"
/>
<path
d="M0 0 C6.6 0 13.2 0 20 0 C21.32 6.6 22.64 13.2 24 20 C14.76 20 5.52 20 -4 20 C-2.68 13.4 -1.36 6.8 0 0 Z "
fill="#FDFDFE"
transform="translate(68,92)"
/>
</svg>
);
const Icon = ({ isDark = false, ...props }) => (
<svg
version="1.1"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 152 152"
{...props}
>
<path
d="M0 0 C50.16 0 100.32 0 152 0 C152 50.16 152 100.32 152 152 C101.84 152 51.68 152 0 152 C0 101.84 0 51.68 0 0 Z "
fill={isDark ? "#0E1B3A" : "#0152CC"}
transform="translate(0,0)"
/>
<path
d="M0 0 C6.6 0 13.2 0 20 0 C20.66 2.908125 21.32 5.81625 22 8.8125 C22.20882812 9.72491455 22.41765625 10.6373291 22.6328125 11.57739258 C22.87644531 12.66250122 22.87644531 12.66250122 23.125 13.76953125 C23.29257813 14.50792236 23.46015625 15.24631348 23.6328125 16.00708008 C24 18 24 18 24 21 C14.76 21 5.52 21 -4 21 C-3.16746869 13.50721821 -1.90487575 7.20539959 0 0 Z "
fill="#F5F8FD"
transform="translate(86,65)"
/>
<path
d="M0 0 C6.6 0 13.2 0 20 0 C20.66 2.7225 21.32 5.445 22 8.25 C22.31324219 9.52665527 22.31324219 9.52665527 22.6328125 10.82910156 C22.79523438 11.5094043 22.95765625 12.18970703 23.125 12.890625 C23.29257813 13.58188477 23.46015625 14.27314453 23.6328125 14.98535156 C24 17 24 17 24 21 C14.76 21 5.52 21 -4 21 C-3.09260756 13.74086045 -1.69882911 7.09076497 0 0 Z "
fill="#F5F8FD"
transform="translate(50,65)"
/>
<path
d="M0 0 C6.6 0 13.2 0 20 0 C20.66 2.908125 21.32 5.81625 22 8.8125 C22.20882812 9.72491455 22.41765625 10.6373291 22.6328125 11.57739258 C22.87644531 12.66250122 22.87644531 12.66250122 23.125 13.76953125 C23.29257813 14.50792236 23.46015625 15.24631348 23.6328125 16.00708008 C24 18 24 18 24 21 C14.76 21 5.52 21 -4 21 C-2 8 -2 8 0 0 Z "
fill="#F9FBFD"
transform="translate(68,38)"
/>
<path
d="M0 0 C6.6 0 13.2 0 20 0 C20.66 2.743125 21.32 5.48625 22 8.3125 C22.20882812 9.17270752 22.41765625 10.03291504 22.6328125 10.91918945 C22.87644531 11.94338989 22.87644531 11.94338989 23.125 12.98828125 C23.29257813 13.68477783 23.46015625 14.38127441 23.6328125 15.09887695 C24 17 24 17 24 20 C14.76 20 5.52 20 -4 20 C-2 7 -2 7 0 0 Z "
fill="#FCFDFE"
transform="translate(101,92)"
/>
<path
d="M0 0 C6.6 0 13.2 0 20 0 C21.7778683 6.80227871 23.12251559 12.98012474 24 20 C14.76 20 5.52 20 -4 20 C-2.68 13.4 -1.36 6.8 0 0 Z "
fill="#FCFDFE"
transform="translate(35,92)"
/>
<path
d="M0 0 C6.6 0 13.2 0 20 0 C21.32 6.6 22.64 13.2 24 20 C14.76 20 5.52 20 -4 20 C-2.68 13.4 -1.36 6.8 0 0 Z "
fill="#FDFDFE"
transform="translate(68,92)"
/>
</svg>
);
🤖 Prompt for AI Agents 
In src/frontend/src/icons/Fixer/fixer.jsx lines 1-44, the component never reads
the isDark prop so the SVG uses hardcoded fills and won't respond to theme;
destructure isDark from props (e.g., const Icon = ({isDark, ...props}) => ...)
and create a small palette map or CSS-variable lookup (light/dark) to resolve
each color used in the paths, then replace the hardcoded fill attributes with
the corresponding palette values (ensuring sensible defaults if isDark is
undefined) and apply the same pattern to all paths so the icon renders correctly
in both themes.

export default Icon;
10 changes: 10 additions & 0 deletions src/frontend/src/icons/Fixer/fixer.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
8 changes: 8 additions & 0 deletions src/frontend/src/icons/Fixer/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
import React, { forwardRef } from "react";
import FixerIconSVG from "./fixer";

export const FixerIcon = forwardRef<SVGSVGElement, React.PropsWithChildren<{}>>(
(props, ref) => {
return <FixerIconSVG ref={ref} {...props} />;
},
);
Loading
Loading