restructure table header

.gitignore

@@ -18,6 +18,7 @@
 .env.test.local
 .env.production.local
 .env
+.env.production
 
 npm-debug.log*
 yarn-debug.log*

src/components/ImportCSV.tsx

@@ -17,7 +17,7 @@ import Select from "@material-ui/core/Select";
 import FormControl from "@material-ui/core/FormControl";
 import InputLabel from "@material-ui/core/InputLabel";
 import MenuItem from "@material-ui/core/MenuItem";
-
+import AddCSVIcon from "@material-ui/icons/PlaylistAdd";
 import ArrowIcon from "@material-ui/icons/TrendingFlatOutlined";
 import AddIcon from "@material-ui/icons/Add";
 import DeleteIcon from "@material-ui/icons/Delete";
@@ -102,7 +102,9 @@ export default function ImportCSV(props: any) {
 
   return (
     <div>
-      <Button onClick={handleClickOpen}>import csv</Button>
+      <Button onClick={handleClickOpen}>
+        Import CSV <AddCSVIcon />
+      </Button>
       <Dialog
         open={open}
         onClose={handleClose}

src/components/Navigation.tsx

@@ -19,6 +19,7 @@ import CreateTableDialog from "./CreateTableDialog";
 import useSettings from "../hooks/useSettings";
 import useRouter from "../hooks/useRouter";
 import TablesContext from "../contexts/tablesContext";
+// import { auth } from "../firebase";
 
 const useStyles = makeStyles(theme =>
   createStyles({
@@ -67,11 +68,6 @@ const Navigation = (props: any) => {
     <TablesContext.Provider value={{ value: settings.tables }}>
       <React.Fragment>
         <CssBaseline />
-        <Paper square className={classes.paper}>
-          <Typography className={classes.text} variant="h5" gutterBottom>
-            {props.header}
-          </Typography>
-        </Paper>
         {props.children}
         <AppBar position="fixed" color="primary" className={classes.appBar}>
           <Toolbar>
@@ -122,7 +118,13 @@ const Navigation = (props: any) => {
                 )}
               </>
             )}
-
+            {/* <Button
+              onClick={() => {
+                auth.signOut();
+              }}
+            >
+              Sign out
+            </Button> */}
             <CreateTableDialog classes={classes} createTable={createTable} />
             <div className={classes.grow} />
           </Toolbar>

src/components/Table/index.tsx

@@ -22,6 +22,9 @@ import { CLOUD_FUNCTIONS } from "firebase/callables";
 import ImportCSV from "components/ImportCSV";
 import SearchBox from "../SearchBox";
 import DocSelect from "../Fields/DocSelect";
+import Grid from "@material-ui/core/Grid";
+import Typography from "@material-ui/core/Typography";
+import AddIcon from "@material-ui/icons/Add";
 
 const deleteAlgoliaRecord = functions.httpsCallable(
   CLOUD_FUNCTIONS.deleteAlgoliaRecord
@@ -155,9 +158,25 @@ function Table(props: any) {
         </Button>
       ),
     });
-    const rows = tableState.rows; //.map((row: any) => ({ height: 100, ...row }));
+    const rows = tableState.rows;
+
     return (
       <>
+        <Grid container direction="row" alignContent="center">
+          <Typography variant="h5">{collection}</Typography>
+          <Button
+            onClick={() => {
+              tableActions.row.add();
+            }}
+          >
+            Add Row
+            <AddIcon />
+          </Button>
+          <ImportCSV
+            columns={tableState.columns}
+            addRow={tableActions.row.add}
+          />
+        </Grid>
         <ReactDataGrid
           rowHeight={40}
           columns={columns}
@@ -185,14 +204,7 @@ function Table(props: any) {
             );
           }}
         />
-        <Button
-          onClick={() => {
-            tableActions.row.add();
-          }}
-        >
-          Add Row
-        </Button>
-        <ImportCSV columns={tableState.columns} addRow={tableActions.row.add} />
+
         <ColumnEditor
           handleClose={handleCloseHeader}
           anchorEl={anchorEl}

src/views/TableView.tsx

@@ -10,7 +10,7 @@ export default function TableView() {
   const tableCollection = router.location.pathname.split("/")[2];
 
   return (
-    <Navigation header={tableCollection}>
+    <Navigation>
       <Table collection={tableCollection} />
     </Navigation>
   );