improvements

src/components/SimpleForm.tsx

@@ -17,6 +17,7 @@ export interface SimpleFormProps {
 	titleVariant?: TypographyProps["variant"]
 	titleComponent?: OverrideProps<any, any>["component"]
 	nonFieldError?: string
+	onCancel?: () => void
 }
 
 export default function SimpleForm({
@@ -26,6 +27,7 @@ export default function SimpleForm({
 	continueActionLabel,
 	cancelActionLabel,
 	nonFieldError,
+	onCancel,
 	titleVariant = "h4",
 	titleComponent = "h1",
 	isSubmitting = false,
@@ -80,12 +82,13 @@ export default function SimpleForm({
 				)}
 				<Grid item>
 					<Grid container justifyContent={cancelActionLabel ? "space-between" : "center"}>
-						{cancelActionLabel && (
+						{cancelActionLabel && onCancel && (
 							<Grid item>
 								<Button
 									disabled={isSubmitting}
 									startIcon={<TiCancel />}
 									color="secondary"
+									onClick={onCancel}
 								>
 									{cancelActionLabel}
 								</Button>

src/route-widgets/AliasesRoute/EmptyStateScreen.tsx

@@ -2,12 +2,13 @@ import {ReactElement} from "react"
 import {useTranslation} from "react-i18next"
 import {FaMask} from "react-icons/fa"
 
-import {Grid, Typography} from "@mui/material"
+import {Container, Grid, Typography} from "@mui/material"
 
 export default function EmptyStateScreen(): ReactElement {
 	const {t} = useTranslation()
 
 	return (
+		<Container maxWidth="xs">
 			<Grid
 				container
 				spacing={4}
@@ -31,5 +32,6 @@ export default function EmptyStateScreen(): ReactElement {
 					</Typography>
 				</Grid>
 			</Grid>
+		</Container>
 	)
 }

src/route-widgets/ReportsRoute/EmptyStateScreen.tsx

@@ -1,7 +1,7 @@
 import {ReactElement} from "react"
 import {useTranslation} from "react-i18next"
 
-import {Grid, Typography} from "@mui/material"
+import {Container, Grid, Typography} from "@mui/material"
 import {mdiTextBoxMultiple} from "@mdi/js/commonjs/mdi"
 import Icon from "@mdi/react"
 
@@ -9,15 +9,8 @@ export default function EmptyStateScreen(): ReactElement {
 	const {t} = useTranslation()
 
 	return (
-		<Grid
+		<Container maxWidth="xs">
-			container
+			<Grid container spacing={4} direction="column" alignItems="center" alignSelf="center">
-			spacing={4}
-			direction="column"
-			alignItems="center"
-			maxWidth="60%"
-			alignSelf="center"
-			marginX="auto"
-		>
 				<Grid item>
 					<Typography variant="h6" component="h2">
 						{t("routes.ReportsRoute.emptyState.title")}
@@ -32,5 +25,6 @@ export default function EmptyStateScreen(): ReactElement {
 					</Typography>
 				</Grid>
 			</Grid>
+		</Container>
 	)
 }

src/routes/EnterDecryptionPassword.tsx

@@ -56,6 +56,7 @@ export default function EnterDecryptionPassword(): ReactElement {
 				cancelActionLabel={t("components.EnterDecryptionPassword.cancelAction")}
 				continueActionLabel={t("components.EnterDecryptionPassword.continueAction")}
 				isSubmitting={formik.isSubmitting}
+				onCancel={navigateToNext}
 			>
 				{[
 					<PasswordField