From a95d7d7f6a9422e6f2bd7ad780c112dc7ee0b972 Mon Sep 17 00:00:00 2001
From: Gabriel Luiz Freitas Almeida <gabriel@logspace.ai>
Date: Sat, 10 Jun 2023 16:52:30 -0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20style(cardComponent):=20update?=
 =?UTF-8?q?=20color=20of=20card=20background=20and=20icons=20=F0=9F=92=84?=
 =?UTF-8?q?=20style(cardComponent):=20update=20layout=20of=20card=20footer?=
 =?UTF-8?q?=20and=20remove=20unused=20code=20The=20background=20color=20of?=
 =?UTF-8?q?=20the=20card=20component=20has=20been=20updated=20to=20a=20lig?=
 =?UTF-8?q?hter=20shade=20of=20blue.=20The=20icons=20used=20for=20editing?=
 =?UTF-8?q?=20and=20deleting=20a=20flow=20have=20been=20updated=20to=20use?=
 =?UTF-8?q?=20the=20Lucide=20icon=20library.=20The=20layout=20of=20the=20c?=
 =?UTF-8?q?ard=20footer=20has=20been=20updated=20to=20align=20the=20conten?=
 =?UTF-8?q?t=20to=20the=20right=20and=20remove=20unused=20code.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/cardComponent/index.tsx        | 48 +++++++++----------
 1 file changed, 23 insertions(+), 25 deletions(-)

diff --git a/src/frontend/src/pages/MainPage/components/cardComponent/index.tsx b/src/frontend/src/pages/MainPage/components/cardComponent/index.tsx
index 7871d18f3..2b05a0df7 100644
--- a/src/frontend/src/pages/MainPage/components/cardComponent/index.tsx
+++ b/src/frontend/src/pages/MainPage/components/cardComponent/index.tsx
@@ -3,6 +3,7 @@ import {
   ArrowTopRightOnSquareIcon,
   TrashIcon,
 } from "@heroicons/react/24/outline";
+import { Edit, Trash } from "lucide-react";
 import { OpenAiIcon } from "../../../../icons/OpenAi";
 import { Button } from "../../../../components/ui/button";
 import { Badge } from "../../../../components/ui/badge";
@@ -34,29 +35,38 @@ export const CardComponent = ({
 
   let emoji = flow.style?.emoji || "🤖";
   // get random tailwind color
-  let color = flow.style?.color || "bg-blue-400";
+  let color = flow.style?.color || "bg-blue-200";
   return (
     <Card className="group">
       <CardHeader>
         <CardTitle className="flex justify-between items-start">
           <div className="flex gap-4 items-center">
-            <span
+            {/* <span
               className={
                 "rounded-md w-10 h-10 flex items-center justify-center text-2xl " +
                 color
               }
             >
               {emoji}
-            </span>
+            </span> */}
             {flow.name}
           </div>
-          <button
-            onClick={() => {
-              removeFlow(flow.id);
-            }}
-          >
-            <TrashIcon className="w-5 text-primary opacity-0 group-hover:opacity-100 transition-all" />
-          </button>
+          <div className="flex gap-5">
+            {/* make the icons shake a bit on hover */}
+            <Edit
+              className="w-4"
+              onClick={() => {
+                setTabIndex(idx);
+                setActiveTab("myflow");
+              }}
+            />
+            <Trash
+              className="w-4"
+              onClick={() => {
+                removeFlow(flow.id);
+              }}
+            />
+          </div>
         </CardTitle>
         <CardDescription className="pt-2 pb-2">
           <div className="truncate-doubleline">
@@ -69,8 +79,8 @@ export const CardComponent = ({
       </CardHeader>
 
       <CardFooter>
-        <div className="flex gap-2 w-full justify-between items-end">
-          <div className="flex flex-wrap gap-2">
+        <div className="flex gap-2 w-full justify-end items-end">
+          {/* <div className="flex flex-wrap gap-2">
             <Badge variant="secondary">{idx === 0 ? "Agent" : "Tool"}</Badge>
             {idx === 0 && (
               <Badge variant="secondary">
@@ -80,19 +90,7 @@ export const CardComponent = ({
                 <span className="text-base">&nbsp;</span>OpenAI+
               </Badge>
             )}
-          </div>
-          <Button
-            variant="outline"
-            size="sm"
-            className="whitespace-nowrap opacity-0 group-hover:opacity-100 transition-all"
-            onClick={() => {
-              setTabIndex(idx);
-              setActiveTab("myflow");
-            }}
-          >
-            <ArrowTopRightOnSquareIcon className="w-4 mr-2" />
-            Edit
-          </Button>
+          </div> */}
         </div>
       </CardFooter>
     </Card>