From 8822dc8008623b377f7eadf3910059753e2b3a80 Mon Sep 17 00:00:00 2001
From: Leon <>
Date: Thu, 20 Jan 2022 19:21:34 +0200
Subject: [PATCH] changes

---
 .../UI/Modals/ConfirmationModal.sass          |  2 +-
 .../UI/Modals/ConfirmationModal.tsx           |  6 +--
 ui/src/components/UI/Modals/CustomModal.tsx   | 39 ++++++++-----------
 ui/src/helpers/commonStyle.ts                 | 13 +++++++
 4 files changed, 34 insertions(+), 26 deletions(-)

diff --git a/ui/src/components/UI/Modals/ConfirmationModal.sass b/ui/src/components/UI/Modals/ConfirmationModal.sass
index 32d75c2c2..6ac5efb3c 100644
--- a/ui/src/components/UI/Modals/ConfirmationModal.sass
+++ b/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
diff --git a/ui/src/components/UI/Modals/ConfirmationModal.tsx b/ui/src/components/UI/Modals/ConfirmationModal.tsx
index a27013a06..4e1971d51 100644
--- a/ui/src/components/UI/Modals/ConfirmationModal.tsx
+++ b/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>}
diff --git a/ui/src/components/UI/Modals/CustomModal.tsx b/ui/src/components/UI/Modals/CustomModal.tsx
index cb9783dd4..f6cd41042 100644
--- a/ui/src/components/UI/Modals/CustomModal.tsx
+++ b/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 : ''}`} >
-            {children}
+    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>
 }
diff --git a/ui/src/helpers/commonStyle.ts b/ui/src/helpers/commonStyle.ts
index 8c4e2e34e..6f4482bdd 100644
--- a/ui/src/helpers/commonStyle.ts
+++ b/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',
+    }
 }));