modals

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

@@ -0,0 +1,24 @@
+.confirmationText
+  color: rgba(255, 255, 255, 0.75)
+  font-size: 16px
+  text-align: left
+  padding: 40px
+  border-bottom: 1px solid #252C47
+  border-top: 1px solid #252C4C
+​
+.confirmationHeader
+  display: flex
+  justify-content: space-between
+  align-items: center
+  padding: 20px
+​
+  .confirmationTitle
+    font-size: 20px
+​
+  img
+    cursor: pointer
+    height: 30px
+​
+.confirmationActions
+  padding: 20px
+  text-align: right

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

@@ -0,0 +1,54 @@
+import React, {ReactElement} from 'react';
+import iconClose from '../../assets/closeIcon.svg';
+import CustomModal from './CustomModal';
+import {observer} from 'mobx-react-lite';
+import {Button} from "@material-ui/core";
+import './ConfirmationModal.sass';
+import spinner from "../../assets/spinner.svg";
+​
+interface ConfirmationModalProps {
+    title?: string;
+    content: any;
+    isOpen: boolean;
+    onClose: () => void;
+    onConfirm: () => void;
+    closeButtonText?: string;
+    confirmButtonText?: any;
+    subContent?: string;
+    confirmDisabled?: boolean;
+    isWide?: boolean;
+    confirmButtonColor?: string;
+    titleColor?: string;
+    img?: ReactElement;
+    isLoading?: boolean;
+}
+​
+const ConfirmationModal: React.FC<ConfirmationModalProps> = observer(({title, content, isOpen, onClose, onConfirm, confirmButtonText, closeButtonText, subContent, confirmDisabled = false, isWide, confirmButtonColor, titleColor, img, isLoading}) => {
+​
+    return (
+        <CustomModal open={isOpen} onClose={onClose} disableBackdropClick={true} isWide={isWide}>
+            <div className="confirmationHeader">
+                <div className="confirmationTitle" style={titleColor ? {color: titleColor} : {}}>{title ?? "CONFIRMATION"}</div>
+                <img src={iconClose} onClick={onClose} alt="close"/>
+            </div>
+            <div className="confirmationText" style={img ? {display: "flex", alignItems: "center"} : {}}>
+                {img && <div style={{paddingRight: 20}}>
+                    {img}
+                </div>}
+                <div>
+                    {content}
+                    {subContent && <div style={{marginTop: 10, color: "#FFFFFF80"}}>
+                        {subContent}
+                    </div>}
+                </div>
+            </div>
+​
+            <div className="confirmationActions">
+                <Button disabled={isLoading} style={{marginRight: 15}} variant="outlined" color="primary" size='large' onClick={onClose}>{closeButtonText ?? "CANCEL"}</Button>
+                <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>
+            </div>
+        </CustomModal>
+    )
+});
+​
+export default ConfirmationModal;

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

@@ -0,0 +1,60 @@
+import React from 'react';
+import { makeStyles, withStyles, Modal, Backdrop } from '@material-ui/core';
+​
+const useStyles = makeStyles({
+    modal: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center"
+    },
+    modalContents: {
+        borderRadius: "8px",
+        position: "relative",
+        outline: "none",
+        minWidth: "300px",
+        backgroundColor: "#171C30"
+    },
+    paddingModal: {
+        padding: "20px"
+    },
+    modalControl: {
+        width: "250px",
+        margin: "20px",
+    },
+    wideModal: {
+        width: "50vw",
+        maxWidth: 700,
+    },
+​
+    modalButton: {
+        margin: "0 auto"
+    },
+});
+​
+const MyBackdrop = withStyles({
+    root: {
+        backgroundColor: '#090b14e6'
+    },
+})(Backdrop);
+​
+export interface CustomModalProps {
+    open: boolean;
+    children: React.ReactElement | React.ReactElement[];
+    disableBackdropClick?: boolean;
+    onClose?: () => void;
+    className?: string;
+    isPadding?: boolean;
+    isWide? :boolean;
+}
+​
+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}>
+        <div className={`${classes.modalContents} ${isPadding ?  classes.paddingModal : ''} ${isWide ?  classes.wideModal : ''}`} >
+            {children}
+        </div>
+    </Modal>
+}
+​
+export default CustomModal;