Adding background paper components to reports

5 files changed, 43 insertions, 30 deletions

diff --git a/modern/src/reports/EventReportPage.js b/modern/src/reports/EventReportPage.js
index cbe2ced5..890af348 100644
--- a/modern/src/reports/EventReportPage.js
+++ b/modern/src/reports/EventReportPage.js
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { DataGrid } from '@material-ui/data-grid';
-import { FormControl, InputLabel, Select, MenuItem } from '@material-ui/core';
+import { FormControl, InputLabel, Select, MenuItem, Paper } from '@material-ui/core';
 import t from '../common/localization';
 import { formatDate } from '../common/formatter';
 import ReportFilter from './ReportFilter';
@@ -84,11 +84,13 @@ const EventReportPage = () => {
 
   return (
     <ReportLayoutPage filter={<Filter setItems={setItems} />}>
-      <DataGrid
-        rows={items} 
-        columns={columns} 
-        hideFooter 
-        autoHeight />
+      <Paper>
+        <DataGrid
+          rows={items} 
+          columns={columns} 
+          hideFooter 
+          autoHeight />
+      </Paper>
     </ReportLayoutPage>
   );
 }
diff --git a/modern/src/reports/RouteReportPage.js b/modern/src/reports/RouteReportPage.js
index b8bad00d..02d41a2e 100644
--- a/modern/src/reports/RouteReportPage.js
+++ b/modern/src/reports/RouteReportPage.js
@@ -5,6 +5,7 @@ import { formatDistance, formatSpeed, formatBoolean, formatDate, formatCoordinat
 import ReportFilter from './ReportFilter';
 import ReportLayoutPage from './ReportLayoutPage';
 import { useAttributePreference, usePreference } from '../common/preferences';
+import { Paper } from '@material-ui/core';
 
 const Filter = ({ setItems }) => {
 
@@ -81,11 +82,13 @@ const RouteReportPage = () => {
 
   return (
     <ReportLayoutPage filter={<Filter setItems={setItems} />}>
-      <DataGrid
-        rows={items} 
-        columns={columns} 
-        hideFooter 
-        autoHeight />
+      <Paper>
+        <DataGrid
+          rows={items} 
+          columns={columns} 
+          hideFooter 
+          autoHeight />
+      </Paper>
     </ReportLayoutPage>
   );
 };
diff --git a/modern/src/reports/StopReportPage.js b/modern/src/reports/StopReportPage.js
index 78731510..d5a25033 100644
--- a/modern/src/reports/StopReportPage.js
+++ b/modern/src/reports/StopReportPage.js
@@ -5,6 +5,7 @@ import { formatDistance, formatHours, formatDate, formatVolume } from '../common
 import ReportFilter from './ReportFilter';
 import ReportLayoutPage from './ReportLayoutPage';
 import { useAttributePreference } from '../common/preferences';
+import { Paper } from '@material-ui/core';
 
 const Filter = ({ setItems }) => {
 
@@ -80,12 +81,14 @@ const StopReportPage = () => {
   
   return (
     <ReportLayoutPage filter={<Filter setItems={setItems} />}>
-      <DataGrid
-        rows={items} 
-        columns={columns} 
-        hideFooter 
-        autoHeight
-        getRowId={() => Math.random()} />
+      <Paper>
+        <DataGrid
+          rows={items} 
+          columns={columns} 
+          hideFooter 
+          autoHeight
+          getRowId={() => Math.random()} />
+      </Paper>
     </ReportLayoutPage>
   );
 };
diff --git a/modern/src/reports/SummaryReportPage.js b/modern/src/reports/SummaryReportPage.js
index 2af7d3b0..ff59a1f6 100644
--- a/modern/src/reports/SummaryReportPage.js
+++ b/modern/src/reports/SummaryReportPage.js
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { DataGrid } from '@material-ui/data-grid';
-import { FormControlLabel, Checkbox } from '@material-ui/core';
+import { FormControlLabel, Checkbox, Paper } from '@material-ui/core';
 import t from '../common/localization';
 import { formatDistance, formatHours, formatDate, formatSpeed, formatVolume } from '../common/formatter';
 import ReportFilter from './ReportFilter';
@@ -96,12 +96,14 @@ const SummaryReportPage = () => {
   
   return (
     <ReportLayoutPage filter={<Filter setItems={setItems} />}>
-      <DataGrid
-        rows={items} 
-        columns={columns} 
-        hideFooter 
-        autoHeight
-        getRowId={() => Math.random()} />
+      <Paper>
+        <DataGrid
+          rows={items} 
+          columns={columns} 
+          hideFooter 
+          autoHeight
+          getRowId={() => Math.random()} />
+      </Paper>
     </ReportLayoutPage>
   );
 }
diff --git a/modern/src/reports/TripReportPage.js b/modern/src/reports/TripReportPage.js
index 45a7786c..5360e733 100644
--- a/modern/src/reports/TripReportPage.js
+++ b/modern/src/reports/TripReportPage.js
@@ -5,6 +5,7 @@ import { formatDistance, formatSpeed, formatHours, formatDate, formatVolume } fr
 import ReportFilter from './ReportFilter';
 import ReportLayoutPage from './ReportLayoutPage';
 import { useAttributePreference } from '../common/preferences';
+import { Paper } from '@material-ui/core';
 
 const Filter = ({ setItems }) => {
 
@@ -111,12 +112,14 @@ const TripReportPage = () => {
 
   return (
     <ReportLayoutPage filter={<Filter setItems={setItems} />}>
-      <DataGrid
-        rows={items} 
-        columns={columns} 
-        hideFooter 
-        autoHeight
-        getRowId={() => Math.random()} />
+      <Paper>
+        <DataGrid
+          rows={items} 
+          columns={columns} 
+          hideFooter 
+          autoHeight
+          getRowId={() => Math.random()} />
+      </Paper>
     </ReportLayoutPage>
   );
 }