From 429f3672eae04afc21701ec275e6bae8fa614cc6 Mon Sep 17 00:00:00 2001
From: Zoltan Runyo <zoltan.runyo@ess.eu>
Date: Mon, 13 Sep 2021 10:31:01 +0200
Subject: [PATCH] ICSHWI-7718: Add bottom-margin to all pages (fix)
---
src/views/IOC/IOCListView.js | 10 +++++++++-
src/views/deployments/DeploymentsView.js | 10 ++++++----
src/views/home/HomeView.js | 9 ++++++++-
src/views/host/HostListView.js | 10 +++++++++-
src/views/statistics/StatisticsView.js | 11 +++++++++--
5 files changed, 41 insertions(+), 9 deletions(-)
diff --git a/src/views/IOC/IOCListView.js b/src/views/IOC/IOCListView.js
index 318f7b19..c30de596 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 fe57453d..77278f7c 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 35bf1690..3327b30f 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 46e95cc0..ccf5f3e0 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 8dfead08..4846a61e 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>
--
GitLab