#237 - Creating info modal component

src/components/InfoModal/index.js

@@ -0,0 +1,65 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {
+  Box, Typography, IconButton,
+} from '@material-ui/core';
+import Modal from '@material-ui/core/Modal';
+import CloseIcon from '@material-ui/icons/Close';
+import InfoIcon from '@material-ui/icons/Info';
+import { useStyles } from './style';
+
+export default function InfoModal(props) {
+  const classes = useStyles();
+
+  const {
+    // eslint-disable-next-line react/prop-types
+    open, handleClose, title, toolTipText, toolTipColor,
+  } = props;
+
+  return (
+    <Modal
+      open={open}
+      onClose={handleClose}
+      aria-labelledby="modal-modal-title"
+      aria-describedby="modal-modal-description"
+    >
+      <Box className={classes.container}>
+        <Box className={classes.modal}>
+          <IconButton
+            onClick={handleClose}
+            className={classes.close}
+          >
+            <CloseIcon className={classes.iconClose} />
+          </IconButton>
+          <IconButton className={classes.info} style={{ padding: 0 }}>
+            <InfoIcon className={classes.iconInfo} style={{ color: toolTipColor }} />
+          </IconButton>
+          <Typography variant="h4" className={classes.titleModal}>
+            <Box fontWeight="fontWeightBold" display="flex">
+              {title}
+            </Box>
+          </Typography>
+          <Typography id="modal-modal-description" className={classes.descriptionModal}>
+            {toolTipText}
+          </Typography>
+        </Box>
+      </Box>
+    </Modal>
+  );
+}
+
+InfoModal.propTypes = {
+  open: PropTypes.bool,
+  handleClose: PropTypes.func,
+  title: PropTypes.string,
+  toolTipText: PropTypes.string,
+  toolTipColor: PropTypes.string,
+};
+
+InfoModal.defaultProps = {
+  open: false,
+  handleClose: () => {},
+  title: '',
+  toolTipText: '',
+  toolTipColor: '',
+};

src/components/InfoModal/style.js

@@ -0,0 +1,68 @@
+/* eslint-disable import/prefer-default-export */
+import { makeStyles } from '@material-ui/core/styles';
+
+export const useStyles = makeStyles((theme) => ({
+  container: {
+    margin: '50% 16px 0px 16px',
+
+    [theme.breakpoints.up('sm')]: {
+      margin: '50% 35px 0px 35px',
+    },
+  },
+  modal: {
+    width: '100%',
+    position: 'relative',
+    fontSize: '12px',
+    padding: '20px',
+    backgroundColor: '#363636',
+    zIndex: 10,
+    borderRadius: '16px',
+    display: 'flex',
+    flexDirection: 'column',
+  },
+  titleModal: {
+    color: theme.palette.white.main,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingBottom: '24px',
+  },
+  descriptionModal: {
+    color: theme.palette.white.main,
+    display: 'flex',
+    fontSize: '13px',
+    textAlign: 'center',
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingBottom: '24px',
+  },
+  iconClose: {
+    width: '20px',
+    height: '20px',
+
+    [theme.breakpoints.up('sm')]: {
+      width: '32px',
+      height: '32px',
+    },
+  },
+  close: {
+    padding: 0,
+    marginTop: '20px',
+    marginRight: '20px',
+    display: 'flex',
+    flexDirection: 'row-reverse',
+    color: 'white',
+    right: 0,
+    top: 0,
+    position: 'absolute',
+    cursor: 'pointer',
+  },
+  info: {
+    marginTop: '28px',
+    marginBottom: '16px',
+  },
+  iconInfo: {
+    width: '32px',
+    height: '32px',
+  },
+}));