fix: add colors to the templates and main page cards (#4497)

* Add swatch colors

* Implement new colors on templates modal

* Implement new colors on main page

* Removed hover icon color change on templates

---------

Co-authored-by: Cristhian Zanforlin Lousa <cristhian.lousa@gmail.com>

src/frontend/src/modals/templatesModal/components/TemplateCardComponent/index.tsx

@@ -1,5 +1,6 @@
 import { convertTestName } from "@/components/storeCardComponent/utils/convert-test-name";
-import { BG_NOISE, flowGradients } from "@/utils/styleUtils";
+import { swatchColors } from "@/utils/styleUtils";
+import { cn } from "@/utils/utils";
 import IconComponent, {
   ForwardedIconComponent,
 } from "../../../../components/genericIconComponent";
@@ -9,10 +10,11 @@ export default function TemplateCardComponent({
   example,
   onClick,
 }: TemplateCardComponentProps) {
-  const directionIndex =
-    (example.gradient && example.gradient.split(",").length == 1
-      ? example.gradient.length
-      : example.name.length) % flowGradients.length;
+  const swatchIndex =
+    (example.gradient && parseInt(example.gradient)
+      ? parseInt(example.gradient)
+      : (example.gradient?.length ?? example.name.length)) %
+    swatchColors.length;
 
   const handleKeyDown = (e) => {
     if (e.key === "Enter" || e.key === " ") {
@@ -21,13 +23,6 @@ export default function TemplateCardComponent({
     }
   };
 
-  const bgGradient =
-    BG_NOISE +
-    "," +
-    (example.gradient && example.gradient.split(",").length > 1
-      ? "linear-gradient(90deg, " + example.gradient + ")"
-      : flowGradients[directionIndex]);
-
   return (
     <div
       className="group flex cursor-pointer gap-3 overflow-hidden rounded-md p-3 hover:bg-muted focus-visible:bg-muted"
@@ -35,10 +30,15 @@ export default function TemplateCardComponent({
       onKeyDown={handleKeyDown}
       onClick={onClick}
     >
-      <div className="relative h-20 w-20 shrink-0 overflow-hidden rounded-md bg-muted p-4 outline-none ring-ring group-hover:bg-border group-focus-visible:bg-border">
+      <div
+        className={cn(
+          "relative h-20 w-20 shrink-0 overflow-hidden rounded-md p-4 outline-none ring-ring",
+          swatchColors[swatchIndex],
+        )}
+      >
         <IconComponent
           name={example.icon || "FileText"}
-          className="absolute left-1/2 top-1/2 h-10 w-10 -translate-x-1/2 -translate-y-1/2 text-muted-foreground duration-300 group-hover:scale-105 group-hover:text-foreground group-focus-visible:scale-105 group-focus-visible:text-foreground"
+          className="absolute left-1/2 top-1/2 h-10 w-10 -translate-x-1/2 -translate-y-1/2 duration-300 group-hover:scale-105 group-focus-visible:scale-105"
         />
       </div>
       <div className="flex flex-1 flex-col justify-between">

src/frontend/src/pages/MainPage/components/grid/index.tsx

@@ -14,6 +14,8 @@ import useAlertStore from "@/stores/alertStore";
 import useFlowsManagerStore from "@/stores/flowsManagerStore";
 import { FlowType } from "@/types/flow";
 import { getInputsAndOutputs } from "@/utils/storeUtils";
+import { swatchColors } from "@/utils/styleUtils";
+import { cn } from "@/utils/utils";
 import { useState } from "react";
 import { useParams } from "react-router-dom";
 import useDescriptionModal from "../../oldComponents/componentsComponent/hooks/use-description-modal";
@@ -99,6 +101,12 @@ const GridComponent = ({ flowData }: { flowData: FlowType }) => {
 
   const { onDragStart } = useDragStart(flowData);
 
+  const swatchIndex =
+    (flowData.gradient && parseInt(flowData.gradient)
+      ? parseInt(flowData.gradient)
+      : (flowData.gradient?.length ?? flowData.name.length)) %
+    swatchColors.length;
+
   return (
     <>
       <Card
@@ -111,7 +119,7 @@ const GridComponent = ({ flowData }: { flowData: FlowType }) => {
         }`}
       >
         <div className="flex w-full items-center gap-4">
-          <div className={`flex rounded-lg bg-muted p-3`}>
+          <div className={cn(`flex rounded-lg p-3`, swatchColors[swatchIndex])}>
             <ForwardedIconComponent
               name={getIcon()}
               aria-hidden="true"

src/frontend/src/pages/MainPage/components/list/index.tsx

@@ -13,6 +13,8 @@ import DeleteConfirmationModal from "@/modals/deleteConfirmationModal";
 import useAlertStore from "@/stores/alertStore";
 import useFlowsManagerStore from "@/stores/flowsManagerStore";
 import { FlowType } from "@/types/flow";
+import { swatchColors } from "@/utils/styleUtils";
+import { cn } from "@/utils/utils";
 import { useState } from "react";
 import { useParams } from "react-router-dom";
 import useDescriptionModal from "../../oldComponents/componentsComponent/hooks/use-description-modal";
@@ -96,6 +98,12 @@ const ListComponent = ({ flowData }: { flowData: FlowType }) => {
 
   const descriptionModal = useDescriptionModal([flowData?.id], "flow");
 
+  const swatchIndex =
+    (flowData.gradient && parseInt(flowData.gradient)
+      ? parseInt(flowData.gradient)
+      : (flowData.gradient?.length ?? flowData.name.length)) %
+    swatchColors.length;
+
   return (
     <>
       <Card
@@ -115,12 +123,15 @@ const ListComponent = ({ flowData }: { flowData: FlowType }) => {
         >
           {/* Icon */}
           <div
-            className={`item-center flex justify-center rounded-lg bg-muted p-3`}
+            className={cn(
+              `item-center flex justify-center rounded-lg p-3`,
+              swatchColors[swatchIndex],
+            )}
           >
             <ForwardedIconComponent
               name={flowData?.icon || getIcon()}
               aria-hidden="true"
-              className="flex h-5 w-5 items-center justify-center text-foreground"
+              className="flex h-5 w-5 items-center justify-center"
             />
           </div>
 

src/frontend/src/style/index.css

@@ -142,6 +142,14 @@
     --datatype-indigo-foreground: 226.5 100% 93.9%;
 
     --node-ring: 240 6% 90%;
+
+    --neon-fuschia: 340 100% 60%; /* hsl(340, 100%, 60%) */
+    --digital-orchid: 295 100% 75%; /* hsl(295, 100%, 75%) */
+    --plasma-purple: 262 97% 57%; /* hsl(262, 97%, 57%) */
+    --electric-blue: 248 99% 53%; /* hsl(248, 99%, 53%) */
+    --holo-frost: 186 98% 80%; /* hsl(186, 98%, 80%) */
+    --terminal-green: 129 98% 80%; /* hsl(129, 98%, 80%) */
+    --cosmic-void: 258 95% 16%; /* hsl(258, 95%, 16%) */
   }
 
   .dark {

src/frontend/src/utils/styleUtils.ts

@@ -331,6 +331,15 @@ export const flowGradients = [
   "linear-gradient(90deg, #2F10FE 0%, #98F4FE 100%)",
 ];
 
+export const swatchColors = [
+  "bg-neon-fuschia text-white",
+  "bg-digital-orchid text-plasma-purple",
+  "bg-plasma-purple text-digital-orchid",
+  "bg-electric-blue text-holo-frost",
+  "bg-holo-frost text-electric-blue",
+  "bg-terminal-green text-cosmic-void",
+];
+
 export const nodeColors: { [char: string]: string } = {
   inputs: "#10B981",
   outputs: "#AA2411",

src/frontend/tailwind.config.mjs

@@ -241,6 +241,13 @@ const config = {
           foreground: "hsl(var(--datatype-indigo-foreground))",
         },
         "node-ring": "hsl(var(--node-ring))",
+        "neon-fuschia": "hsl(var(--neon-fuschia))",
+        "digital-orchid": "hsl(var(--digital-orchid))",
+        "plasma-purple": "hsl(var(--plasma-purple))",
+        "electric-blue": "hsl(var(--electric-blue))",
+        "holo-frost": "hsl(var(--holo-frost))",
+        "terminal-green": "hsl(var(--terminal-green))",
+        "cosmic-void": "hsl(var(--cosmic-void))",
       },
       borderRadius: {
         lg: `var(--radius)`,