Bug fixes of DOM nesting

src/frontend/src/modals/EditNodeModal/index.tsx

@@ -12,7 +12,6 @@ import TextAreaComponent from "../../components/textAreaComponent";
 import ToggleShadComponent from "../../components/toggleShadComponent";
 import { Badge } from "../../components/ui/badge";
 import { Button } from "../../components/ui/button";
-import { DialogTitle } from "../../components/ui/dialog";
 import {
   Table,
   TableBody,
@@ -93,10 +92,8 @@ export default function EditNodeModal({
     <BaseModal size="large-h-full" open={modalOpen} setOpen={setModalOpen}>
       <BaseModal.Trigger>{children}</BaseModal.Trigger>
       <BaseModal.Header description={data.node?.description}>
-        <DialogTitle className="flex items-center">
+        <span className="pr-2">{data.type}</span>
-          <span className="pr-2">{data.type}</span>
+        <Badge variant="secondary">ID: {data.id}</Badge>
-          <Badge variant="secondary">ID: {data.id}</Badge>
-        </DialogTitle>
       </BaseModal.Header>
       <BaseModal.Content>
         <div className="flex pb-2">

src/frontend/src/modals/codeAreaModal/index.tsx

@@ -1,4 +1,3 @@
-import { DialogTitle } from "@radix-ui/react-dialog";
 import "ace-builds/src-noconflict/ace";
 import "ace-builds/src-noconflict/ext-language_tools";
 import "ace-builds/src-noconflict/mode-python";
@@ -77,14 +76,12 @@ export default function CodeAreaModal({
     <BaseModal open={open} setOpen={setOpen}>
       <BaseModal.Trigger>{children}</BaseModal.Trigger>
       <BaseModal.Header description={CODE_PROMPT_DIALOG_SUBTITLE}>
-        <DialogTitle className="flex items-center">
+        <span className="pr-2">Edit Code</span>
-          <span className="pr-2">Edit Code</span>
+        <TerminalSquare
-          <TerminalSquare
+          strokeWidth={1.5}
-            strokeWidth={1.5}
+          className="h-6 w-6 pl-1 text-primary "
-            className="h-6 w-6 pl-1 text-primary "
+          aria-hidden="true"
-            aria-hidden="true"
+        />
-          />
-        </DialogTitle>
       </BaseModal.Header>
       <BaseModal.Content>
         <div className="flex h-full w-full flex-col transition-all">

src/frontend/src/modals/exportModal/index.tsx

@@ -3,7 +3,6 @@ import { ReactNode, forwardRef, useContext, useState } from "react";
 import EditFlowSettings from "../../components/EditFlowSettingsComponent";
 import { Button } from "../../components/ui/button";
 import { Checkbox } from "../../components/ui/checkbox";
-import { DialogTitle } from "../../components/ui/dialog";
 import { EXPORT_DIALOG_SUBTITLE } from "../../constants";
 import { PopUpContext } from "../../contexts/popUpContext";
 import { TabsContext } from "../../contexts/tabsContext";
@@ -23,14 +22,12 @@ const ExportModal = forwardRef((props: { children: ReactNode }, ref) => {
     <BaseModal size="smaller">
       <BaseModal.Trigger>{props.children}</BaseModal.Trigger>
       <BaseModal.Header description={EXPORT_DIALOG_SUBTITLE}>
-        <DialogTitle className="flex items-center">
+        <span className="pr-2">Export</span>
-          <span className="pr-2">Export</span>
+        <Download
-          <Download
+          strokeWidth={1.5}
-            strokeWidth={1.5}
+          className="h-6 w-6 pl-1 text-primary "
-            className="h-6 w-6 pl-1 text-primary "
+          aria-hidden="true"
-            aria-hidden="true"
+        />
-          />
-        </DialogTitle>
       </BaseModal.Header>
       <BaseModal.Content>
         <EditFlowSettings

src/frontend/src/modals/genericModal/index.tsx

@@ -4,7 +4,6 @@ import SanitizedHTMLWrapper from "../../components/SanitizedHTMLWrapper";
 import ShadTooltip from "../../components/ShadTooltipComponent";
 import { Badge } from "../../components/ui/badge";
 import { Button } from "../../components/ui/button";
-import { DialogTitle } from "../../components/ui/dialog";
 import { Textarea } from "../../components/ui/textarea";
 import {
   MAX_WORDS_HIGHLIGHT,
@@ -180,14 +179,12 @@ export default function GenericModal({
           }
         })()}
       >
-        <DialogTitle className="flex items-center">
+        <span className="pr-2">{myModalTitle}</span>
-          <span className="pr-2">{myModalTitle}</span>
+        <FileText
-          <FileText
+          strokeWidth={1.5}
-            strokeWidth={1.5}
+          className="h-6 w-6 pl-1 text-primary "
-            className="h-6 w-6 pl-1 text-primary "
+          aria-hidden="true"
-            aria-hidden="true"
+        />
-          />
-        </DialogTitle>
       </BaseModal.Header>
       <BaseModal.Content>
         <div className="flex h-full flex-col">

src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx

@@ -75,23 +75,23 @@ export default function ExtraSidebar() {
 
         <ShadTooltip content="Export" side="top">
           <ExportModal>
-            <button className={classNames("extra-side-bar-buttons")}>
+            <div className={classNames("extra-side-bar-buttons")}>
               <FileDown
                 strokeWidth={1.5}
                 className="side-bar-button-size"
               ></FileDown>
-            </button>
+            </div>
           </ExportModal>
         </ShadTooltip>
         <ShadTooltip content="Code" side="top">
           {flow && flow.data && (
             <ApiModal flow={flow}>
-              <button className={classNames("extra-side-bar-buttons")}>
+              <div className={classNames("extra-side-bar-buttons")}>
                 <Code2
                   strokeWidth={1.5}
                   className="side-bar-button-size"
                 ></Code2>
-              </button>
+              </div>
             </ApiModal>
           )}
         </ShadTooltip>

src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx

@@ -96,7 +96,7 @@ const NodeToolbarComponent = (props) => {
 
           <ShadTooltip content="Edit" side="top">
             <EditNodeModal data={props.data}>
-              <button
+              <div
                 className={classNames(
                   "relative -ml-px inline-flex items-center rounded-r-md bg-background px-2 py-2 text-foreground shadow-md ring-1 ring-inset  ring-ring transition-all duration-500 ease-in-out hover:bg-muted focus:z-10" +
                     (nodeLength == 0
@@ -105,7 +105,7 @@ const NodeToolbarComponent = (props) => {
                 )}
               >
                 <Settings2 className="h-4 w-4 "></Settings2>
-              </button>
+              </div>
             </EditNodeModal>
           </ShadTooltip>
         </span>