From 2f4426d49f7a95b89dcf8d46508403f5789a98cc Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Fri, 30 Jun 2023 16:03:44 -0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=80=20feat(cardComponent):=20add=20dia?=
 =?UTF-8?q?log=20component=20for=20confirmation=20before=20deleting=20a=20?=
 =?UTF-8?q?card=20=F0=9F=9A=80=20feat(formModal):=20increase=20font=20size?=
 =?UTF-8?q?=20of=20input=20variables=20section=20title=20for=20better=20re?=
 =?UTF-8?q?adability?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/cardComponent/index.tsx    | 20 ++++++++++++++++++-
 src/frontend/src/modals/formModal/index.tsx   | 11 +++++++---
 2 files changed, 27 insertions(+), 4 deletions(-)

diff --git a/src/frontend/src/components/cardComponent/index.tsx b/src/frontend/src/components/cardComponent/index.tsx
index aec9ccb3b..6bdd0a5ad 100644
--- a/src/frontend/src/components/cardComponent/index.tsx
+++ b/src/frontend/src/components/cardComponent/index.tsx
@@ -11,6 +11,8 @@ import {
   Card,
   CardHeader,
 } from "../ui/card";
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "../ui/dialog";
+import { Button } from "@mui/material";
 
 export const CardComponent = ({
   flow,
@@ -39,9 +41,25 @@ export const CardComponent = ({
             {flow.name}
           </span>
           {onDelete && (
-            <button className="flex self-start" onClick={onDelete}>
+            <Dialog>
+                <DialogTrigger asChild>
+                <button className="flex self-start">
               <Trash2 className="w-4 h-4 text-primary opacity-0 group-hover:opacity-100 transition-all" />
             </button>
+                </DialogTrigger>
+            <DialogContent>
+              <DialogHeader>
+                <DialogTitle>Are you sure absolutely sure?</DialogTitle>
+                <DialogDescription>
+                  This action cannot be undone. Are you sure you want to permanently
+                  delete this file from our servers?
+                </DialogDescription>
+              </DialogHeader>
+              <DialogFooter>
+                <Button type="submit" onClick={onDelete}>Confirm</Button>
+              </DialogFooter>
+            </DialogContent>
+          </Dialog>
           )}
         </CardTitle>
         <CardDescription className="pt-2 pb-2">
diff --git a/src/frontend/src/modals/formModal/index.tsx b/src/frontend/src/modals/formModal/index.tsx
index 18434442d..7c4e6ff26 100644
--- a/src/frontend/src/modals/formModal/index.tsx
+++ b/src/frontend/src/modals/formModal/index.tsx
@@ -406,13 +406,18 @@ export default function FormModal({
 
           <div className="flex h-[80vh] w-full mt-2 ">
             <div className="w-2/5 h-full overflow-auto scrollbar-hide flex flex-col justify-start mr-6">
-              <div className="flex justify-between items-center">
-                <div className="flex py-2 items-center">
+            <div className="flex py-2 items-center">
                   <Variable className="w-4 h-4 mr-1 text-primary"></Variable>
-                  <span className="text-sm font-semibold text-primary">
+                  <span className="text-md font-semibold text-primary">
                     Input Variables
                   </span>
                 </div>
+              <div className="flex justify-between items-center">
+              <div className="flex mr-2.5 py-2 items-center">
+                  <span className="text-sm font-semibold text-primary">
+                    Name
+                  </span>
+                </div>
                 <div className="flex mr-2.5 py-2 items-center">
                   <span className="text-sm font-semibold text-primary">
                     Chat Input