Maintenance UI fixes (#2849)

Maintenance UI fixes
Unleash · Jan 9, 2023 · 7b07595 · 7b07595
1 parent d13401b
commit 7b07595
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 40 deletions.
diff --git 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 (
-        <StyledCard>
-            <CardContent>
-                <CardTitleRow>
-                    <b>Maintenance Mode</b>
-                    <FormControlLabel
-                        sx={{ fontSize: '10px' }}
-                        control={
-                            <Switch
-                                onChange={updateEnabled}
-                                value={enabled}
-                                name="enabled"
-                                checked={enabled}
-                            />
-                        }
-                        label={
-                            <SwitchLabel>
-                                {enabled ? 'Enabled' : 'Disabled'}
-                            </SwitchLabel>
-                        }
-                    />
-                </CardTitleRow>
-                <CardDescription>
-                    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.
-                </CardDescription>
-            </CardContent>
-        </StyledCard>
+        <StyledContainer>
+            <CardTitleRow>
+                <b>Maintenance Mode</b>
+                <FormControlLabel
+                    sx={{ margin: 0 }}
+                    control={
+                        <Switch
+                            onChange={updateEnabled}
+                            value={enabled}
+                            name="enabled"
+                            checked={enabled}
+                        />
+                    }
+                    label={
+                        <SwitchLabel>
+                            {enabled ? 'Enabled' : 'Disabled'}
+                        </SwitchLabel>
+                    }
+                />
+            </CardTitleRow>
+            <CardDescription>
+                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.
+            </CardDescription>
+        </StyledContainer>
     );
 };
diff --git 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;