Refactor: Change components and flows icon color

src/frontend/src/components/cardComponent/index.tsx

@@ -134,8 +134,8 @@ export default function CollectionCardComponent({
                 className={cn(
                   "flex-shrink-0",
                   data.is_component
-                    ? "mx-0.5 h-6 w-6 text-indigo-500"
+                    ? "mx-0.5 h-6 w-6 text-component-icon"
-                    : "h-7 w-7 flex-shrink-0 text-emerald-800"
+                    : "h-7 w-7 flex-shrink-0 text-flow-icon"
                 )}
                 name={data.is_component ? "ToyBrick" : "Group"}
               />

src/frontend/src/style/index.css

@@ -47,6 +47,9 @@
     --chat-bot-icon: #afe6ef;
     --chat-user-icon: #aface9;
 
+    --component-icon: #4338ca;
+    --flow-icon: #0f766e;
+
     /* Colors that are shared in dark and light mode */
     --blur-shared: #151923de;
     --build-trigger: #dc735b;
@@ -107,6 +110,9 @@
     --medium-indigo: #6366f1;
     --low-indigo: #e0e7ff;
 
+    --component-icon: #352e9e;
+    --flow-icon: #115e59;
+
     /* Colors that are shared in dark and light mode */
     --blur-shared: #151923d2;
     --build-trigger: #dc735b;

src/frontend/tailwind.config.js

@@ -29,6 +29,8 @@ module.exports = {
     },
     extend: {
       colors: {
+        "component-icon": "var(--component-icon)",
+        "flow-icon": "var(--flow-icon)",
         "low-indigo": "var(--low-indigo)",
         "chat-send": "var(--chat-send)",
         connection: "var(--connection)",