From 964ee90d5033415d30d7d5d629ebf1c0694ef6c3 Mon Sep 17 00:00:00 2001
From: Myzel394 <50424412+Myzel394@users.noreply.github.com>
Date: Sat, 5 Nov 2022 10:53:08 +0100
Subject: [PATCH] improvements

---
 src/components/SimpleForm.tsx                 |  5 +-
 .../AliasesRoute/EmptyStateScreen.tsx         | 48 ++++++++++---------
 .../ReportsRoute/EmptyStateScreen.tsx         | 40 +++++++---------
 src/routes/EnterDecryptionPassword.tsx        |  1 +
 4 files changed, 47 insertions(+), 47 deletions(-)

diff --git a/src/components/SimpleForm.tsx b/src/components/SimpleForm.tsx
index ec1eb8a..abef448 100644
--- a/src/components/SimpleForm.tsx
+++ b/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>
diff --git a/src/route-widgets/AliasesRoute/EmptyStateScreen.tsx b/src/route-widgets/AliasesRoute/EmptyStateScreen.tsx
index 9f38c3e..414717c 100644
--- a/src/route-widgets/AliasesRoute/EmptyStateScreen.tsx
+++ b/src/route-widgets/AliasesRoute/EmptyStateScreen.tsx
@@ -2,34 +2,36 @@ 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 (
-		<Grid
-			container
-			spacing={4}
-			direction="column"
-			alignItems="center"
-			maxWidth="60%"
-			alignSelf="center"
-			marginX="auto"
-		>
-			<Grid item>
-				<Typography variant="h6" component="h2">
-					{t("routes.AliasesRoute.emptyState.title")}
-				</Typography>
+		<Container maxWidth="xs">
+			<Grid
+				container
+				spacing={4}
+				direction="column"
+				alignItems="center"
+				maxWidth="60%"
+				alignSelf="center"
+				marginX="auto"
+			>
+				<Grid item>
+					<Typography variant="h6" component="h2">
+						{t("routes.AliasesRoute.emptyState.title")}
+					</Typography>
+				</Grid>
+				<Grid item>
+					<FaMask size={40} />
+				</Grid>
+				<Grid item>
+					<Typography variant="body1">
+						{t("routes.AliasesRoute.emptyState.description")}
+					</Typography>
+				</Grid>
 			</Grid>
-			<Grid item>
-				<FaMask size={40} />
-			</Grid>
-			<Grid item>
-				<Typography variant="body1">
-					{t("routes.AliasesRoute.emptyState.description")}
-				</Typography>
-			</Grid>
-		</Grid>
+		</Container>
 	)
 }
diff --git a/src/route-widgets/ReportsRoute/EmptyStateScreen.tsx b/src/route-widgets/ReportsRoute/EmptyStateScreen.tsx
index 4486c63..4e02c23 100644
--- a/src/route-widgets/ReportsRoute/EmptyStateScreen.tsx
+++ b/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,28 +9,22 @@ export default function EmptyStateScreen(): ReactElement {
 	const {t} = useTranslation()
 
 	return (
-		<Grid
-			container
-			spacing={4}
-			direction="column"
-			alignItems="center"
-			maxWidth="60%"
-			alignSelf="center"
-			marginX="auto"
-		>
-			<Grid item>
-				<Typography variant="h6" component="h2">
-					{t("routes.ReportsRoute.emptyState.title")}
-				</Typography>
+		<Container maxWidth="xs">
+			<Grid container spacing={4} direction="column" alignItems="center" alignSelf="center">
+				<Grid item>
+					<Typography variant="h6" component="h2">
+						{t("routes.ReportsRoute.emptyState.title")}
+					</Typography>
+				</Grid>
+				<Grid item>
+					<Icon path={mdiTextBoxMultiple} size={2.5} />
+				</Grid>
+				<Grid item>
+					<Typography variant="body1">
+						{t("routes.ReportsRoute.emptyState.description")}
+					</Typography>
+				</Grid>
 			</Grid>
-			<Grid item>
-				<Icon path={mdiTextBoxMultiple} size={2.5} />
-			</Grid>
-			<Grid item>
-				<Typography variant="body1">
-					{t("routes.ReportsRoute.emptyState.description")}
-				</Typography>
-			</Grid>
-		</Grid>
+		</Container>
 	)
 }
diff --git a/src/routes/EnterDecryptionPassword.tsx b/src/routes/EnterDecryptionPassword.tsx
index 653d339..15bebbf 100644
--- a/src/routes/EnterDecryptionPassword.tsx
+++ b/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