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;