(refactor:tools modal) reuse wrapper modal

frontend/src/modals/ConfigToolModal.tsx

@@ -1,23 +1,25 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 
-import Exit from '../assets/exit.svg';
+import WrapperModal from './WrapperModal';
 import Input from '../components/Input';
 import { ActiveState } from '../models/misc';
 import { AvailableToolType } from './types';
 import userService from '../api/services/userService';
 
+interface ConfigToolModalProps {
+  modalState: ActiveState;
+  setModalState: (state: ActiveState) => void;
+  tool: AvailableToolType | null;
+  getUserTools: () => void;
+}
+
 export default function ConfigToolModal({
   modalState,
   setModalState,
   tool,
   getUserTools,
-}: {
-  modalState: ActiveState;
-  setModalState: (state: ActiveState) => void;
-  tool: AvailableToolType | null;
-  getUserTools: () => void;
-}) {
+}: ConfigToolModalProps) {
   const { t } = useTranslation();
   const [authKey, setAuthKey] = React.useState<string>('');
 
@@ -36,63 +38,51 @@ export default function ConfigToolModal({
         getUserTools();
       });
   };
+
+  // Only render when modal is active
+  if (modalState !== 'ACTIVE') return null;
+
   return (
-    <div
-      className={`${
-        modalState === 'ACTIVE' ? 'visible' : 'hidden'
-      } fixed top-0 left-0 z-30  h-screen w-screen  bg-gray-alpha flex items-center justify-center`}
+    <WrapperModal
+      close={() => setModalState('INACTIVE')}
+      className="sm:w-[512px]"
+      contentClassName=""
     >
-      <article className="flex w-11/12 sm:w-[512px] flex-col gap-4 rounded-2xl bg-white shadow-lg dark:bg-[#26272E]">
-        <div className="relative">
-          <button
-            className="absolute top-3 right-4 m-2 w-3"
-            onClick={() => {
-              setModalState('INACTIVE');
-            }}
-          >
-            <img className="filter dark:invert" src={Exit} />
-          </button>
-          <div className="p-6">
-            <h2 className="font-semibold text-xl text-jet dark:text-bright-gray px-3">
-              {t('modals.configTool.title')}
-            </h2>
-            <p className="mt-5 text-sm text-gray-600 dark:text-gray-400 px-3">
-              {t('modals.configTool.type')}:{' '}
-              <span className="font-semibold">{tool?.name} </span>
-            </p>
-            <div className="mt-6 relative px-3">
-              <span className="absolute left-5 -top-2 bg-white px-2 text-xs text-gray-4000 dark:bg-[#26272E] dark:text-silver">
-                {t('modals.configTool.apiKeyLabel')}
-              </span>
-              <Input
-                type="text"
-                value={authKey}
-                onChange={(e) => setAuthKey(e.target.value)}
-                borderVariant="thin"
-                placeholder={t('modals.configTool.apiKeyPlaceholder')}
-              ></Input>
-            </div>
-            <div className="mt-8 flex flex-row-reverse gap-1 px-3">
-              <button
-                onClick={() => {
-                  handleAddTool(tool as AvailableToolType);
-                }}
-                className="rounded-3xl bg-purple-30 px-5 py-2 text-sm text-white transition-all hover:bg-[#6F3FD1]"
-              >
-                {t('modals.configTool.addButton')}
-              </button>
-              <button
-                onClick={() => {
-                  setModalState('INACTIVE');
-                }}
-                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 className="p-6">
+        <h2 className="font-semibold text-xl text-jet dark:text-bright-gray px-3">
+          {t('modals.configTool.title')}
+        </h2>
+        <p className="mt-5 text-sm text-gray-600 dark:text-gray-400 px-3">
+          {t('modals.configTool.type')}:{' '}
+          <span className="font-semibold">{tool?.name}</span>
+        </p>
+        <div className="mt-6 px-3">
+          <Input
+            type="text"
+            value={authKey}
+            onChange={(e) => setAuthKey(e.target.value)}
+            borderVariant="thin"
+            placeholder={t('modals.configTool.apiKeyPlaceholder')}
+            label={t('modals.configTool.apiKeyLabel')}
+          />
         </div>
-      </article>
-    </div>
+        <div className="mt-8 flex flex-row-reverse gap-1 px-3">
+          <button
+            onClick={() => {
+              tool && handleAddTool(tool);
+            }}
+            className="rounded-3xl bg-purple-30 px-5 py-2 text-sm text-white transition-all hover:bg-[#6F3FD1]"
+          >
+            {t('modals.configTool.addButton')}
+          </button>
+          <button
+            onClick={() => setModalState('INACTIVE')}
+            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>
+    </WrapperModal>
   );
 }