diff --git a/frontend/src/component/admin/maintenance/MaintenanceToggle.tsx b/frontend/src/component/admin/maintenance/MaintenanceToggle.tsx
index 85884eb493..b5acc1c82e 100644
--- a/frontend/src/component/admin/maintenance/MaintenanceToggle.tsx
+++ b/frontend/src/component/admin/maintenance/MaintenanceToggle.tsx
@@ -1,8 +1,6 @@
import React from 'react';
import {
Box,
- Card,
- CardContent,
FormControlLabel,
styled,
Switch,
@@ -12,24 +10,25 @@ import { useMaintenance } from 'hooks/api/getters/useMaintenance/useMaintenance'
import { useMaintenanceApi } from 'hooks/api/actions/useMaintenanceApi/useMaintenanceApi';
import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
-const StyledCard = styled(Card)(({ theme }) => ({
+const StyledContainer = styled('div')(({ theme }) => ({
display: 'flex',
flexDirection: 'column',
- padding: theme.spacing(2.5),
+ padding: theme.spacing(3),
border: `1px solid ${theme.palette.dividerAlternative}`,
borderRadius: theme.shape.borderRadiusLarge,
- boxShadow: theme.boxShadows.card,
- fontSize: theme.fontSizes.smallBody,
}));
const CardTitleRow = styled(Box)(({ theme }) => ({
display: 'flex',
flexDirection: 'row',
justifyContent: 'space-between',
+ alignItems: 'center',
}));
const CardDescription = styled(Box)(({ theme }) => ({
color: theme.palette.text.secondary,
+ fontSize: theme.fontSizes.smallBody,
+ marginTop: theme.spacing(2),
}));
const SwitchLabel = styled(Typography)(({ theme }) => ({
@@ -51,34 +50,32 @@ export const MaintenanceToggle = () => {
};
return (
-
-
-
- Maintenance Mode
-
- }
- label={
-
- {enabled ? 'Enabled' : 'Disabled'}
-
- }
- />
-
-
- Maintenance Mode is useful when you want to freeze your
- system so nobody can do any changes during this time. When
- enabled it will show a banner at the top of the applications
- and only an admin can enable it or disable it.
-
-
-
+
+
+ Maintenance Mode
+
+ }
+ label={
+
+ {enabled ? 'Enabled' : 'Disabled'}
+
+ }
+ />
+
+
+ Maintenance Mode is useful when you want to freeze your system
+ so nobody can do any changes during this time. When enabled it
+ will show a banner at the top of the applications and only an
+ admin can enable it or disable it.
+
+
);
};
diff --git a/frontend/src/component/admin/maintenance/index.tsx b/frontend/src/component/admin/maintenance/index.tsx
index b65ad7cdaa..46b99cfa90 100644
--- a/frontend/src/component/admin/maintenance/index.tsx
+++ b/frontend/src/component/admin/maintenance/index.tsx
@@ -7,9 +7,7 @@ import AccessContext from 'contexts/AccessContext';
import React, { useContext } from 'react';
import { PageContent } from 'component/common/PageContent/PageContent';
import { PageHeader } from 'component/common/PageHeader/PageHeader';
-import { Box, CardContent, styled } from '@mui/material';
-import { CorsHelpAlert } from 'component/admin/cors/CorsHelpAlert';
-import { CorsForm } from 'component/admin/cors/CorsForm';
+import { Box, styled } from '@mui/material';
import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
import { MaintenanceTooltip } from './MaintenanceTooltip';
import { MaintenanceToggle } from './MaintenanceToggle';
@@ -36,10 +34,10 @@ export const MaintenanceAdmin = () => {
const StyledBox = styled(Box)(({ theme }) => ({
display: 'grid',
- gap: theme.spacing(2),
+ gap: theme.spacing(4),
}));
const MaintenancePage = () => {
- const { uiConfig, loading } = useUiConfig();
+ const { loading } = useUiConfig();
if (loading) {
return null;