From a4c2a1d160d2ff87cec4d28b534fad1a02602c44 Mon Sep 17 00:00:00 2001
From: shams mosowi <shams.mosowi@gmail.com>
Date: Thu, 3 Oct 2019 12:41:55 +1000
Subject: [PATCH] inline import csv keypairs

---
 src/components/ImportCSV.tsx   | 17 +++++++++++++----
 src/components/Table/index.tsx |  2 +-
 2 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/src/components/ImportCSV.tsx b/src/components/ImportCSV.tsx
index 4a156d6c..268cc3c7 100644
--- a/src/components/ImportCSV.tsx
+++ b/src/components/ImportCSV.tsx
@@ -39,9 +39,9 @@ const useStyles = makeStyles(theme =>
       marginTop: theme.spacing(2),
     },
     keyPair: {
+      flexGrow: 2,
       display: "flex",
-      flexWrap: "wrap",
-      justifyContent: "space-between",
+      justifyItems: "space-between",
     },
     cloudIcon: {
       fontSize: 64,
@@ -132,13 +132,22 @@ export default function ImportCSV(props: any) {
 
                 <CloudIcon className={classes.cloudIcon} />
                 <Typography variant="subtitle1">or</Typography>
-                <Button color="secondary">click to select a file</Button>
+                {isDragActive ? (
+                  <p>Drop the file here ...</p>
+                ) : (
+                  <Button color="secondary">click to select a file</Button>
+                )}
               </Grid>
             </div>
           ) : (
             <Grid container direction="column">
               {keyPairs.map((keyPair: any, index: number) => (
-                <Grid item alignItems="center">
+                <Grid
+                  container
+                  direction="row"
+                  alignItems="center"
+                  justify="space-between"
+                >
                   <Typography>{keyPair.csvKey}</Typography>
                   <ArrowIcon />
                   <Typography>{keyPair.columnKey}</Typography>
diff --git a/src/components/Table/index.tsx b/src/components/Table/index.tsx
index 9f877cc7..579ad7ef 100644
--- a/src/components/Table/index.tsx
+++ b/src/components/Table/index.tsx
@@ -192,7 +192,7 @@ function Table(props: Props) {
         <Confirmation
           message={{
             title: "Delete Row",
-            body: "Are you sure you want do delete this row",
+            body: "Are you sure you want to delete this row",
             confirm: (
               <>
                 <DeleteIcon /> Delete