Initial layout: Prettified

src/compforge/src/FormsDisplay.js

 import React from 'react';
-import { Grid } from '@material-ui/core';
+import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Paper, makeStyles } from '@material-ui/core';
+
+const useStyles = makeStyles({
+    table: {
+        minWidth: 650,
+    },
+  });
 
 const FormsDisplay = ({ formItems }) => {
+    const classes = useStyles();
     return (
         <div>
-            {formItems.map(
-                (formItem, i) =>
-                    <Grid
-                        container
-                        direction="column"
-                        justify="space-evenly"
-                        alignItems="stretch"
-                        spacing={3}
-                        item
-                        xs={9}
-                        key={i}>
-                        <FormItem
-                            name={formItem.name}
-                            owner={formItem.owner}
-                            dateModified={formItem.dateModified} />
-                    </Grid>
-            )}
+            <TableContainer component={Paper}>
+                <Table className={classes.table} aria-label="simple table">
+                    <TableHead>
+                        <TableRow>
+                            <TableCell>Form name</TableCell>
+                            <TableCell align="right">Owner</TableCell>
+                            <TableCell align="right">Date modified</TableCell>
+                        </TableRow>
+                    </TableHead>
+                    <TableBody>
+                        {formItems.map(formItem => (
+                            <TableRow key={formItem.name}>
+                                <TableCell component="th" scope="row">
+                                    {formItem.name}
+                                </TableCell>
+                                <TableCell align="right">{formItem.owner}</TableCell>
+                                <TableCell align="right">{formItem.dateModified}</TableCell>
+                            </TableRow>
+                        ))}
+                    </TableBody>
+                </Table>
+            </TableContainer>
         </div>
     )
 }
 
-const FormItem = ({ name, owner, dateModified }) => {
-    return (
-        <Grid
-            container
-            direction="row"
-            spacing={3}>
-            <Grid item xs={3}>
-                <h3>{name}</h3>
-            </Grid>
-            <Grid item xs={3}>
-                <h3>{owner}</h3>
-            </Grid>
-            <Grid item xs={3}>
-                <div outline="2px solid black">
-                    <h3>{dateModified}</h3>
-                </div>
-            </Grid>
-        </Grid>
-    )
-}
-
 export default FormsDisplay
\ No newline at end of file

src/compforge/src/index.js

@@ -34,6 +34,8 @@ const Page = () => {
   const classes = useStyles();
   return (
     <Grid container spacing={3}>
+
+      {/* Header */}
       <Grid item xs={12}>
         <AppBar position="static">
           <Toolbar>
@@ -44,22 +46,17 @@ const Page = () => {
           </Toolbar>
         </AppBar>
       </Grid>
-      <Grid
-        item
-        xs={3}
-      >
+
+      {/* Side Menu */}
+      <Grid item xs={2}>
         <Menu menuItems={menuItems} />
       </Grid>
-      <Grid
-        container
-        item
-        xs={9}
-        direction="column"
-        justify="space-evenly"
-        spacing={3}
-      >
+
+      {/* Form Area */}
+      <Grid item xs={10}>
         <FormsDisplay formItems={formItems} />
       </Grid>
+
     </Grid>
   )
 }