Make DirectoryInformation easier to ready

ECN · Oct 13, 2020 · a66f36d · a66f36d
1 parent 42e54db
commit a66f36d
Showing 1 changed file with 24 additions and 9 deletions.
diff --git a/src/components/DirectoryInformation/DirectoryInformation.js b/src/components/DirectoryInformation/DirectoryInformation.js
@@ -1,25 +1,40 @@
 import React from "react";
 import PropTypes from "prop-types";
 import { TableContainer, Table, TableRow, TableCell, makeStyles } from "@material-ui/core";
+import webqueue2Theme from "../../theme";
 
 export default function DirectoryInformation({ section }) {
 
-    const useStyles = makeStyles(() => ({
-		breakWord: {
+    const theme = webqueue2Theme(false);
+    const useStyles = makeStyles((theme) => ({
+        headerCell: {
+            borderBottom:  "none",
+            paddingTop: "3px",
+            paddingBottom: "3px",
+        },
+        bodyCell: {
             wordBreak: "break-word",
-        }
-	}));
-	const classes = useStyles();
+            borderBottom:  "none",
+            paddingTop: "3px",
+            paddingBottom: "3px",
+        },
+        stripedRow: {
+            '&:nth-of-type(odd)': {
+                backgroundColor: theme.palette.action.hover,
+            },
+        },
+    }));
+    const classes = useStyles(theme);
 
     return (
         <TableContainer>
             <Table size="small" >
                 {Object.keys(section).map((key) => (
                     key === "type" ? "" :
-                    <TableRow>
-                        <TableCell variant="head">{key}</TableCell>
-                        <TableCell classes={{ root: classes.breakWord }}>{section[key]}</TableCell>
-                    </TableRow>
+                        <TableRow classes={{ root: classes.stripedRow }}>
+                            <TableCell classes={{ root: classes.headerCell }} variant="head">{key}</TableCell>
+                            <TableCell classes={{ root: classes.bodyCell }}>{section[key]}</TableCell>
+                        </TableRow>
                 ))}
             </Table>
         </TableContainer>