From a66f36db8d378740a54c00195ab5fb19359fba08 Mon Sep 17 00:00:00 2001
From: Justin Campbell <campb303@w2vm4.ecn.purdue.edu>
Date: Mon, 12 Oct 2020 21:05:48 -0400
Subject: [PATCH] Make DirectoryInformation easier to ready

---
 .../DirectoryInformation.js                   | 33 ++++++++++++++-----
 1 file changed, 24 insertions(+), 9 deletions(-)

diff --git a/src/components/DirectoryInformation/DirectoryInformation.js b/src/components/DirectoryInformation/DirectoryInformation.js
index 64a7d93..cb7c494 100644
--- 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>