changes

ui/src/components/UI/Modals/ConfirmationModal.sass

@@ -1,7 +1,7 @@
 @import "../../../variables.module"
 
 .confirmationText
-  color: rgba(255, 255, 255, 0.75)
+  color: #8F9BB2;
   font-size: 16px
   text-align: left
   padding: 40px

ui/src/components/UI/Modals/ConfirmationModal.tsx

@@ -9,7 +9,7 @@ import {useCommonStyles} from "../../../helpers/commonStyle";
 
 interface ConfirmationModalProps {
     title?: string;
-    content: any;
+    
     isOpen: boolean;
     onClose: () => void;
     onConfirm: () => void;
@@ -24,7 +24,7 @@ interface ConfirmationModalProps {
     isLoading?: boolean;
 }
 
-const ConfirmationModal: React.FC<ConfirmationModalProps> = observer(({title, content, isOpen, onClose, onConfirm, confirmButtonText, closeButtonText, subContent, confirmDisabled = false, isWide, confirmButtonColor, titleColor, img, isLoading}) => {
+const ConfirmationModal: React.FC<ConfirmationModalProps> = observer(({title, isOpen, onClose, onConfirm, confirmButtonText, closeButtonText, subContent, confirmDisabled = false, isWide, confirmButtonColor, titleColor, img, isLoading,children}) => {
     const classes = useCommonStyles();
     const confirmStyle = {width: 100, marginLeft: 20}
     return (
@@ -38,7 +38,7 @@ const ConfirmationModal: React.FC<ConfirmationModalProps> = observer(({title, co
                     {img}
                 </div>}
                 <div>
-                    {content}
+                    {children}
                     {subContent && <div style={{marginTop: 10, color: "#FFFFFF80"}}>
                         {subContent}
                     </div>}

ui/src/components/UI/Modals/CustomModal.tsx

@@ -1,5 +1,7 @@
 import React from 'react';
-import { makeStyles, withStyles, Modal, Backdrop } from '@material-ui/core';
+import { makeStyles, withStyles, Modal, Backdrop, Fade, Box } from '@material-ui/core';
+import {useCommonStyles} from "../../../helpers/commonStyle";
+import { PropertiesTable } from 'redoc/typings/common-elements';
 
 const useStyles = makeStyles({
     modal: {
@@ -9,30 +11,17 @@ const useStyles = makeStyles({
     },
     modalContents: {
         borderRadius: "5px",
-        position: "relative",
+        
         outline: "none",
         minWidth: "300px",
         backgroundColor: "rgb(255, 255, 255)"
-    },
-    paddingModal: {
-        padding: "20px"
-    },
-    modalControl: {
-        width: "250px",
-        margin: "20px",
-    },
-    wideModal: {
-        width: "50vw",
-        maxWidth: 700,
-    },
-
-    modalButton: {
-        margin: "0 auto"
-    },
+    }
 });
 
 
 
+
+
 export interface CustomModalProps {
     open: boolean;
     children: React.ReactElement | React.ReactElement[];
@@ -43,8 +32,10 @@ export interface CustomModalProps {
     isWide? :boolean;
 }
 
-const CustomModal: React.FunctionComponent<CustomModalProps> = ({ open = false, onClose, disableBackdropClick = false, children, className, isPadding, isWide }) => {
+const CustomModal: React.FunctionComponent<CustomModalProps> = ({ open = false, onClose, disableBackdropClick = false, children, className}) => {
     const classes = useStyles({});
+    const globals = useCommonStyles().modal
+     
 
     const onModalClose = (reason) => {
         if(reason === 'backdropClick' && disableBackdropClick)
@@ -52,9 +43,13 @@ const CustomModal: React.FunctionComponent<CustomModalProps> = ({ open = false,
         onClose();
     }
 
-    return <Modal disableEnforceFocus open={open} onClose={onModalClose} disableBackdropClick={disableBackdropClick} className={`${classes.modal} ${className ?  className : ''}`}>
-        <div className={`${classes.modalContents} ${isPadding ?  classes.paddingModal : ''} ${isWide ?  classes.wideModal : ''}`} >
+    return <Modal disableEnforceFocus open={open} onClose={(event, reason) => onModalClose(reason)}  className={`${classes.modal} ${className ?  className : ''}`}>
+        <div className={`${classes.modalContents} ${globals}`} >
+            <Fade in={open}>
+                <Box>
                     {children}
+                </Box>
+            </Fade>
         </div>
     </Modal>
 }

ui/src/helpers/commonStyle.ts

@@ -36,4 +36,17 @@ export const useCommonStyles = makeStyles(() => ({
         fontSize: "14px",
         color: "#494677"
     },
+    modal :{
+        position: 'absolute',
+        top: '10%',
+        left: '50%',
+        transform: 'translate(-50%, 0%)',
+        width: '80vw',
+        bgcolor: 'background.paper',
+        borderRadius: '5px',
+        boxShadow: 24,
+        outline: "none",
+        p: 4,
+        color: '#000',
+    }
 }));