fix: merge errors

frontend/src/modals/AddActionModal.tsx

@@ -1,9 +1,9 @@
 import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import WrapperModal from './WrapperModal';
 import Input from '../components/Input';
 import { ActiveState } from '../models/misc';
+import WrapperModal from './WrapperModal';
 
 type AddActionModalProps = {
   modalState: ActiveState;
@@ -46,27 +46,32 @@ export default function AddActionModal({
         <h2 className="font-semibold text-xl text-jet dark:text-bright-gray px-3">
           New Action
         </h2>
-        <div className="mt-6 px-3">
+        <div className="mt-6 relative px-3">
+          <span className="z-10 absolute left-5 -top-2 bg-white px-2 text-xs text-gray-4000 dark:bg-[#26272E] dark:text-silver">
+            Action Name
+          </span>
           <Input
             type="text"
             value={actionName}
-            onChange={(e) => setActionName(e.target.value)}
+            onChange={(e) => {
+              const value = e.target.value;
+              setActionName(value);
+              setFunctionNameError(!isValidFunctionName(value));
+            }}
             borderVariant="thin"
-            placeholder="Enter name"
-            label="Action Name"
+            placeholder={'Enter name'}
           />
-          <p className="mt-1 text-gray-500 text-xs">
-            Use only letters, numbers, underscores, and hyphens (e.g.,
-            `get_user_data`, `send-report`).
+          <p
+            className={`mt-2 ml-1 text-xs italic ${
+              functionNameError ? 'text-red-500' : 'text-gray-500'
+            }`}
+          >
+            {functionNameError
+              ? 'Invalid function name format. Use only letters, numbers, underscores, and hyphens.'
+              : 'Use only letters, numbers, underscores, and hyphens (e.g., `get_data`, `send_report`, etc.)'}
           </p>
-          {functionNameError && (
-            <p className="mt-1 text-red-500 text-xs">
-              Invalid function name format. Use only letters, numbers,
-              underscores, and hyphens.
-            </p>
-          )}
         </div>
-        <div className="mt-8 flex flex-row-reverse gap-1 px-3">
+        <div className="mt-3 flex flex-row-reverse gap-1 px-3">
           <button
             onClick={handleAddAction}
             className="rounded-3xl bg-purple-30 px-5 py-2 text-sm text-white transition-all hover:bg-[#6F3FD1]"
@@ -83,54 +88,6 @@ export default function AddActionModal({
           >
             {t('modals.configTool.closeButton')}
           </button>
-          <div className="p-6">
-            <h2 className="font-semibold text-xl text-jet dark:text-bright-gray px-3">
-              New Action
-            </h2>
-            <div className="mt-6 relative px-3">
-              <span className="z-10 absolute left-5 -top-2 bg-white px-2 text-xs text-gray-4000 dark:bg-[#26272E] dark:text-silver">
-                Action Name
-              </span>
-              <Input
-                type="text"
-                value={actionName}
-                onChange={(e) => {
-                  const value = e.target.value;
-                  setActionName(value);
-                  setFunctionNameError(!isValidFunctionName(value));
-                }}
-                borderVariant="thin"
-                placeholder={'Enter name'}
-              />
-              <p
-                className={`mt-2 ml-1 text-xs italic ${
-                  functionNameError ? 'text-red-500' : 'text-gray-500'
-                }`}
-              >
-                {functionNameError
-                  ? 'Invalid function name format. Use only letters, numbers, underscores, and hyphens.'
-                  : 'Use only letters, numbers, underscores, and hyphens (e.g., `get_data`, `send_report`, etc.)'}
-              </p>
-            </div>
-            <div className="mt-3 flex flex-row-reverse gap-1 px-3">
-              <button
-                onClick={handleAddAction}
-                className="rounded-3xl bg-purple-30 px-5 py-2 text-sm text-white transition-all hover:bg-[#6F3FD1]"
-              >
-                Add
-              </button>
-              <button
-                onClick={() => {
-                  setFunctionNameError(false);
-                  setModalState('INACTIVE');
-                  setActionName('');
-                }}
-                className="cursor-pointer rounded-3xl px-5 py-2 text-sm font-medium hover:bg-gray-100 dark:bg-transparent dark:text-light-gray dark:hover:bg-[#767183]/50"
-              >
-                {t('modals.configTool.closeButton')}
-              </button>
-            </div>
-          </div>
         </div>
       </div>
     </WrapperModal>

frontend/src/modals/AddToolModal.tsx

@@ -97,7 +97,7 @@ export default function AddToolModal({
           className="h-[85vh] w-[90vw] md:w-[75vw]"
         >
           <div className="flex flex-col gap-4 h-full">
-            <div className="p-6">
+            <div>
               <h2 className="font-semibold text-xl text-jet dark:text-bright-gray px-3">
                 {t('settings.tools.selectToolSetup')}
               </h2>