refactor and style DeletePopUp

src/components/generic/Table/Table.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import { createPortal } from 'react-dom';
 import TableStyle from './styles/TableStyle';
 import TableHeader from './components/TableHeader';
 import TableRowItems from './components/TableRowItems';
@@ -7,9 +6,7 @@ import RowsBackgroundStyle from './styles/RowsBackgroundStyle';
 import TableRowFooter from './components/TableRowFooter';
 import deleteSubmission from '../../../api/deleteSubmission';
 import theme from '../../../utils/theme';
-import PopUp from '../PopUp';
-import Button from '../Button';
-import { Medium, H3 } from '../../../utils/fonts';
+import DeletePopUp from './components/DeletePopUp/DeletePopUp';
 
 const Table = ({
   items,
@@ -34,32 +31,6 @@ const Table = ({
     );
   };
 
-  const renderDeletePopUp = (item) => {
-    if (deletePopUp) {
-      return createPortal(
-        <PopUp
-          width="40%"
-          height="35vh"
-          padding="36px 32px 0"
-          closeHandler={() => setDeletePopUp(false)}
-        >
-          <H3>Warning</H3>
-          <Medium>Are you sure to delete submission with id: {item.id}?</Medium>
-          <Button
-            handler={() => {
-              setDeletePopUp(false);
-              deleteItem(item);
-            }}
-          >
-            Yes
-          </Button>
-          <Button handler={() => setDeletePopUp(false)}>No</Button>
-        </PopUp>,
-        document.body
-      );
-    }
-  };
-
   return (
     <TableStyle rowFooter={rowFooter}>
       <TableHeader
@@ -70,6 +41,12 @@ const Table = ({
       {itemsToRender.map((item, i) => {
         return (
           <tr key={`table-row-${i}`} className="TableStyle__tr">
+            <DeletePopUp
+              item={item}
+              setDeletePopUp={setDeletePopUp}
+              deletePopUp={deletePopUp}
+              deleteItem={deleteItem}
+            />
             <TableRowItems orderedKeys={orderedKeys} item={item} i={i} />
             <TableRowFooter
               deleteItem={() => setDeletePopUp(true)}
@@ -77,7 +54,6 @@ const Table = ({
               item={item}
               i={i}
             />
-            {renderDeletePopUp(item)}
             <RowsBackgroundStyle i={i} />
           </tr>
         );

src/components/generic/Table/components/DeletePopUp/DeletePopUp.js

@@ -0,0 +1,45 @@
+import { createPortal } from 'react-dom';
+import PopUp from '../../../PopUp';
+import Button from '../../../Button';
+import { Medium, H3 } from '../../../../../utils/fonts';
+import { FlexColumn, FlexRow } from '../../../../../utils/containers';
+import theme from '../../../../../utils/theme';
+
+const DeletePopUp = ({ deletePopUp, setDeletePopUp, deleteItem, item }) => {
+  if (deletePopUp) {
+    return createPortal(
+      <PopUp
+        width="30%"
+        height="30vh"
+        padding="32px"
+        closeHandler={() => setDeletePopUp(false)}
+      >
+        <FlexColumn width="100%" height="100%" gap="48px">
+          <H3>Warning</H3>
+          <Medium>
+            Are you sure want to delete submission with id: {item.id}?
+          </Medium>
+          <FlexRow gap="48px">
+            <Button
+              handler={() => {
+                setDeletePopUp(false);
+                deleteItem(item);
+              }}
+            >
+              Yes
+            </Button>
+            <Button
+              handler={() => setDeletePopUp(false)}
+              backgroundColor={theme.colors.dark}
+            >
+              No
+            </Button>
+          </FlexRow>
+        </FlexColumn>
+      </PopUp>,
+      document.body
+    );
+  }
+};
+
+export default DeletePopUp;

src/components/generic/Table/components/DeletePopUp/index.js

@@ -0,0 +1 @@
+export { default } from './DeletePopUp';