modal changes

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

@@ -1,3 +1,5 @@
+@import "../../../variables.module"
+
 .confirmationText
   color: rgba(255, 255, 255, 0.75)
   font-size: 16px
@@ -13,7 +15,10 @@
   padding: 20px
 
   .confirmationTitle
-    font-size: 20px
+    color: #494677;
+    font-size: 28px
+    color: $blue-gray
+    font-weight: 600
 
   img
     cursor: pointer

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

@@ -5,6 +5,7 @@ import {observer} from 'mobx-react-lite';
 import {Button} from "@material-ui/core";
 import './ConfirmationModal.sass';
 import spinner from "../../assets/spinner.svg";
+import {useCommonStyles} from "../../../helpers/commonStyle";
 
 interface ConfirmationModalProps {
     title?: string;
@@ -24,7 +25,8 @@ interface ConfirmationModalProps {
 }
 
 const ConfirmationModal: React.FC<ConfirmationModalProps> = observer(({title, content, isOpen, onClose, onConfirm, confirmButtonText, closeButtonText, subContent, confirmDisabled = false, isWide, confirmButtonColor, titleColor, img, isLoading}) => {
-
+    const classes = useCommonStyles();
+    const confirmStyle = {width: 100, marginLeft: 20}
     return (
         <CustomModal open={isOpen} onClose={onClose} disableBackdropClick={true} isWide={isWide}>
             <div className="confirmationHeader">
@@ -44,8 +46,17 @@ const ConfirmationModal: React.FC<ConfirmationModalProps> = observer(({title, co
             </div>
 
             <div className="confirmationActions">
-                <Button disabled={isLoading} style={{marginRight: 15}} variant="outlined" color="primary" size='large' onClick={onClose}>{closeButtonText ?? "CANCEL"}</Button>
+                <Button disabled={isLoading} style={{width: 100}} className={classes.outlinedButton} size={"small"}
-                <Button disabled={confirmDisabled || isLoading} color='primary' variant='contained' style={confirmButtonColor ? {backgroundColor: confirmButtonColor} : {}} onClick={onConfirm} size='large' endIcon={isLoading && <img src={spinner} alt="spinner"/>}>{confirmButtonText ?? "YES"}</Button>
+                            variant='outlined' onClick={onClose}>{closeButtonText ?? "CANCEL"}
+                </Button>
+                <Button style={confirmButtonColor ? {backgroundColor: confirmButtonColor,...confirmStyle} : {...confirmStyle}} 
+                    className={classes.button} size={"small"}
+                    
+                    
+                    onClick={onConfirm} 
+                    disabled={confirmDisabled || isLoading} 
+                    endIcon={isLoading && <img src={spinner} alt="spinner"/>}>{confirmButtonText ?? "YES"}
+                </Button>
             </div>
         </CustomModal>
     )

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

@@ -8,11 +8,11 @@ const useStyles = makeStyles({
         justifyContent: "center"
     },
     modalContents: {
-        borderRadius: "8px",
+        borderRadius: "5px",
         position: "relative",
         outline: "none",
         minWidth: "300px",
-        backgroundColor: "#171C30"
+        backgroundColor: "rgb(255, 255, 255)"
     },
     paddingModal: {
         padding: "20px"
@@ -31,11 +31,7 @@ const useStyles = makeStyles({
     },
 });
 
-const MyBackdrop = withStyles({
+
-    root: {
-        backgroundColor: '#090b14e6'
-    },
-})(Backdrop);
 
 export interface CustomModalProps {
     open: boolean;
@@ -50,7 +46,13 @@ export interface CustomModalProps {
 const CustomModal: React.FunctionComponent<CustomModalProps> = ({ open = false, onClose, disableBackdropClick = false, children, className, isPadding, isWide }) => {
     const classes = useStyles({});
 
-    return <Modal disableEnforceFocus open={open} onClose={onClose} disableBackdropClick={disableBackdropClick} className={`${classes.modal} ${className ?  className : ''}`} BackdropComponent={MyBackdrop}>
+    const onModalClose = (reason) => {
+        if(reason === 'backdropClick' && disableBackdropClick)
+            return;   
+        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}
         </div>