🚀 feat(cardComponent): add dialog component for confirmation before deleting a card

🚀 feat(formModal): increase font size of input variables section title for better readability

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">

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">
                   <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