Update table styles

2 files changed, 14 insertions, 4 deletions

diff --git a/modern/src/admin/StatisticsPage.js b/modern/src/admin/StatisticsPage.js
index 9d075fef..c2e160dc 100644
--- a/modern/src/admin/StatisticsPage.js
+++ b/modern/src/admin/StatisticsPage.js
@@ -1,12 +1,18 @@
 import React, { useState } from 'react';
 import {
-  FormControl, InputLabel, Select, MenuItem, TextField, Button, TableContainer, Table, TableRow, TableCell, TableHead, TableBody, Paper,
+  FormControl, InputLabel, Select, MenuItem, TextField, Button, TableContainer, Table, TableRow, TableCell, TableHead, TableBody, makeStyles,
 } from '@material-ui/core';
 import moment from 'moment';
 import { formatDate } from '../common/formatter';
 import OptionsLayout from '../settings/OptionsLayout';
 import { useTranslation } from '../LocalizationProvider';
 
+const useStyles = makeStyles((theme) => ({
+  table: {
+    backgroundColor: theme.palette.colors.white,
+  },
+}));
+
 const Filter = ({ setItems }) => {
   const t = useTranslation();
 
@@ -97,6 +103,7 @@ const Filter = ({ setItems }) => {
 };
 
 const StatisticsPage = () => {
+  const classes = useStyles();
   const t = useTranslation();
 
   const [items, setItems] = useState([]);
@@ -104,7 +111,7 @@ const StatisticsPage = () => {
   return (
     <OptionsLayout>
       <Filter setItems={setItems} />
-      <TableContainer component={Paper}>
+      <TableContainer className={classes.table}>
         <Table>
           <TableHead>
             <TableRow>
diff --git a/modern/src/admin/UsersPage.js b/modern/src/admin/UsersPage.js
index 289598e7..fd17bd35 100644
--- a/modern/src/admin/UsersPage.js
+++ b/modern/src/admin/UsersPage.js
@@ -10,6 +10,9 @@ import OptionsLayout from '../settings/OptionsLayout';
 import { useTranslation } from '../LocalizationProvider';
 
 const useStyles = makeStyles((theme) => ({
+  table: {
+    backgroundColor: theme.palette.colors.white,
+  },
   columnAction: {
     width: theme.spacing(1),
     padding: theme.spacing(0, 1),
@@ -30,7 +33,7 @@ const UsersView = ({ updateTimestamp, onMenuClick }) => {
   }, [updateTimestamp]);
 
   return (
-    <TableContainer>
+    <TableContainer className={classes.table}>
       <Table>
         <TableHead>
           <TableRow>
@@ -45,7 +48,7 @@ const UsersView = ({ updateTimestamp, onMenuClick }) => {
           {items.map((item) => (
             <TableRow key={item.id}>
               <TableCell className={classes.columnAction} padding="none">
-                <IconButton onClick={(event) => onMenuClick(event.currentTarget, item.id)}>
+                <IconButton size="small" onClick={(event) => onMenuClick(event.currentTarget, item.id)}>
                   <MoreVertIcon />
                 </IconButton>
               </TableCell>