add styling to output table - bold, outlines

MichaelPesce · Sep 20, 2024 · f75848f · f75848f
1 parent 35f411f
commit f75848f
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 13 deletions.
diff --git a/electron/ui/src/components/Graph/Graph.js b/electron/ui/src/components/Graph/Graph.js
@@ -19,7 +19,6 @@ export default function Graph() {
               setGraphImage(URL.createObjectURL(data))
             }
             else {
-              console.log("data.size is 0")
               if (tryAgain) setTryAgain(false)
             }
           }).catch((err)=>{

diff --git a/electron/ui/src/components/SingleOutput/SingleOutput.js b/electron/ui/src/components/SingleOutput/SingleOutput.js
@@ -18,6 +18,7 @@ import {
     TableHead,
     TableRow,
 } from '@mui/material'
+import Paper from '@mui/material/Paper';
 
 export default function SingleOutput(props) {
     let params = useParams();
@@ -122,7 +123,12 @@ export default function SingleOutput(props) {
                     {Object.entries(outputTableData).map(([category, rows]) => (
                         <Fragment key={category}>
                         <TableRow>
-                            <TableCell rowSpan={rows.length+1}>{category}</TableCell>
+                            <TableCell 
+                                rowSpan={rows.length+1}
+                                sx={{border:"1px solid #ddd"}}
+                            >
+                                <b>{category}</b>
+                            </TableCell>
                         </TableRow>
                             {rows.map((row, idx) => (
 
@@ -196,17 +202,21 @@ export default function SingleOutput(props) {
                     </Grid>
                 </Modal>
             </Grid>
-            <Table size="small">
-                <TableHead>
-                    <TableRow>
-                        <TableCell>Category</TableCell>
-                        <TableCell>Variable</TableCell>
-                        <TableCell>Units</TableCell>
-                        <TableCell align="right">Value</TableCell>
-                    </TableRow>
-                </TableHead>
-                {renderRows()}
-            </Table>
+            <Grid item xs={12}>
+            <Paper>
+                <Table size="small" sx={{border:"1px solid #ddd"}}>
+                    <TableHead>
+                        <TableRow>
+                            <TableCell>Category</TableCell>
+                            <TableCell>Variable</TableCell>
+                            <TableCell>Units</TableCell>
+                            <TableCell align="right">Value</TableCell>
+                        </TableRow>
+                    </TableHead>
+                    {renderRows()}
+                </Table>
+            </Paper>
+            </Grid>
         </>
     );
 }