add/Choose form to link user and ui changes

microfrontends/SignDocuments/src/Component/component/LinkUserModal.js

@@ -1,33 +1,16 @@
 import React from "react";
-import Modal from "react-bootstrap/Modal";
-import SelectSigners from "./SelectSigners";
-import AddUser from "./AddUser";
+import SelectSigners from "../../premitives/SelectSigners";
+import AddUser from "../../premitives/AddUser";
+import ModalUi from "../../premitives/ModalUi";
 
 const LinkUserModal = (props) => {
   return (
-    <Modal show={props.isAddUser[props.uniqueId]}>
-      <Modal.Header
-        className={"bg-info"}
-        style={{
-          display: "flex",
-          justifyContent: "space-between",
-          alignItems: "center"
-        }}
-      >
-        <span style={{ color: "white" }}>Add/Choose Signer</span>
-        <span
-          style={{ color: "white", cursor: "pointer" }}
-          onClick={() => props.closePopup()}
-        >
-          X
-        </span>
-      </Modal.Header>
-      <Modal.Body>
-        <SelectSigners
+    <ModalUi title={"Add/Choose Signer"} isOpen={props.isAddUser[props.uniqueId]} handleClose={props.closePopup}>
+      <SelectSigners
           details={props.handleAddUser}
           closePopup={props.closePopup}
         />
-        <div style={{ display: "flex", alignItems: "center", gap: 5 }}>
+         <div style={{ display: "flex", alignItems: "center", gap: 5 }}>
           <span
             style={{
               height: 1,
@@ -45,8 +28,7 @@ const LinkUserModal = (props) => {
           ></span>
         </div>
         <AddUser details={props.handleAddUser} closePopup={props.closePopup} />
-      </Modal.Body>
-    </Modal>
+    </ModalUi>
   );
 };