diff --git a/src/views/IOC/IOCListView.js b/src/views/IOC/IOCListView.js index 318f7b19f885ba90308124cf75780e18592f3ac7..c30de5965d8ad4b8fea5737f6ccb4a4ed79b5146 100644 --- a/src/views/IOC/IOCListView.js +++ b/src/views/IOC/IOCListView.js @@ -4,10 +4,18 @@ import { useGlobalAppBar } from "../../components/navigation/GlobalAppBar/Global import { SearchableIOCList } from "../../components/IOC/IOCList"; import { SearchableIOCTable } from "../../components/IOC/IOCTable"; import { useIOCSearch } from "../../api/SwaggerApi"; +import { makeStyles } from '@material-ui/core/styles'; + +const useStyles = makeStyles((theme) => ({ + root: { + marginBottom: theme.spacing(2), + }, +})); export function IOCListView() { const [iocs, getIocs] = useIOCSearch(); const [query, setQuery] = useState(); + const classes = useStyles(); useEffect(() => getIocs(`${query}`), [query, getIocs]); @@ -35,7 +43,7 @@ export function IOCListView() { return ( <Container> - <Paper> + <Paper className={classes.root}> <Grid container spacing={1}> <Grid item xs={12}> {content} diff --git a/src/views/deployments/DeploymentsView.js b/src/views/deployments/DeploymentsView.js index fe57453d506c88d905fcaba0bdaa9a2e6591ce7f..77278f7c00b6f35731377d3df49a24a27fa2a6cb 100644 --- a/src/views/deployments/DeploymentsView.js +++ b/src/views/deployments/DeploymentsView.js @@ -8,16 +8,18 @@ import { SearchableDeploymentsList } from "../../components/deployments/Deployme import { useGlobalAppBar } from "../../components/navigation/GlobalAppBar/GlobalAppBar"; import { useDeploymentSearch, userContext } from '../../api/SwaggerApi'; - -const useStyles = makeStyles({ +const useStyles = makeStyles((theme) => ({ root: { width: '100%' }, + paper: { + marginBottom: theme.spacing(2), + }, formControl: { marginLeft: '5px', marginRight: '5px', } -}); +})); export function DeploymentsView() { const classes = useStyles(); @@ -72,7 +74,7 @@ export function DeploymentsView() { return ( <Container className={classes.root}> - <Paper> + <Paper className={classes.paper}> <Grid container spacing={1} justify="flex-start"> <Grid item xs={12} md={10}> <Tabs diff --git a/src/views/home/HomeView.js b/src/views/home/HomeView.js index 35bf1690858be19aac2e4fe7e1138e7baf78ab54..3327b30f819084f0c68369c2c0e98fe8ae93e8c4 100644 --- a/src/views/home/HomeView.js +++ b/src/views/home/HomeView.js @@ -6,13 +6,20 @@ import { CreateIOC } from "../../components/IOC/CreateIOC"; import { SearchableIOCTable } from "../../components/IOC/IOCTable"; import { SimpleModal } from "../../components/common/SimpleModal/SimpleModal"; import { useCreateIOC, useIOCSearch, userContext } from "../../api/SwaggerApi"; +import { makeStyles } from '@material-ui/core/styles'; +const useStyles = makeStyles((theme) => ({ + root: { + marginBottom: theme.spacing(2), + }, +})); export function HomeView() { const [iocs, getIocs] = useIOCSearch(); const [query, setQuery] = useState(); const [iocFormOpen, setIOCFormOpen] = useState(false); const {user} = useContext(userContext); + const classes = useStyles(); useEffect(() => getIocs(`${query}`), [query, getIocs]); @@ -44,7 +51,7 @@ export function HomeView() { return ( <Container> - <Paper> + <Paper className={classes.root}> <Grid container spacing={1} justify="flex-end"> <Grid item xs={10}> <Box display="flex" flexDirection="row" p={2} m={1}> diff --git a/src/views/host/HostListView.js b/src/views/host/HostListView.js index 46e95cc0f7b89db1a5db9533db7a04c2009b30f5..ccf5f3e0c04fbb240561163ab889310c59ead6b5 100644 --- a/src/views/host/HostListView.js +++ b/src/views/host/HostListView.js @@ -9,12 +9,20 @@ import HostList from '../../components/host/HostList'; import HostTable from '../../components/host/HostTable'; import { useCSEntrySearch } from "../../api/SwaggerApi"; import { useGlobalAppBar } from '../../components/navigation/GlobalAppBar/GlobalAppBar'; +import { makeStyles } from '@material-ui/core/styles'; + +const useStyles = makeStyles((theme) => ({ + root: { + marginBottom: theme.spacing(2), + }, +})); export function HostListView() { useGlobalAppBar("CCCE / Explore IOC hosts"); const [hosts, getHosts] = useCSEntrySearch(); const [query, setQuery] = useState(); + const classes = useStyles(); useEffect(() => getHosts(`fqdn:"${query}"`), [query, getHosts]); @@ -31,7 +39,7 @@ export function HostListView() { return ( <Container> - <Paper> + <Paper className={classes.root}> <Grid container spacing={1} justify="flex-end"> <Grid item xs={12} md={12}> {content} diff --git a/src/views/statistics/StatisticsView.js b/src/views/statistics/StatisticsView.js index 8dfead086f9311aa1514d375775d262ca3fcb836..4846a61ea67e114d9b7bb7b6d73aef58391d23ef 100644 --- a/src/views/statistics/StatisticsView.js +++ b/src/views/statistics/StatisticsView.js @@ -3,6 +3,13 @@ import { Container, Paper } from "@material-ui/core"; import { KeyValueTable } from '../../components/common/KeyValueTable/KeyValueTable'; import { useStatistics } from "../../api/SwaggerApi"; import { useGlobalAppBar } from "../../components/navigation/GlobalAppBar/GlobalAppBar"; +import { makeStyles } from '@material-ui/core/styles'; + +const useStyles = makeStyles((theme) => ({ + root: { + marginBottom: theme.spacing(2), + }, +})); const clone = (obj) => Object.assign({}, obj); @@ -23,6 +30,7 @@ export function StatisticsView() { useGlobalAppBar(title); const [statistics, getStatistics] = useStatistics(); + const classes = useStyles(); useEffect(() => getStatistics() @@ -43,8 +51,7 @@ export function StatisticsView() { return ( <Container> <h2>Statistics</h2> - <Paper> - + <Paper className={classes.root}> {statistics && <KeyValueTable obj={renderStat} variant="table" />} </Paper> </Container>