From a8f8077770634168d3db14f80308532dd64da374 Mon Sep 17 00:00:00 2001
From: Hazem Krimi <krimihazem1@gmail.com>
Date: Sun, 2 May 2021 03:57:59 +0100
Subject: [PATCH] Complete modal component

---
 src/components/Modal/index.tsx | 51 ++++++++++++++++++++++++++++++++--
 src/components/Modal/styles.ts | 13 ++++++++-
 src/components/index.tsx       |  2 ++
 3 files changed, 63 insertions(+), 3 deletions(-)

diff --git a/src/components/Modal/index.tsx b/src/components/Modal/index.tsx
index 5772ebb..e916e94 100644
--- a/src/components/Modal/index.tsx
+++ b/src/components/Modal/index.tsx
@@ -1,7 +1,54 @@
+import { theme } from '../../themes';
+import { Box, Button, Text } from '..';
 import { Wrapper } from './styles';
 
-const Modal = () => {
-  return <Wrapper></Wrapper>;
+type ModalProps = {
+  color: 'client' | 'productOwner' | 'developer' | 'admin';
+  title: string;
+  description: string;
+  children?: React.ReactNode | JSX.Element | string;
+  onConfirm: () => void;
+  onClose: () => void;
+};
+
+const Modal = ({
+  color,
+  title,
+  description,
+  children,
+  onConfirm,
+  onClose,
+}: ModalProps) => {
+  return (
+    <Wrapper>
+      <Box
+        background={theme.colors.white.main}
+        borderRadius='10px'
+        padding='20px'
+        display='grid'
+        gridTemplateRows='auto'
+        alignItems='center'
+        rowGap='1rem'
+      >
+        <Text variant='headline' weight='bold' color={color}>
+          {title}
+        </Text>
+        <Text variant='body' color={theme.colors.black.main}>
+          {description}
+        </Text>
+        {children}
+        <Box
+          display='grid'
+          gridTemplateColumns='repeat(2, auto)'
+          justifyContent='flex-end'
+          columnGap='1rem'
+        >
+          <Button color={color} text='Confirm' onClick={onConfirm} />
+          <Button color={color} text='Cancel' onClick={onClose} />
+        </Box>
+      </Box>
+    </Wrapper>
+  );
 };
 
 export default Modal;
diff --git a/src/components/Modal/styles.ts b/src/components/Modal/styles.ts
index 14ea300..c41cfc0 100644
--- a/src/components/Modal/styles.ts
+++ b/src/components/Modal/styles.ts
@@ -1,3 +1,14 @@
 import styled from 'styled-components';
 
-export const Wrapper = styled.div``;
+export const Wrapper = styled.div`
+  position: fixed;
+  z-index: 200;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.15);
+  display: grid;
+  align-items: center;
+  justify-content: center;
+`;
diff --git a/src/components/index.tsx b/src/components/index.tsx
index 7322723..995971f 100644
--- a/src/components/index.tsx
+++ b/src/components/index.tsx
@@ -18,6 +18,7 @@ import Sidebar from './Sidebar';
 import ProtectedRoute from './ProtectedRoute';
 import AuthRoute from './AuthRoute';
 import SectionSelector from './SectionSelector';
+import Modal from './Modal';
 
 export {
   Button,
@@ -40,4 +41,5 @@ export {
   ProtectedRoute,
   AuthRoute,
   SectionSelector,
+  Modal,
 };